JavaScript的DOM编程--02--获取元素节点
如何来获取元素节点:
1) .document.getElementById: 根据 id 属性获取对应的单个节点
2) .document.getElementsByTagName:
根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度
3) .document.getElementsByName:
根据节点的 name 属性获取符合条件的节点数组,
但 ie 的实现方式和 W3C 标准有差别:
在 html 文档中若某节点(li)没有 name 属性,
则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.
4). 其它的两个方法, ie 根本就不支持, 所以不建议使用
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>Untitled Document</title>
6
7 <script type="text/javascript">
8
9 //获取指定的元素节点.
10 window.onload = function(){
11
12 //1. 获取 id 为 bj 的那个节点.
13 //在编写 HTML 文档时, 需确保 id 属性值是唯一的.
14 //该方法为 document 对象的方法
15 var bjNode = document.getElementById("bj");
16 alert(bjNode);
17
18 //2. 获取所有的 li 节点.
19 //使用标签名获取指定节点的集合.
20 //该方法为 Node 接口的方法, 即任何一个节点都有这个方法.
21 var liNodes = document.getElementsByTagName("li");
22 alert(liNodes.length);
23 //获取指定节点的li
24 var cityNode = document.getElementById("city");
25 var cityLiNodes = cityNode.getElementsByTagName("li");
26 alert(cityLiNodes.length);
27
28 //3. 根据 HTML 文档元素的 name 属性名来获取指定的节点的集合.
29 var genderNodes = document.getElementsByName("gender");
30 alert(genderNodes.length);
31
32 //若 HTML 元素自身没有定义 name 属性, 则 getElementsByName()
33 //方法对于 IE 无效. 所以使用该方法时需谨慎.
34 var bjNode2 = document.getElementsByName("BeiJing");
35 alert(bjNode2.length);
36
37 }
38
39 </script>
40
41 </head>
42 <body>
43 <p>你喜欢哪个城市?</p>
44 <ul >
45 <li name="BeiJing">北京</li>
46 <li>上海</li>
47 <li>东京</li>
48 <li>首尔</li>
49 </ul>
50
51 <br><br>
52 <p>你喜欢哪款单机游戏?</p>
53 <ul >
54 <li >红警</li>
55 <li>实况</li>
56 <li>极品飞车</li>
57 <li>魔兽</li>
58 </ul>
59
60 <br><br>
61 gender:
62 <input type="radio" name="gender" value="male"/>Male
63 <input type="radio" name="gender" value="female"/>Female
64 </body>
65 </html>