What is the DOM?

Understand what the Document Object Model (DOM) is, how the browser builds a tree structure from HTML, and how JavaScript uses that tree to read and change a page.

So far, JavaScript has manipulated only data that lives in variables. The DOM is the bridge that lets JavaScript reach into the actual web page — reading what's on screen and changing it live, without reloading — which is the foundation of every interactive website.

The DOM as a live representation of HTML

When a browser loads an HTML document, it doesn't just display the text — it parses the markup and builds an in-memory tree structure called the Document Object Model, where every HTML element becomes a node (an object) in that tree. This tree is what you actually see rendered on screen, and it's what JavaScript interacts with.

Crucially, the DOM is a live, dynamic representation — it is not a static copy of the original HTML source. If JavaScript changes the DOM, the browser immediately re-renders the affected part of the page. The HTML file you wrote is just the initial blueprint used to construct this tree once, at load time.

The tree structure

The DOM is organized as a tree because HTML is naturally nested: elements contain other elements, which contain other elements, and so on. At the very top sits the document object, representing the whole page. Below it is the <html> element, which branches into <head> and <body>, and each of those branches further into the tags you wrote.

Family tree vocabulary is used to describe relationships in this structure: a <body>'s direct contents are its children, <body> is their parent, elements with the same parent are siblings, and any element reachable by following parent/child links downward is a descendant.

• document — the root object representing the entire page • Parent — an element that directly contains another element • Child — an element directly contained within another element • Sibling — elements that share the same direct parent • Descendant — any element nested anywhere inside another, at any depth

Why this matters for JavaScript

Because the DOM is just a tree of JavaScript objects, ordinary JavaScript code can walk it, search it, read properties off of it, and modify it — that's the entire mechanism behind dynamic web pages. Clicking a button, submitting a form, or watching a live chat update on screen all work by JavaScript locating a node in this tree and changing something about it (its text, its attributes, its children, or its styling).

The DOM API (the set of properties and methods available on these node objects) is provided by the browser environment, not by the JavaScript language itself — this is why DOM code only runs in a browser (or a browser-like environment) and not in plain Node.js without extra libraries.

The DOM vs. HTML source, and vs. CSSOM

It's worth being precise: the DOM is not the same thing as the HTML file. The HTML file is text on disk; the DOM is the object tree the browser builds from parsing that text (and can look quite different after JavaScript has modified it, or after the browser has fixed up malformed markup). Viewing 'page source' shows the original HTML; the browser's DevTools 'Elements' panel shows the live DOM, which may have changed.

The browser also builds a parallel tree for CSS rules called the CSSOM (CSS Object Model). The two are combined to figure out exactly what to paint on screen, but for JavaScript purposes, the DOM — the structural tree of elements — is what you'll spend the vast majority of your time working with.

Code Examples

Demonstrates that document is a real, inspectable JavaScript object available automatically in the browser, representing the whole loaded page. document.body and document.title are shortcuts to specific well-known parts of the tree. Expected result: Logs the entire document object, the <body> element, and the page's <title> text in the console (exact output depends on DevTools formatting).

document is a global object the browser provides — it exists automatically in any script running on a web page, with no import needed.

Uses relationship properties to walk the tree from a selected element: parentElement moves up, nextElementSibling moves sideways, and children counts direct child nodes. Expected result: <body>...</body> <p>...</p> (or whatever element follows the h1) 3 (assuming body has h1, p, and button as direct children) Notice this mirrors the family-tree vocabulary from the lesson: parentElement, nextElementSibling, and children are literally named after those relationships.

heading.parentElement walks up one level in the tree, from the h1 node to its containing body node.

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

const heading = document.querySelector("h1");
console.log(heading.parentElement);       // body
console.log(heading.nextElementSibling);  // the element right after h1
console.log(document.body.children.length);

A simple page as a DOM tree

The document sits at the root. html has two children, head and body. body itself has three children: h1, p, and button — each one a node JavaScript can select and manipulate individually.

Document
   │
   └── html
       ├── head
       └── body
           ├── h1
           ├── p
           └── button

Important Rules

The DOM is a live, in-memory tree of objects the browser builds from HTML — not the HTML text itself.

document is the root of the tree and the entry point for nearly all JavaScript-DOM interaction.

Changing the DOM with JavaScript immediately updates what the user sees, with no page reload.

DOM relationships (parent, child, sibling, descendant) mirror the nesting structure of the original HTML.

Where this shows up

Every single-page application (React, Vue, plain JavaScript apps) works by continuously updating the DOM in response to user actions and data changes. A live chat app appends new message nodes to the DOM as they arrive; a to-do list app adds and removes list-item nodes as tasks are added and completed — all without ever reloading the page.

Assuming 'view page source' always matches what document currently contains.

Use the browser DevTools 'Elements' panel to inspect the live DOM, which reflects any JavaScript changes.

'View page source' shows the original HTML exactly as it was downloaded, while the DOM (visible in DevTools' Elements panel) reflects the current, possibly JavaScript-modified state of the page — these can diverge significantly on a dynamic page.

[True / False] The DOM is exactly the same thing as the raw HTML file the browser downloaded. A. True B. False

B. False — False. The DOM is a live, in-memory tree of objects the browser constructs by parsing the HTML. JavaScript can change the DOM after load, so the two can diverge — the HTML file never changes, but the rendered DOM can.

[Multiple Choice] In the DOM tree, what is the relationship between <head> and <html>? A. <head> is the parent of <html> B. <head> is a child of <html> C. <head> and <html> are siblings D. There is no direct relationship

B. <head> is a child of <html> — <head> is nested directly inside <html> in the source markup, so in the DOM tree it becomes a direct child of the <html> node (as does <body>).

Open any web page in your browser's DevTools console and run document.body.children.length. Then run document.querySelectorAll("*").length. What's the difference between what these two expressions count?

document.body.children.length counts only the direct child elements of <body> (one level deep). document.querySelectorAll("*").length counts every single element in the entire document, at every depth — it will almost always be a much larger number.

children only counts direct children of body; querySelectorAll("*") matches every element anywhere in the whole document.