LuisLlamas Logo
que-es-el-dom-javascript

What is the DOM? The Structural Tree of Your Web Page

  • 3 min
  • Beginner

The DOM (Document Object Model) is the tree of objects that represents an HTML page inside the browser.

In other words, it is the in-memory representation the browser creates after reading and interpreting your HTML.

This model allows languages like JavaScript to read, modify, add, or remove elements from the web page in real-time, interacting with the visual structure.

How the Browser Reads Your Code

When you write your <header>, your <h1>, and your paragraphs in the editor, in the end they are just plain text. However, the browser does not understand raw text; it understands computer objects.

When loading the page, the browser engine analyzes each line of your HTML code. For every tag it finds, it creates an equivalent object in its memory (a component) and establishes parent-child relationships between them.

The Node Tree

The result of this exhaustive reading process is a massive data structure in the form of an inverted tree.

At the absolute root is the global document object (which represents the entire page).

Hanging from it is the fundamental tag, <html>.

This in turn contains <head> and <body>.

And from <body> hang all your <p> paragraphs, <button> buttons, <img> images, etc.

Each of these individual pieces in the tree is technically known as a “node”. There are element nodes (the HTML tags themselves), text nodes (the words inside the tags), and even attribute nodes (the classes or IDs you assign to them).

Original HTML vs. Current DOM

The HTML you write in the file and the DOM the browser sees may not be exactly the same.

<ul>
    <li>HTML</li>
    <li>CSS</li>
</ul>
Copied!

That file is the starting point. But afterwards, JavaScript (and CSS) can add elements, delete nodes, or change classes.

document.querySelector('ul').innerHTML += '<li>JavaScript</li>';
Copied!

Why Do We Need the DOM?

If our only goal in life were to display text on a white background, raw HTML would be enough. The problem arises when we want our page to react to user actions to create a modern experience.

If you want a sliding sidebar menu to appear when you click a button, you need a real programming language that can find that hidden menu and change its CSS class to make it visible.

That is where the DOM comes in. It acts as a standard communication bridge, an API that exposes all page elements so that JavaScript can grab them, read their properties, and modify them at will.

Many people get confused, but the DOM is not part of the JavaScript language.

It is a feature and a tool provided by the web browser itself (Chrome, Firefox, Safari). JS simply uses the backdoors that the DOM opens for it to manipulate the interface.

The Element Inspector

Surely at some point you have accidentally pressed F12 on your keyboard and a side panel full of code has opened up.

That development tool is the Element Inspector. And a crucial detail is that the “Elements” tab it shows is not exactly your original static HTML code, but the live, current visual representation of the DOM tree.

Changes Are Local

When we manipulate the DOM from JavaScript, we are normally only changing the page loaded in the user’s browser.

The .html file on the disk does not change. What changes is the representation the browser has in memory.

If you refresh the page, the browser will request the original HTML from the server again and rebuild the DOM from scratch.

On this page