获取指定的元素节点

 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>