javascript——DOM之firstChild,lastChild,NextSibling,previousSibling

元素.firstChild : 只读 属性 第一个子节点
标准下:firstChild会包含文本类型的节点
非标准下:只包含元素节点
元素.firstElementChild : 只读 属性 标准下获取第一个元素类型的子节点

兼容标准和非标准浏览器的写法:

HTML代码:

<ul id="ul1">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <li>55555</li>
    </ul>

JS代码:

window.onload = function() {
  var oUl = document.getElementById('ul1');
  //
alert(oUl.firstChild);   // alert(oUl.firstElementChild);
  if(oUl.firstElementChild){
     oUl.firstElementChild.style.color = 'red';
  }else{
      oUl.firstChild.style.color = 'red';
  }
};

firstChild,lastChild,NextSibling,previousSibling的用法一样,以下是第二种写法:

window.onload = function() {
  var oUl = document.getElementById('ul1');

  /*
  元素.firstChild || 元素.firstElementChild 最后一个子节点
  */
  var oFirst = oUl.firstElementChild || oUl.firstChild;
  oFirst.style.color = 'red';

  /*
  元素.lastChild || 元素.lastElementChild 最后一个子节点
  */

  var oLast = oUl.lastElementChild || oUl.lastChild;
  oLast.style.color = 'green';

  /*
  元素.nextSibling || 元素.nextElementSibling 下一个兄弟节点
  */
  var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
  oNext.style.color = 'blue';

  /*
  元素.previousSibling || 元素.previousElementSibling 上一个兄弟节点
  */
  var oPrev = oLast.previousElementSibling || oLast.previousSibling;
  oPrev.style.color = 'orange';

  //下一个兄弟节点的下一个相邻兄弟节点(及ul下的第三个字节点)
  var oTher = oNext.nextElementSibling || oNext.nextSibling;
  oTher.style.color = 'purple';

};

 

posted @ 2015-03-03 16:18  波克比520  阅读(545)  评论(0编辑  收藏  举报