node.nextSibling和ChildNode.nextElementSibling有什么区别？

Question

<div id="div-01">Here is div-01</div> <div id="div-02">Here is div-02</div>

他们不是一回事吗？

两者都返回紧接着的节点.我看了很多文章,但在我看来是同样的事情,但无法想象在哪里使用其他？

Answer 1

nextElementSibling总是返回一个元素. nextSibling可以返回任何类型的节点.它们与您的示例相同,但在其他情况下则不同,例如:

<p><span id="span-01">Here is span-01</span>
Some text at the top level
<span id="span-02">Here is span-02</span></p>

在这种情况下,document.getElementById('span-01').nextElementSibling是span-02,但是document.getElementById('span-01').nextSibling文本节点包含"顶级的一些文本"(或者,如评论中的@Manngo指出的那样,将该文本与上面的元素分开的空格 - 似乎有些浏览器放了元素和非空白节点之间的空格分隔成单独的节点,而其他节点则将其与文本的其余部分组合在一起.