JavaScript的DOM编程--04--获取元素节点的子节点
获取元素节点的子节点(**只有元素节点才有子节点!!)
1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点
的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取.
2). firstChild 属性获取第一个子节点
3). lastChild 属性获取最后一个子节点
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>Untitled Document</title> 5 6 <script type="text/javascript"> 7 8 //获取元素节点的子节点 9 window.onload = function(){ 10 11 //1. 获取 #city 节点的所有子节点. 12 var cityNode = document.getElementById("city"); 13 14 //2. 利用元素节点的 childNodes 方法可以获取指定元素节点的所有子节点. 15 //但该方法不实用. 16 alert(cityNode.childNodes.length); 17 18 //3. 获取 #city 节点的所有 li 子节点. 19 var cityLiNodes = cityNode.getElementsByTagName("li"); 20 alert(cityLiNodes.length); 21 22 //4. 获取指定节点的第一个子节点和最后一个子节点. 23 alert(cityNode.firstChild); 24 alert(cityNode.lastChild); 25 } 26 27 </script> 28 29 </head> 30 <body> 31 <p>你喜欢哪个城市?</p> 32 <ul id="city"><li id="bj" name="BeiJing">北京</li> 33 <li>上海</li> 34 <li>东京</li> 35 <li>首尔</li> 36 </ul> 37 38 <br><br> 39 <p>你喜欢哪款单机游戏?</p> 40 <ul id="game"> 41 <li id="rl">红警</li> 42 <li>实况</li> 43 <li>极品飞车</li> 44 <li>魔兽</li> 45 </ul> 46 47 <br><br> 48 name: <input type="text" name="username" 49 id="name" value="atguigu"/> 50 </body> 51 </html>
