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