码迷,mamicode.com
首页 > Web开发 > 详细

JS获取元素节点的子节点

时间:2015-02-04 21:43:44      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

 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>    

 

JS获取元素节点的子节点

标签:

原文地址:http://www.cnblogs.com/zhangfan94/p/4273265.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!