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