(4)JavaScript DOM读写文本节点

文本节点一定是元素节点的子节点
获取文本节点的步骤
文本节点一定是元素节点的子节点
获取文本节点所在的元素节点-》利用firstChild获取文本节点-》利用文本的nodeValue 属性来读写文本值

childNodes : 该方法不实用因为如果要获取指定的节点的指定子节点的集合可以直接调用元素节点的getElementsByTagName（）方法来获取。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	
	  //获取元素节点的子节点
	  window.onload = function()
	  {
		 
		  //1. 获取city节点的所有子节点
		  var cityNode = document.getElementById("city");
		  
		  //2. 利用元素节点的childNodes 方法 可以获取指定元素节点的所有子节点
		  //@@@@ 显示 9个   的原因是 所有空白区域都算上了
		  //所以该方法不实用。
		  alert(cityNode.childNodes.length);
		  
		  //3. 获取#city 节点的所有li子节点
		  var cityLiNodes = cityNode.getElementsByTagName("li");
		  alert(cityLiNodes.length);
		  
		  //4. 获取指定节点的第一个子节点和最后一个子节点
		  alert(cityNode.firstChild);   //这是一个元素节点
		  alert(cityNode.lastChild);	//这是文本节点
		  
	  }
	</script>
</head>
<body>
	<p>你喜欢哪个城市？</p>
	<ul id = "city"><li id="bj" name="beijing">北京</li>
	   <li>上海</li>
	   <li>东京</li>
	   <li>首尔</li>
	</ul>
	
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id = "game">
	   <li id="rl">红警</li>
	   <li>实况</li>
	   <li>极品飞车</li>
	   <li>魔兽</li>
	</ul>
	<br><br>
	
	gender:
		<input type="radio" name="gender" value="male"/>Male
		<input type="radio" name="gender" value="female"/>Female
		
	name: <input type="text" name="username" id="name" value="11111"/>
</body>
</html>

正确方式：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	  
	  //获取文本节点
	  window.onload = function()
	  {
		 //文本节点一定是元素节点的子节点。
		 
		 //1.获取文本节点所在的元素节点
		 var bjNode = document.getElementById("bj");
		 
		 //2.通过firstChild定义到文本节点
		 var bjTextNode = bjNode.firstChild;
		 
		 //3.通过操作文本节点的nodeValue 属性来读写文本节点的值。
		 //@@@@@结果输出的北京
		 alert(bjTextNode.nodeValue);
		 //@@@@结果是2  因为北京是2个字
		 alert(bjTextNode.length);
		 //@@@@结果是  北京变成了 湖南
		 bjTextNode.nodeValue = "湖南";
		 
	  }
	  
	  
	  
	</script>
</head>
<body>
	<p>你喜欢哪个城市？</p>
	<ul id = "city"><li id="bj" name="beijing">北京</li>
	   <li>上海</li>
	   <li>东京</li>
	   <li>首尔</li>
	</ul>
	
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id = "game">
	   <li id="rl">红警</li>
	   <li>实况</li>
	   <li>极品飞车</li>
	   <li>魔兽</li>
	</ul>
	<br><br>
	
	gender:
		<input type="radio" name="gender" value="male"/>Male
		<input type="radio" name="gender" value="female"/>Female
		
	name: <input type="text" name="username" id="name" value="11111"/>
</body>
</html>

(4)JavaScript DOM读写文本节点

猜你喜欢