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>