HTML DOM firstChild lastChild nextSibling previousSibling 屬性_獲取屬性值的undefined問題
阿新 • • 發佈：2018-05-29
++ ogl dom tel 文本 next ssi 上一個 fin
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>
HTML DOM firstChild lastChild nextSibling previousSibling 屬性_獲取屬性值的undefined問題