The DOM (Document Object Model)

What is the DOM?

The DOM (Document Object Model) is a representation of your HTML page that JavaScript can read and modify. Think of it as a tree structure where each HTML element is a node that JavaScript can access and manipulate.

Smallest working example

Here’s a tiny example that selects an element and updates the page:

<h1 id="title">Hello</h1>

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

if (title) {
  title.textContent = "Hello from JavaScript";
}

When the browser loads an HTML page, it:

1. Parses the HTML
2. Creates the DOM tree
3. Makes it available to JavaScript via the document object

Why this matters

Most browser JavaScript is DOM work:

• Read what’s on the page (text, attributes, classes)
• Respond to user actions (clicks, input, forms)
• Update the page (show/hide, render lists, update text)
• Build UI dynamically (create/remove elements)

DOM tree mental model

The DOM represents your HTML as a tree of nodes:

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>World</p>
  </body>
</html>

This HTML becomes a DOM tree:

document
  └── html
      ├── head
      │   └── title
      │       └── "My Page"
      └── body
          ├── h1
          │   └── "Hello"
          └── p
              └── "World"

Each box in this tree is a node, and JavaScript can:

• Navigate the tree (parent, child, sibling relationships)
• Read node properties
• Modify nodes
• Add new nodes
• Remove nodes

Nodes vs elements

Understanding the difference between nodes and elements helps you work with the DOM effectively.

Nodes

A node is any object in the DOM tree. There are different types of nodes:

• Element nodes — HTML elements (<div>, <p>, <button>, etc.)
• Text nodes — text content inside elements
• Comment nodes — HTML comments
• Document nodes — the document itself
• Attribute nodes — attributes on elements (less commonly used in modern code)

Elements

An element is a specific type of node—an HTML element. Elements are what you usually work with:

// This is an element node
const button = document.querySelector("button");

// Elements have properties like tagName
if (button) {
  console.log(button.tagName); // "BUTTON"
}

In practice: When you work with the DOM, you're usually working with element nodes (just called "elements"), but occasionally you'll encounter text nodes and other node types.

Live vs static collections

When you select multiple elements, you get a collection. There are two types:

Live collections

Live collections update automatically when the DOM changes:

// getElementsByClassName returns a live collection
const itemDivs = document.getElementsByClassName("item");
console.log(itemDivs.length); // 3

// Add a new div with class 'item'
const newDiv = document.createElement("div");
newDiv.className = "item";
document.body.appendChild(newDiv);

console.log(itemDivs.length); // 4 (automatically updated!)

Live collections reflect the current state of the DOM.

Static collections

Static collections don't update when the DOM changes:

// querySelectorAll returns a static collection
const itemDivsSnapshot = document.querySelectorAll(".item");
console.log(itemDivsSnapshot.length); // 3

// Add a new div with class 'item'
const newDiv = document.createElement("div");
newDiv.className = "item";
document.body.appendChild(newDiv);

console.log(itemDivsSnapshot.length); // Still 3 (snapshot at time of query)

Static collections are snapshots taken at the time of the query.

Which to use?

• Live collections (getElementsByClassName, getElementsByTagName) — useful when the DOM changes frequently
• Static collections (querySelectorAll) — preferred for most cases, easier to reason about

Recommendation: Use querySelectorAll (static) for most cases. It's more predictable and easier to work with.

Accessing the DOM

The document object is your entry point:

// document represents the entire HTML page
document.body; // The <body> element
document.head; // The <head> element
document.title; // The page title
document.URL; // The page URL

tip

querySelector() returns null if nothing matches. Get in the habit of checking before you use the element.

Parent-child relationships

You can navigate the DOM tree:

const element = document.querySelector("p");

if (element) {
  element.parentElement; // Parent element
  element.children; // Child elements
  element.firstElementChild; // First child element
  element.lastElementChild; // Last child element
  element.nextElementSibling; // Next sibling
  element.previousElementSibling; // Previous sibling
}

Example: Navigating the tree

<div id="parent">
  <p>First paragraph</p>
  <p>Second paragraph</p>
</div>

const firstP = document.querySelector("#parent p");

if (firstP && firstP.parentElement && firstP.nextElementSibling) {
  console.log(firstP.parentElement.id); // "parent"
  console.log(firstP.nextElementSibling.textContent); // "Second paragraph"
}

The DOM is dynamic

One of the most important things to understand: the DOM is live. Changes you make with JavaScript are immediately reflected in what users see:

const heading = document.querySelector("h1");

if (heading) {
  heading.textContent = "New heading"; // Page updates immediately!
}

This is what makes JavaScript powerful for building interactive web pages.

DOM methods overview

The DOM provides many methods (we'll cover them in detail in upcoming guides):

• Selecting elements — getElementById, querySelector, etc.
• Creating elements — createElement
• Modifying elements — textContent, innerHTML, setAttribute
• Adding/removing — appendChild, removeChild, insertBefore
• Classes — classList.add, classList.remove, classList.toggle

Common DOM properties

Elements have many properties:

const element = document.querySelector("div");

if (element) {
  element.id; // Element's ID
  element.className; // Element's class attribute
  element.tagName; // Tag name (e.g., "DIV")
  element.textContent; // Text content
  element.innerHTML; // HTML content
  element.style; // Inline styles
  element.dataset; // Data attributes
}

We'll explore these in detail in the manipulating the DOM guide.

Performance considerations

The DOM is powerful but can be slow if overused:

Minimize DOM queries

// Bad: querying DOM multiple times
for (let i = 0; i < 1000; i++) {
  const element = document.querySelector(".item"); // Queries DOM 1000 times!
  if (element) {
    element.textContent = `${i}`;
  }
}

// Good: query once, reuse
const element = document.querySelector(".item");
if (element) {
  for (let i = 0; i < 1000; i++) {
    element.textContent = `${i}`;
  }
}

Batch DOM updates

// Bad: updating DOM in loop
const list = document.querySelector("#list");
if (list) {
  for (let i = 0; i < 100; i++) {
    const item = document.createElement("li");
    item.textContent = `Item ${i}`;
    list.appendChild(item); // Many updates
  }
}

// Better: build fragment, add once
const list = document.querySelector("#list");
if (list) {
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 100; i++) {
    const item = document.createElement("li");
    item.textContent = `Item ${i}`;
    fragment.appendChild(item);
  }
  list.appendChild(fragment); // Single DOM update
}

We'll cover more performance tips in the performance guide.

Summary

• The DOM is the browser’s in-memory representation of your HTML.
• JavaScript uses the DOM (via document) to read and update the page.
• DOM work is usually event-driven: user actions and async updates change what’s on screen.

Next up

• Selecting elements
• Manipulating the DOM
• DOM events