1 <html> 2 <head> 3 <title>HTML示例</title> 4 <style type="text/css"> 5 6 </style> 7 </head> 8 <body> 9 10 <ul id="ulid"> 11 <li id="li1">qqqqq</li> 12 <li id="li2">wwww</li> 13 <li id="li3">yyyyyy</li> 14 <li id="li4">test1111</li> 15 </ul> 16 17 <script type="text/javascript"> 18 19 //获取ul的第一个子节点 id=li1 20 //得到ul 21 var ul1 = document.getElementById("ulid"); 22 //第一个子节点 23 var li1 = ul1.firstChild; 24 alert(li1.id); 25 26 //得到最后一个子节点 27 var li4 = ul1.lastChild; 28 alert(li4.id); 29 30 //获取li的id是li3的上一个和下一个兄弟节点 31 var li3 = document.getElementById("li3"); 32 alert(li3.nextSibling.id); 33 alert(li3.previousSibling.id); 34 35 </script> 36 </body> 37 </html>
以上案例在Google Chrome和IE是undefined,并且打印一下lastChildNode 显示是Object Text,是因为在高级浏览器里面,通过前述API拿到的第一和最后一个子标签是文本标签(文本节点),跟childNodes属性类似,因此,我们在碰到这些状况的时候,还是不建议使用,建议透过getElementsByTagName()的方法获取子元素.
解决办法：
不使用HTML DOM firstChild 属性、HTML DOM lastChild 属性、HTML DOM nextSibling 属性、HTML DOM previousSibling 属性
改为使用HTML DOM getElementsByTagName() 方法
1 <html> 2 <head> 3 <title>HTML示例</title> 4 <style type="text/css"> 5 6 </style> 7 </head> 8 <body> 9 10 <ul id="ulid"> 11 <li id="li1">qqqqq</li> 12 <li id="li2">wwww</li> 13 <li id="li3">yyyyyy</li> 14 <li id="li4">test1111</li> 15 </ul> 16 17 <script type="text/javascript"> 18 19 var li=document.getElementsByTagName("li"); 20 21 for (var i=0;i<li.length;i++) { 22 alert(li[i].id); 23 } 24 25 </script> 26 </body> 27 </html>