DOM节点(首尾子节点兄弟节点)的兼容性问题处理

Posted 2020-08-14

首尾子节点：firstChild 、firstElementChild

                 lastChild 、lastElementChild

兄弟节点：  nextSibling 、 nextElementSibling

                previousSiblling 、previousElementSibling

以首节点为例：

//IE6-8
//oUl.firstChild.style.background=‘red‘;

//高级浏览器
//oUl.firstElementChild.style.background=‘red‘;

html代码：
<ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

js代码：
window.onload=function(){

var oUl=document.getElementById(‘ul1‘)  ;
if(oUl.firstElementChild){
    oUl.firstElementChild.style.background=‘red‘;
   } else {
    oUl.firstChild.style.background = ‘red‘;
  }
}