When is a Tree Not a Tree?
When it’s the DOM, and you’re a beginner.
Struggling to understand the DOM? It’s not your fault, you’re being taught wrong.
Calling the DOM a tree is accurate, once you are familiar with the DOM and trees, not the green leafy kind that you don’t see in the city, but the tree data structure. But trying to explain the DOM to beginners as a tree is foolish, and a colossal waste of time
You see, as a beginner, being told that the DOM is a tree makes no sense and there are many ways that calling the DOM a tree makes it actually harder to understand.
Here’s why.
An Upside Down Tree
It starts with being told that it’s really an upside down tree, with the trunk, as the document object, being the ‘top’ of the tree. Well, for most people, an upside down tree is not a thing, and let’s be thankful.
What’s a Node??
Then we’re told about nodes on the DOM tree, and that they are like the branches. honestly, as a beginner, nodes sounded to me like an ugly parasitic growth a tree was unfortunate to have. it didn’t sound like branches at all.
A Tree Within a Tree?
The last straw was when I was told that nodes contain other nodes. ok that’s enough, tree branches don’t live inside other tree branches, they branch off them, outside. I did however, find this curiosity on my google journey, a bar inside a tree. https://mymodernmet.com/sunland-big-baobab-tree-bar/
By the way, I recommend you don’t google ‘tree inside a tree’, some of the first results are horrifying.
Let’s Try Something Else
The Box Model
I think the DOM is best explained as a big rectangle. Inside this rectangle, we can put text, pictures, or crucially, more rectangles. Guess what we can put inside those rectangles, that’s right! Text, images and more rectangles.
Now, the rectangles themselves are invisible, but you can add margins and padding around the edges.
let’s build a simple webpage to illustrate.
here’s what our webpage looks like at first:
Nothing there? let’s add a border to the very first rectangle.
We actually added two borders, one around the HTML rectangle, and another around the body rectangle. Notice that I didn’t call them nodes, you’re welcome.
It’s All Rectangles.
Everything you add to your webpage is a rectangle. The header? Rectangle. Paragraphs? Rectangle. List? List item? Image? Span? Paragraph? Rectangle. Rectangle. Rectangle. Rectangle. Rectangle. Rectangle. Rectangle. Rectangle.
Take a look at what I’ve done to the web page now.
Nothing much to look at, just some snarky content like every other hastily conceived coding article on the internet.
but wait, what’s happening in this gif?
Cool, no? All I did was add some borders and margins to each rectangle and now you can clearly see each on clearly.
So Here’s My Point.
When you hear ‘DOM’, think rectangle with stuff in it. When you hear ‘node’, ‘element’ or ‘tag’, think rectangle with stuff in it.
you can add backgrounds to these rectangles, you can round their corners until they look like a circle. but deep down, they will always remain, rectangles within rectangles within rectangles within rectangles within rectangles within rectangles within rectangles within rectangles within rectangles within rectangles within rectangles within rectangles. And they have stuff (text, images, more rectangles 🤯, etc.) inside them.
