(2)JavaScript DOM获取元素节点

如何获取元素节点：
1 document.getElementById ：根据 id 属性获取对应的单个节点
2 document.getElementsByTagName: 根据标签名获取指定节点名字的数组，数组对象
3 document.getElementsByName:
根据节点的 name 属性获取符合条件的结点数组
但 ie 的实现方式和W3C 标准有差别；
在html 文档中若某个结点（li）没有name属性
则 ie 使用 getElementsByName 不能获取到节点数组但是火狐可以
4 其他的两个方法， ie 根本就不支持所以不建议使用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	  //获取指定的元素节点
	  window.onload = function()
	  {
	  
		  //1.   获取id为bj的那个节点.  
		  //在编写HTML文档时  需确保id属性值是唯一的
		  //该方法为document 对象的方法    ---- 显示Object
		  //@@@@@显示 Object
		  var bjNode = document.getElementById("bj");
		  alert(bjNode);
		  
		  //2. 获取所有的li节点 .
		  //使用标签名获取指定节点的集合.
		  //该方法为 Node 接口的方法 即任何一个结点都有这个方法
		  //@@@@@显示 8
		  var liNodes = document.getElementsByTagName("li");
		  alert(liNodes.length);
		  
		  
		  //2.获取指定节点的  的子节点li的个数  
		  //@@@@@显示 4
		  var cityNode = document.getElementById("city");
		  var cityLiNodes = cityNode.getElementsByTagName("li");
		  alert(cityLiNodes.length);
		  
		  //3.根据HTML文档元素的 name 属性名来获取指定的节点的集合。
		  //@@@@@显示 2
		  var genderNodes = document.getElementsByName("gender");
		  alert(genderNodes.length);
			  
		  //若HTML 元素自身没有定义name属性  则 getElementsByName（）
		  //方法对于IE无效. 所以使用该方法需谨慎
		  //@@@@@显示 1
		  var bjNodes2 = document.getElementsByName("beijing");
		  alert(bjNodes2.length);	  
	  }
	</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

</body>
</html>

(2)JavaScript DOM获取元素节点

猜你喜欢