What is the DOM? — JavaScript Tutorial

The DOM (Document Object Model) is the browser's in-memory representation of a web page — a tree of objects, one per HTML element, that JavaScript can read and change. It's not the HTML file itself; it's what the browser builds from that HTML, and it's what actually appears on screen.

From HTML to a tree of objects

Given this HTML:

<body>
  <h1>Hello</h1>
  <p>Welcome to the page.</p>
</body>

The browser parses it into a tree: document → body → h1 and p as siblings. Each of those becomes a node — a JavaScript object with properties and methods you can interact with.

console.log(document.body); // the <body> element, as an object

Why "the page" and "the HTML file" aren't the same thing

Once JavaScript changes the DOM, the browser re-renders to reflect it — but the original .html file on disk is untouched. Right-click → "View Page Source" shows the original HTML; the browser's DevTools "Elements" panel shows the live DOM, which can look completely different after JavaScript has run.

document.body.innerHTML = "<h1>Changed!</h1>";

That line rewrites what's on screen immediately, with no change to the underlying file — this is the foundation every interactive website is built on, from a simple form validation to a full framework like React.

The document object is the entry point

document represents the whole page and is where every DOM interaction starts:

document.title;              // the page's <title> text
document.URL;                  // the current page's URL
document.getElementById("app"); // find a specific element

Why it matters that it's a tree

Elements have parents, children, and siblings, and JavaScript can navigate between them directly:

const heading = document.querySelector("h1");
heading.parentElement;    // <body>
heading.nextElementSibling; // <p>

This tree structure is also exactly what makes events "bubble" upward through ancestors — a mechanism covered later in this section — and why frameworks describe UI as nested components: they mirror the DOM's own nested shape.

The next lesson gets hands-on: finding elements with querySelector and changing what's actually on the page.