Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Whats the difference between nextElementSibling vs nextSibling

Tags:

javascript

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

like image 944
grasesed Avatar asked Jun 28 '15 06:06

grasesed


2 Answers

'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

like image 158
sjm Avatar answered Nov 13 '22 01:11

sjm


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

enter image description here

enter image description here

like image 28
m4n0 Avatar answered Nov 13 '22 02:11

m4n0