Understanding the Document Object Model (DOM)

You click a button, and the page changes instantly. A menu opens, a message appears, a to-do list grows. The page never reloads. How does that work?

The answer is the DOM. It is the reason websites feel alive instead of like printed paper. In this guide you will see what the DOM is, look at its tree structure, and then change a real page with code, step by step. There is even a live playground where you can break things safely.

What Is the DOM?

DOM stands for Document Object Model. When your browser loads a web page, it reads the HTML and builds a live model of the page in memory. That model is the DOM. It treats every part of the page (headings, paragraphs, images, buttons, even the text) as an object that JavaScript can find and change.

Think of it like this: HTML is the blueprint, and the DOM is the actual building. You can walk into the building and move furniture around. The blueprint on paper stays the same.

The DOM Tree

The DOM is organized as a tree, like a family tree. Everything starts from one root, and each item can have children. Here is a tiny HTML page:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1 id="title">Hello</h1>
    <p class="intro">Welcome to <b>DOM</b>.</p>
    <ul>
      <li>One</li>
      <li>Two</li>
    </ul>
  </body>
</html>

And this is the DOM tree your browser builds from it:

The DOM tree for the page above. Even plain text becomes its own node.

Family words you will hear a lot

Types of nodes

The DOM Playground

This is a real mini web page. Click the buttons and watch two things: the page on the left changes, and the DOM tree on the right updates live. The code that just ran is shown below.

// Click a button above to run some DOM code

Step 1: Select Elements

Before you can change something, you have to find it. JavaScript gives you a few ways to select elements. The modern, flexible one is querySelector, which uses the same selectors as CSS.

// Find one element by its id
const title = document.getElementById('title');

// Find the FIRST element that matches a CSS selector
const intro = document.querySelector('.intro');

// Find ALL elements that match
const items = document.querySelectorAll('ul li');

console.log(title.textContent);   // "Hello"
console.log(items.length);        // 2

Step 2: Change Text, Styles and Attributes

Once you have an element, you can change almost anything about it. Here is the code on the left and the result on the right:

const h = document.querySelector('#title');

// change the text
h.textContent = 'Hello, DOM!';

// change the style
h.style.color = '#2563eb';

// change an attribute
h.setAttribute('title', 'Hi!');

// add / remove a CSS class
h.classList.add('big');

Step 3: Create, Add and Remove Elements

You can also build new parts of the page from scratch. This is how to add a new item to the list:

const list = document.querySelector('ul');

// 1. create a new element
const li = document.createElement('li');

// 2. give it some content
li.textContent = 'Three';

// 3. put it into the page
list.append(li);          // adds at the end
// list.prepend(li);     adds at the start

// remove an element
list.firstElementChild.remove();

Every time you run this, the tree gets a new <li> node, exactly like in the playground above.

Step 4: Move Around the Tree (Traversal)

Because the DOM is a tree, every element knows its relatives. Starting from one element, you can walk to its parent, children and siblings:

const ul = document.querySelector('ul');

ul.parentElement;          // <body>
ul.children;               // all the <li> elements
ul.firstElementChild;      // the first <li> ("One")
ul.lastElementChild;       // the last <li> ("Two")
ul.previousElementSibling; // the <p> just before the list
ul.nextElementSibling;     // null, nothing comes after

Step 5: React to Users with Events

Events are how the page listens to the user: clicks, key presses, typing, form submits, mouse movement. You attach an event listener to an element, and a function runs whenever the event happens.

const button = document.querySelector('#myButton');

button.addEventListener('click', () => {
  alert('Button clicked!');
});

// Listen to typing in an input box
const input = document.querySelector('#nameInput');

input.addEventListener('input', (event) => {
  console.log(event.target.value);   // what the user typed so far
});

Mini Project: A To-Do List in 30 Lines

Let’s combine selecting, creating, adding and events into one working app. Copy it, save it as index.html, and open it in your browser. Type a task, press Add, and click a task to cross it off.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DOM To-Do</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 420px; margin: 40px auto; padding: 0 16px; }
    li { cursor: pointer; padding: 6px 0; }
    li.done { text-decoration: line-through; color: #888; }
  </style>
</head>
<body>
  <h1>My To-Do List</h1>
  <input id="taskInput" placeholder="Add a task">
  <button id="addBtn">Add</button>
  <ul id="taskList"></ul>

  <script>
    const input = document.querySelector('#taskInput');
    const list  = document.querySelector('#taskList');

    document.querySelector('#addBtn').addEventListener('click', () => {
      const text = input.value.trim();
      if (text === '') return;

      const li = document.createElement('li');
      li.textContent = text;
      li.addEventListener('click', () => li.classList.toggle('done'));

      list.append(li);
      input.value = '';
      input.focus();
    });
  </script>
</body>
</html>

Watch the DOM Change in Your Browser

You can see (and even edit) the DOM of any website, including this one.

The Elements panel is the DOM tree in your browser (illustration). Click the arrows to expand and collapse branches.

Try typing this in the Console while on any page. The page changes instantly:

document.body.style.background = 'lightblue';

Why the DOM Matters in Web Development

Example: update the page with data from a server

This is how modern sites show new content without refreshing. It fetches data, then updates one element in the DOM. (The URL below is only a placeholder.)

async function loadQuote() {
  const response = await fetch('https://api.example.com/quote');
  const data = await response.json();

  document.querySelector('#quote').textContent = data.text;
}

document.querySelector('#newQuote').addEventListener('click', loadQuote);

Common Mistakes (and How to Fix Them)

A Simple Path to Learn the DOM

Common Questions

If this guide helped you, share it with a friend who is learning JavaScript. Thank you for reading!