The DOM Explained

Atul Kabra3 min readUpdated 30 May 2026

The DOM (Document Object Model) is the browser's live, in-memory representation of a web page. When the browser loads your HTML, it builds a tree of objects — one for every element, attribute, and piece of text. JavaScript can then read and change that tree, and the page updates instantly. The DOM is the bridge between your code and what the user actually sees.

HTML becomes a tree

Consider this HTML:

<body>
  <h1 id="title">Welcome</h1>
  <p class="intro">Learn web development with us.</p>
</body>

The browser turns it into a tree of nodes: body is a parent, with h1 and p as children, each holding text. This tree is the DOM. It is not the HTML file on disk — it is a living model the browser keeps in memory and lets JavaScript manipulate.

Finding elements

Before you can change something, you have to select it. The two most useful methods are querySelector (the first match) and querySelectorAll (all matches). They use the same selectors you already know from CSS:

// Select by id (the # mirrors CSS)
const title = document.querySelector("#title");

// Select by class (the . mirrors CSS)
const intro = document.querySelector(".intro");

// Select every <li> on the page
const items = document.querySelectorAll("li");

Changing content and style

Once you hold a reference to an element, you can read or change it:

const title = document.querySelector("#title");

// Change the text inside the element
title.textContent = "Welcome back!";

// Change its style
title.style.color = "navy";

// Add or remove a CSS class (the clean way to change appearance)
title.classList.add("highlight");

Using classList.add to toggle a CSS class is preferred over setting many inline styles — it keeps your styling in CSS where it belongs.

Want to learn this properly?

Join the waitlist for our courses — beginner-friendly, project-first classes in Jalgaon.

Browse courses

Creating and removing elements

The DOM lets you build new content from scratch:

// Create a new list item
const li = document.createElement("li");
li.textContent = "New course added";

// Find the list and attach the new item to it
const list = document.querySelector("#course-list");
list.appendChild(li);

This is the core of dynamic pages: respond to something, then add, change, or remove DOM nodes so the user sees the result without a full page reload.

The DOM and modern frameworks

When you use a library like React, you rarely touch the DOM directly — the library updates it for you efficiently. But understanding the DOM is still essential, because it is what those tools are managing underneath. We touch on this in What is React?. To make the page respond to user actions, you combine DOM selection with JavaScript events.

Common mistakes

Running scripts before the page exists. If your script runs in the <head> before the body is parsed, querySelector finds nothing. Place scripts at the end of <body> or use the defer attribute.
Confusing the DOM with the HTML file. The HTML is the starting blueprint; the DOM is the live, changeable model the browser builds from it.
Using innerHTML with untrusted input. Inserting user-supplied text as HTML can open security holes. Use textContent for plain text.
Forgetting that querySelectorAll returns a list. You must loop over the result to act on each element; you can't style them all at once with a single property assignment.

FAQ

Is the DOM part of JavaScript? No. The DOM is provided by the browser as an interface (an API). JavaScript is the language that talks to it. Other languages could, in principle, use a DOM too.

Why does my element come back as null? Almost always because the script ran before the element existed in the page. Defer the script or move it to the end of the body.

Keep learning

Hub: Web Fundamentals
Related: JavaScript Basics for Beginners
Next: JavaScript Events Explained
See also: What is React?

Want to build for the web? Explore our courses in Jalgaon.