JS——DOM操作（首尾子節點、兄弟節點【firstChild、previousSibling...】）
阿新 • • 發佈：2019-05-28
（一）首尾子節點：
【首】：firstChild、 firstElementChild
【尾】：lastChild、 lastElementChild
（首尾兩個子節點，有兩種寫法，主要是因為相容性問題）
詳情看以下程式碼： （lastChild、 lastElementChild與之相同）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script>
9 window.onload=function(){
10 var oUl=document.getElementById('ul');
11 //首尾子節點，存在相容性問題
12
13 oUl.firstChild.style.background='red' //在ie9以下的瀏覽器得以實現效果，ie9以上瀏覽器不相容
14
15 oUl.firstElementChild.style.background='red' //在ie9以上瀏覽器得以相容，chrome，ff等
16 }
17 </script>
18 </head>
19 <body>
20 <ul id="ul">
21 <li></li>
22 <li></li>
23 <li></li>
24 <li></li>
25 </ul>
26 </html>由此可見，第13行程式碼：firstChild會在ie9以下的版本中得以實現；而第15行程式碼：firstElementChild會在ie9以上的版本中得以實現
但是！
如何解決以上問題？使得瀏覽器具有相容性！！！ //解決方法如下： var iResult1=oUl.firstElementChild || oUl.firstChild; //宣告一個iResult1變數，讓瀏覽器自行判斷選擇的DOM操作物件 iResult1.style.background='blue' （二）兄弟節點： 【前】：previousSibling、 previousElementSibling 【後】：nextSibling、 nextElementSibling （兄弟兩個子節點，也有兩種寫法，主要是也因為相容性問題） 詳情看以下程式碼： （nextSibling、 nextElementSibling與之相同） 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script>
9 window.onload=function(){
10 var oLi=document.getElementById('li');
11 //兄弟節點，存在相容性問題
12
13 oLi.previousSibling.style.background='red' //在ie9以下的瀏覽器得以實現效果，ie9以上瀏覽器不相容
14
15 oLi.previousElementSibling.style.background='red' //在ie9以上瀏覽器得以相容，chrome，ff等
16 }
17 </script>
18 </head>
19 <body>
20 <ul id="ul">
21 <li></li>
22 <li id="li">xxx</li>
23 <li></li>
24 <li></li>
25 </ul>
26 </html>由此可見，第13行程式碼：previousSibling會在ie9以下的版本中得以實現；而第15行程式碼：previousElementSibling會在ie9以上的版本中得以實現
同樣地！
如何解決以上問題？使得瀏覽器具有相容性！！！ //解決方法如下： var iResult2=oLi.previousElementSibling || oLi.previousSibling; //宣告一個iResult2變數，讓瀏覽器自行判斷選擇的DOM操作物件 iResult2.style.background='blue'