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=li120 ????????//得到ul21 ????????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>HTML DOM firstChild lastChild nextSibling previousSibling 属性_获取属性值的undefined问题
原文地址：https://www.cnblogs.com/denggelin/p/9104549.html