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

最新推荐文章于 2022-04-24 23:17:50 发布

a2273490

最新推荐文章于 2022-04-24 23:17:50 发布

阅读量407

点赞数

原文链接：http://www.cnblogs.com/TianHero/p/6057161.html

版权

<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';

转载于:https://www.cnblogs.com/TianHero/p/6057161.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注