DOM: Whitespace Nodes

By Xah Lee. Date: . Last updated: .

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's 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.

[see DOM: Navigate DOM Tree]

Reference

whitespace nodes 2019-05-26 d5bqv
whitespace nodes [https://developers.whatwg.org/introduction.html#a-quick-introduction-to-html]

DOM How-To


Web Scripting Overview


HTML Input


Web Scripting Examples


Web Scripting Misc


jQuery


node.js

Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials