HTML DOM firstChild lastChild nextSibling previousSibling 属性_获取属性值的undefined问题

时间 2019-12-08

标签 html dom firstchild lastchild nextsibling previoussibling 属性获取 undefined 问题栏目 HTML 繁體版

原文原文链接

 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()的方法获取子元素.javascript

解决办法：css

不使用HTML DOM firstChild 属性、HTML DOM lastChild 属性、HTML DOM nextSibling 属性、HTML DOM previousSibling 属性html

改成使用HTML DOM getElementsByTagName() 方法java

 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>