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>
