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

Posted 2020-08-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS-firstChild,firstElementChild,lastChild,firstElementChild,nextSibling,nextElementSibling相关的知识，希望对你有一定的参考价值。

<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的主要内容，如果未能解决你的问题，请参考以下文章