DOM: Whitespace Nodes

Whitespace characters in HTML source code between elements are considered a node too. (whitespace includes space, newline, tab) [see What is Node, Node Type, Element]

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

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 JavaScript/DOM: What is Node, Node Type, Element]

How to Skip Whitespace Nodes

You can check the Node Type and decide if you need to skip it.

Or use the following methods that ignore whitespace nodes.

• children
• nextElementSibling
• previousElementSibling
• firstElementChild
• lastElementChild
• parentElement

[see JavaScript: Get Element's Parent/Child/Sibling, Navigate DOM Tree]

Reference