Whats the difference between nextElementSibling vs nextSibling

Question

Although I seem to get strange results occasionally these seem to me to be the same so can someone describe the difference?

Answer 1

'nextSibling' returns the next Node object whereas 'nextElementSibling' returns the next Element object, so probably the real question is what is the difference between a Node & an Element?

Basically an Element is specified by an HTML Tag whereas a Node is any Object in the DOM, so an Element is a Node but a Node can also include Text Nodes in the form of whitespace, comments, text characters or line breaks. For more info on Elements vs Nodes see this Difference between Node object and Element object?

i.e Take the following DOM snippet

<div id="start"></div>
Me
<p>Hi</p>

Using nextSibling you would get:

console.log(document.getElementById('start').nextSibling); // "\nMe\n"
console.log(document.getElementById('start').nextSibling.nextSibling); // "<p>

Whereas using nextElementSibling you would get:

console.log(document.getElementById('start').nextElementSibling);// "<p>"

Also nextElementSibling is IE10+, being the newer method whereas nextSibling has full browser support

Answer 2

nextSibling will return the next node in the DOM, most probably in current web page scenarios, it is a whitespace but nextElementSibling will return only the next element ignoring all the nodes in between, if any.

With respect to the current page. The nextSibling to the question is a TextNode(Whitespace) but if I want to get the #answers I will use nextElementSibling