DOM: Whitespace Nodes
Whitespace characters in HTML source code between elements are considered a node too. (whitespace includes space, newline, tab)
For example, if you have:
<ul id="x1"> <li>A</li> <li>B</li> </ul>
And you count the number of the ul
's children nodes, you get 5.
document.getElementById("x1").childNodes.length // prints 5
because the newline characters in between tags are also considered nodes.
Here is another example, you can try in browser console:
// get the next node after the first paragraph let xx = document.getElementsByTagName("p")[0].nextSibling; xx.nodeType; // 3 means text node (whitespace node) xx.nodeValue; // if whitespace node, then result is space or newline or tab, etc.
[see DOM: Node Type, Node Name, Node Value]
How to Skip Whitespace Nodes
Use the following methods that skip the whitespace nodes.
children
nextElementSibling
previousElementSibling
firstElementChild
lastElementChild
parentElement
[see DOM: Navigate DOM Tree]
Reference
