码迷,mamicode.com
首页 > Web开发 > 详细

JS-firstChild,firstElementChild,lastChild,firstElementChild,nextSibling,nextElementSibling

时间:2016-11-12 19:27:22      阅读:298      评论:0      收藏:0      [点我收藏+]

标签:兼容性   blog   last   highlight   doc   bsp   text   round   get   

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

1,firstChild:第一个子节点。

  标准下:firstChild会包含文本类型的节点

  非标准下(IE7以下):fistChild只包含元素节点

  var oUl = document.getElementById(‘ul1‘);

    alert( oUl.firstChild ); //标准下显示[object Text],非标准下是[object HTMLLIElement]
    alert( oUl.firstElementChild )//标准和非标准都是 [object HTMLLIElement]

  注意兼容性:

   var oFirst = oUl.firstElementChild || oUl.firstChild;
       oFirst.style.background = ‘red‘;

2,lastChild:最后一个子节点(同上)

  兼容性:

      var oLast = oUl.lastElementChild || oUl.lastChild;
      oLast.style.background = ‘yellow‘;

3,nextSibling:下一个兄弟节点

      var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
      oNext.style.background = ‘blue‘;4,previousSibling:上一个兄弟节点

      var oPrev = oLast.previousElementSibling || oLast.previousSibling;
      oPrev.style.background = ‘orange‘;

JS-firstChild,firstElementChild,lastChild,firstElementChild,nextSibling,nextElementSibling

标签:兼容性   blog   last   highlight   doc   bsp   text   round   get   

原文地址:http://www.cnblogs.com/TianHero/p/6057161.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!