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>