web-dev-qa-db-ja.com

node.nextSiblingとChildNode.nextElementSiblingの違いは何ですか?

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

彼らは同じことではないですか?

どちらもすぐ後に続くノードを返します。たくさんの記事を読みましたが、同じように見えますが、どちらを使用するかわかりませんか?

25
Ani

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でコメント、そのテキストを上の要素から分離する空白-一部のブラウザは要素と非空白ノードの間に空白を別々のノードに入れるようですが、他のブラウザはそれを残りのテキストと組み合わせます)。

57
Jules