Why DOM Suck

By Xah Lee. Date: . Last updated: .

DOM is really really weird.

whenever there's a weird tech, there's 2 possibilities. ① you don't understand it. ② it is badly designed.

in my experience of weird tech, Linden Scripting Lang, AutoHotkey, after years, realized the problem isn't me, it's it. Oh, count unix in.

DOM is weird in all sorts of ways, not just 1 way. Here's a incomplete list of the problems.

Nesting and Code Sequence Order Mismatch

Here's typical code of JavaScript and DOM, for creating a SVG graphics of a rectangle and text.

// create svg element
const svg1 = document .createElementNS("http://www.w3.org/2000/svg", "svg");
svg1. setAttribute ("width", "100" );
svg1. setAttribute ("height", "100" );

// create a shape
const cir1 = document .createElementNS("http://www.w3.org/2000/svg", "circle");
cir1.setAttribute("cx", 0 );
cir1.setAttribute("cy", 0 );
cir1.setAttribute("r", 50);

// attach the shape to svg
svg1 . appendChild ( cir1 );

// attach the svg to a element on page
document .getElementById ('x77738'). appendChild ( svg1 );

There are 2 major problems:

Notice the long url string in document.createElementNS("http://www.w3.org/2000/svg", "svg"). What were they thinking?

insert into tree

Suppose you have a tree, and you want to append a child.

So, you do this:

node.appendChild(new_node)

However, if the new_node you are appending is a element that exist in the document, that node will be removed. So, it's rather like “removeThenAppend()”.

Now, suppose you want to remove all children. Simple, you might think node.removeAllChildren() will do. However, there's no such function. You have to do a loop to remove each child.

while (node.firstChild) { node.removeChild(node.firstChild); }

alternatively, you use this invented by Microsoft:

node.innerHTML = '';

Note that, although this is quite convenient, but is odd, because it is inconsistent with the manipulating tree paradigm.

And strange thing is, this version is slower than the loop to keep removing child.

Insert Before

let's say you want to insert a node. You think:

insertBefore(new_node, existing_node)

or in OOP's style of notation:

existing_node.insertBefore(new_node)

but the actual API is:

parent_of_existing_node.insertBefore(new_node, existing_node)

Note that, you actually have to get the parent of existing node to use it.

So, the actual code is:

existing_node.parentNode.insertBefore(new_node, existing_node)

For a API that manipulate trees, you'd think there's insertAfter() too. But not!

2018-04-10 Note, this problem has been fixed. [DOM: .insertAdjacentElement]

Live Object

It's strange that some DOM function returns a live object.

For example, document.getElementsByClassName() returns a live NodeList or HTMLCollection.

Live object means, the result is some kinda reference to the thing, not a copy.

However, not all DOM methods that retrieve elements are live. Some returns a “copy”.

Live object is strange to work with. For example, if you try to go thru the list by a loop checking for length, and add items, it'll be a infinite loop. Because, when you add item, the length also increases.

[see DOM: What Does Live Object Mean?]

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

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

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog