The DOM, short for Document Object Model, is the browser's live representation of a web page. When the browser loads an HTML file, it parses every tag and piece of content into a tree of objects. JavaScript can then read those objects, change them, add new ones, and remove existing ones.

Think of it as a bridge. HTML is the static blueprint written once. The DOM is the live, programmable version that lives in browser memory.

JavaScript makes changes to the DOM, and the browser keeps the screen in sync with what is there at any moment.

Here is the simplest possible demonstration: one line of JavaScript that finds a heading and changes its text:

javascript

document.querySelector("h1").textContent = "Welcome to My Page";

Run that line and the main heading changes instantly. No page reload, no new HTML file fetched from a server. The DOM updated and the browser repainted just the affected part of the screen.

This is the core idea behind every interactive website feature.

How the Browser Builds the DOM

When you visit a web page, the browser does not just display raw HTML text on screen. It goes through a step-by-step process to turn bytes into a structured tree of objects that code can work with.

Browser builds DOM from HTML

The diagram shows the parsing pipeline. First the browser reads raw bytes from the network or disk. It converts those bytes into characters, then groups characters into tokens, things like "opening paragraph tag" or "text content between tags."

Those tokens become nodes, which are assembled into a tree. The top of that tree is always the document object. Below it sits the html element, which splits into head and body, and the tree branches down from there.

Here is a small HTML page to see what this tree looks like in practice:

html

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>Welcome to my site.</p>
  </body>
</html>

And here is the tree the browser builds from it:

DOM tree for a simple HTML page

Every element, every piece of text, and every attribute becomes a node in this tree. The document object sits above the html element and acts as the starting point for every operation you will write.

Notice how the title lives under head while h1 and p live under body. This mirroring of the HTML nesting is what makes the tree predictable to work with.

The document Object: Your Starting Point

Every interaction with the DOM begins at the built-in document object. It is always available in the browser, no imports or setup needed. The document represents the entire page and gives you methods to find elements, create new ones, and react to user actions.

javascript

console.log(document.title);
console.log(document.body);
console.log(document.head);

These three properties are shortcuts for the parts of the page you access most. The title property returns the page title as a string. The body and head properties give you direct references to those elements so you can immediately work with their children and content.

From the document, you can navigate down to any element in the tree. The document also exposes all the selection methods you will use constantly: getElementById for finding elements with a known ID, and querySelector for finding elements with CSS selectors.

Every DOM journey starts with something like document.querySelector and then travels from the returned element to its children, siblings, or parent.

What the DOM Lets You Do

The DOM gives you five categories of operations. Together they cover every interactive feature on the web:

Operation	What it means	Example method
Read	Find elements and read their content	querySelector, getElementById
Change	Modify text, attributes, or styles	textContent, setAttribute, style
Add	Insert new elements into the page	createElement, appendChild
Remove	Delete elements from the page	remove, removeChild
React	Respond to user actions	addEventListener

A dropdown menu uses all five categories. It reads the current state of the panel and changes a CSS class to show or hide it. If the menu items come from a server, it adds new elements to the page.

When the user clicks outside, it removes the open state. And it reacts to click events on the toggle button and on each menu item.

Learning these five operations means you can build any interactive UI component. The rest of DOM programming is about knowing which method to call for each task.

A Complete Example: Button Click Changes the Page

Here is a small but complete example that reads two elements, reacts to a click, and changes both content and style:

javascript

const button = document.querySelector("#greet-btn");
const message = document.querySelector("#message");
 
button.addEventListener("click", () => {
  message.textContent = "Hello, DOM!";
  message.style.color = "green";
});

This code finds a button and a message area by their IDs. It tells the browser to run a function on click. Inside that function, it changes the message text and color.

The result is immediate. The user clicks, the text updates, and nothing else flickers. This pattern, select, listen, change, is the foundation of every interactive web page.

The DOM Is Not the Same as Your HTML File

A common misconception is that the DOM is just a copy of the HTML source. It is not. The DOM is a live structure that can, and often does, diverge from the original HTML file.

html

<ul id="list">
  <li>Item one</li>
</ul>

That is the static HTML you wrote. When you view the page source, this is all you see, one list item inside an unordered list with the ID "list." Now JavaScript adds a second item to that same list:

javascript

const list = document.querySelector("#list");
const newItem = document.createElement("li");
newItem.textContent = "Item two (added by JavaScript)";
list.appendChild(newItem);

After this code runs, the page shows two list items. But if you right-click and choose View Page Source, you will still see only the one original item.

The Elements panel in DevTools shows two items because it displays the live DOM, not the static source. This is why View Source and the Elements panel often look different: the DOM changed, but the HTML file on the server did not.

Every JavaScript framework you will encounter, React, Vue, Svelte, Angular, works through the DOM. They add their own layers on top, but underneath they are calling the same methods to read elements and change what the user sees. Learning the DOM directly means you understand what frameworks are actually doing and you can debug rendering issues by inspecting the real tree in DevTools.

Where to Go Next

Now that you understand what the DOM is, the next step is to learn how the DOM tree is structured with parent, child, and sibling relationships. After that, explore how to select elements from the tree so you can start building real interactions.

Rune AI

Key Insights

The DOM is a live tree of objects the browser builds from your HTML.
The document object is your entry point for all DOM operations.
JavaScript can read, change, add, and remove DOM nodes at any time.
The DOM is a Web API, not part of the JavaScript language.
Understanding the DOM is required for any interactive page.

Frequently Asked Questions

Is the DOM part of JavaScript?

No. The DOM is a web API provided by the browser, not part of the JavaScript language itself. JavaScript uses the DOM API to interact with the page, but the DOM also exists in other languages through their own bindings.

Does the DOM exist without JavaScript?

Yes. The browser always builds a DOM from the HTML, even if no JavaScript runs. JavaScript can then access that already-existing DOM to make changes.

Is the DOM the same as HTML?

No. HTML is the static text you write. The DOM is the live, programmable object structure the browser builds from that HTML. JavaScript changes the DOM, not the original HTML file.

Conclusion

The DOM is the bridge between static HTML and interactive JavaScript. Every time your code changes text on a page, shows or hides an element, or responds to a user click, it is doing it through the DOM. Understanding that the DOM is a live object tree is the foundation for everything you will build with JavaScript in the browser.

What Is the DOM in JavaScript a Beginner Guide

How the Browser Builds the DOM

The document Object: Your Starting Point

What the DOM Lets You Do

A Complete Example: Button Click Changes the Page

The DOM Is Not the Same as Your HTML File

Where to Go Next

Rune AI

Frequently Asked Questions

Is the DOM part of JavaScript?

Does the DOM exist without JavaScript?

Is the DOM the same as HTML?

Conclusion

More in this topic

Using Decorators for Logging in JS Architecture

JavaScript While Loop Explained: A Complete Guide

JavaScript Loops Tutorial: for, while, do while