DOM: Whitespace Nodes

What is Whitespace Node

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〕

Example of Whitespace Node

For example, if you have:

<ul id="x1">
<li>A</li>
<li>B</li>
</ul>

The newline character between tags, are whitespace nodes.

If you count the number of the ul's children nodes, you get 5.

document.getElementById("x1").childNodes.length;

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;

console.log(xx.nodeType);
// 3 means text node (whitespace node)

console.log(xx.nodeValue);
// if whitespace node, then result is space or newline or tab, etc.

〔see JS: 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 JS: Get Element Parent, Child, Sibling〕

Reference