获取子节点 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <script type="text/javascript">
 8         window.onload=function(){
 9         var b01=document.getElementById("01");
10 
11         b01.onclick=function(){
12           var city=document.getElementById("city");
13           //查询#city下所有li节点
14           var lis=city.getElementsByTagName("li");
15           alert(lis.length);
16 
17         }
18         var b02=document.getElementById("02");
19         b02.onclick=function(){
20         var city=document.getElementById("city");
21         /*childNodes属性会获取包括文本节点在内的所有节点,根据DOM标签间空白也会当成文本节点
22         注意：在IE8及以下的浏览器中，不会将空白文本当成子节点
23         */
24         var cns=city.childNodes;
25         /*
26         children属性可以获取当前元素的所有子元素
27         */
28         var cns2=city.children;
29         alert(cns.length);
30        }
31 
32         var b03=document.getElementById("03");
33         b03.onclick=function(){
34         //返回#phone的第一个节点
35         var phone=document.getElementById("phone");
36         //phone.childNodes[0];
37         //firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
38         var fir=phone.firstChild;
39         /*firstElementChild获取当前元素的第一个子元素
40         不支持IE8及以下的浏览器，如果需要兼容他们不要使用
41         */
42         fir=phone.firstElementChild;
43         alert(fir.innerHTML);
44         }
45             };
46 
47     </script>
48   <style type="text/css">
49       *{
50       margin:0px;
51       padding:0px;
52       }
53      ul{
54       text-docoration:none;
55      }
56   </style>
57 <body>
58 <!--
59 getElementsByTagName() 返回当前节点的指定标签名后代节点
60 childNodes 表示当前节点的所有子节点
61 firstChild 表示当前节点的第一个子节点
62 lastChild 表示当前节点的最后一个子节点
63 -->
64  <p>你喜欢的城市是什么？</p>
65 <ul id="city">
66     <li id="shanghai">上海</li>
67     <li>北京</li>
68     <li>深圳</li>
69 </ul>
70 <p>你的手机的操作系统？</p>
71 <ul id="phone">
72     <li>IOS</li>
73     <li>Android</li>
74 </ul>
75   <input type="button" value="button1" id="01">
76   <input type="button" value="button2" id="02">
77   <input type="button" value="button3" id="03">
78 </body>
79 </html>

 

posted @ 2019-07-25 14:26  zuiaimiusi  阅读(225)  评论(0)    收藏  举报