Learning the DOM Tree with Simple Examples

When a browser opens an HTML page, it reads the markup and creates a structured model known as the DOM, or Document Object Model.

In the DOM, each HTML element is represented as a node, and some nodes can contain other nodes. This parent-child relationship is what allows both the browser and JavaScript to understand the page.

Why It Is Called a Tree

The DOM is called a tree because is organized in a tree-like structure. Thus it has branches. One element (primary-branch) can contain many child elements (sub-branches), and those children can contain more elements and so on. This structure helps the browser know where each node belongs.

It also helps developers target specific parts of the page. For example, JavaScript can find a heading, change its text, or add a new paragraph.

Example of how JavaScript finds the first h1 node and update its text. — Here, JavaScript finds the first h1 node and update its text.

A Simple HTML Example

Consider this HTML:

The browser reads it as a tree:

Drawing depicting the above HTML code as a DOM tree.

The html element is the root. The body is its child. The h1 and ul elements are children of body and so on. Text inside elements is represented too, usually as text nodes.

Why DOM is Important

The DOM serves as the link between your code and the visual elements users interact with. HTML lays out the structure, CSS adds the style, and JavaScript allows for reading and altering the content.

Common Beginner Mistake

A common mistake is thinking the HTML file and the DOM are always identical. They are related, but not always the same. JavaScript can change the DOM after the page loads. The original HTML may stay unchanged, while the live page looks different.

For example, JavaScript can add a new element that never existed in the original HTML.

JavaScript adds new li element is a an unordered list.

The original HTML has one list item:

Code example showing what the HTML element is.

But the live DOM now has two:

Code example showing what how the Live DOM is formed now.

Final Thought

The DOM tree is essentially the browser’s live representation of your webpage. Understanding it changes your perspective on HTML, making it feel less like just text and more like a well-structured framework.

This understanding helps explain how browsers interpret pages, how JavaScript interacts with elements, and how modern web interfaces respond to user actions.

Although my blog doesn’t support comments, feel free to reply via email or X.