JS获取元素节点的子节点

浏览数：48 / 时间：2015年06月09日

 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. 获取 #city 节点的所有子节点.
13                 var cityNode = document.getElementById("city");
14                 
15                 //2. 利用元素节点的 childNodes 方法可以获取指定元素节点的所有子节点.
16                 //但该方法不实用. 
17                 alert(cityNode.childNodes.length);
18                 
19                 //3. 获取 #city 节点的所有 li 子节点.
20                 var cityLiNodes = cityNode.getElementsByTagName("li");
21                 alert(cityLiNodes.length);
22                 
23                 //4. 获取指定节点的第一个子节点和最后一个子节点. 
24                 alert(cityNode.firstChild);
25                 alert(cityNode.lastChild);
26             }
27             
28         </script>
29         
30     </head>
31     <body>
32         <p>你喜欢哪个城市?</p>
33         <ul id="city"><li id="bj" name="BeiJing">北京</li>
34             <li>上海</li>
35             <li>东京</li>
36             <li>首尔</li>
37         </ul>
38         
39         <br><br>
40         <p>你喜欢哪款单机游戏?</p>
41         <ul id="game">
42             <li id="rl">红警</li>
43             <li>实况</li>
44             <li>极品飞车</li>
45             <li>魔兽</li>
46         </ul>
47         
48         <br><br>
49         name: <input type="text" name="username" 
50             id="name" value="atguigu"/>
51     </body>
52 </html>