1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
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
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 id="city">
45 <li id="bj" name="BeiJing">北京</li>
46 <li>上海</li>
47 <li>东京</li>
48 <li>首尔</li>
49 </ul>
50
51 <br><br>
52 <p>你喜欢哪款单机游戏?</p>
53 <ul id="game">
54 <li id="rl">红警</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>
