（一）首尾子節點：
【首】：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'