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>
