The way the DOM works (which represents an HTML page in memory), text and tags such as <div> are both represented by "nodes" of different types organized in a tree structure so that, for example, text nodes become the "children" of element nodes.

A normalized DOM tree means that there are no empty text nodes or adjacent text nodes.

For example, consider the following piece of HTML: <strong>hello, world!</strong>. If the DOM is normalized, this is represented by an element node (the "strong" tag), and a single text node containing the text. But, if inside the element there are, say, 3 text nodes, one with the word "hello", the second containing ", world!", and the third empty, this is no longer "normalized". The Node object has a normalize() method that, as you might expect in that case, would convert this to the former example.

Final thoughts

I recently had a problem with some Javascript code that left the tree in a non-normalized way and, sadly, had to learn all of this to fix it. Why the DOM is ever allowed to be un-normalized is anyone's guess.

Previous on JavaScript
Mastodon Mastodon