The Document Object Model (DOM)

When a browser loads an HTML page, it doesn't just display the raw markup — it builds an in-memory tree structure called the Document Object Model (DOM). Every tag becomes a node in that tree, and JavaScript can read, modify, add, or remove those nodes at any time, which is what makes web pages interactive rather than static.

The DOM is not part of the JavaScript language itself; it's a browser-provided API. That's why DOM code only runs in a browser environment (not in Node.js by default) and why the global object you interact with is document, which represents the entire loaded page.

Why it matters

The DOM is the page as JavaScript sees it: a tree of objects that can be read and changed. Every interactive feature, from showing an error message to building a list from API data, comes down to selecting elements and modifying them. Frameworks do this for you, but they do it through the same DOM.

The DOM Tree

The DOM models a page as a hierarchy: document is the root, it contains the <html> element, which contains <head> and <body>, and so on down to individual text nodes. Each node has relationships you can traverse programmatically.

• parentElement / parentNode — the containing element.
• children — a live collection of child elements (ignores text nodes).
• childNodes — all child nodes, including text and comment nodes.
• nextElementSibling / previousElementSibling — adjacent elements at the same level.

Selecting Elements

Modern JavaScript almost always uses document.querySelector() and document.querySelectorAll() because they accept any CSS selector, which is far more flexible than the older getElementById or getElementsByClassName. querySelector returns the first match (or null), while querySelectorAll returns a static NodeList of every match.

• document.getElementById('id') — fastest, but only matches by id.
• document.querySelector('.card > h2') — first match for any CSS selector.
• document.querySelectorAll('li.active') — a NodeList you can loop with forEach.

Creating and Modifying Elements

You build new DOM content with document.createElement(), set its content or attributes, and attach it to the tree with methods like appendChild(), append(), or before()/after(). Existing elements are updated through properties like textContent (plain text, safe from HTML injection), innerHTML (parses a string as markup — use with caution on untrusted input), classList (add/remove/toggle CSS classes), and setAttribute()/getAttribute().

Examples

// HTML: <ul id="task-list"><li class="task">Buy milk</li></ul>

const list = document.querySelector('#task-list');
const firstItem = list.querySelector('.task');

firstItem.textContent = 'Buy milk and eggs';
firstItem.classList.add('done');

console.log(firstItem.outerHTML);

<li class="task done">Buy milk and eggs</li>

const list = document.querySelector('#task-list');

const newItem = document.createElement('li');
newItem.textContent = 'Walk the dog';
newItem.classList.add('task');

list.appendChild(newItem);

console.log(list.children.length);

2

Exercise

Using the DOM, change the text of the heading to DOM practice, add the class highlight to the paragraph, and create a new paragraph containing Added by JavaScript and append it to main.

Expected result: the heading reads DOM practice, and a new paragraph appears at the bottom of the page.

// The page contains: <main> with an <h1>, a <p> and a <button>

// TODO: change the heading text

// TODO: add the class "highlight" to the existing paragraph

// TODO: create a paragraph with the text "Added by JavaScript" and append it to main

// The page contains: <main> with an <h1>, a <p> and a <button>

document.querySelector("h1").textContent = "DOM practice";

document.querySelector("p").classList.add("highlight");

const paragraph = document.createElement("p");
paragraph.textContent = "Added by JavaScript";
document.querySelector("main").append(paragraph);

Quick quiz

Interview questions