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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。