What is the difference between node.nextSibling and ChildNode.nextElementSibling?

by

nextElementSibling always returns an element. nextSibling can return any kind of node. They are the same for your example, but different in other cases, e.g.:

<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>

In this case, document.getElementById('span-01').nextElementSibling is span-02, but document.getElementById('span-01').nextSibling is the text node containing “Some text at the top level” (or, as pointed out by @Manngo in the comments, the whitespace that separates that text from the element above — it seems some browsers put whitespace between elements and non-whitespace nodes into separate nodes, while others combine it with the rest of the text).

More Related Contents:

  1. How to swap DOM child nodes in JavaScript?
  2. Parse an HTML string with JS
  3. For loop for HTMLCollection elements
  4. jQuery document.createElement equivalent?
  5. Browser detection versus feature detection
  6. When should I use jQuery’s document.ready function?
  7. How can I count text lines inside an DOM element? Can I?
  8. Difference between HTMLCollection, NodeLists, and arrays of objects
  9. querySelector, wildcard element match?
  10. Copy / Put text on the clipboard with FireFox, Safari and Chrome
  11. How to serialize DOM node to JSON even if there are circular references?
  12. Most efficient method of detecting/monitoring DOM changes?
  13. Dynamically creating HTML elements using Javascript?
  14. What’s standard behavior when element is clicked? Will it submit the form?
  15. Add SVG element to existing SVG using DOM
  16. How to access DOM elements in electron?
  17. Trigger CSS transition on appended element
  18. Difference between .tagName and .nodeName
  19. How to retrieve the element where a contextmenu has been executed
  20. Removing HTMLCollection elements from the DOM
  21. HTML Table with vertical rows
  22. link element onload
  23. Is it the last `script` element the currently running script?
  24. Is there a difference between `new Image()` and `document.createElement(‘img’)`?
  25. Storing a variable in the JavaScript ‘window’ object is a proper way to use that object?
  26. Retrieving value from with multiple option in React
  27. JavaScript: get the current executing node? [duplicate]
  28. How do I find the DOM node that is at a given (X,Y) position? (Hit test)
  29. Dynamically generated table – using an array to fill in TD values
  30. Why is iframe.contentWindow == null?

Leave a Comment