What is the DOM?

For four modules you have worked entirely in the console — logging values, running functions, manipulating data in memory. Starting now, that work reaches the page. To understand how, you need to understand the DOM.

The Document Object Model

When a browser loads an HTML file, it does not just display the text. It parses the HTML and builds a tree of objects in memory. That tree is the Document Object Model — the DOM.

The DOM is not the HTML file. It is a live, in-memory representation of the page that JavaScript can read and change. When you alter the DOM, the page updates instantly in the browser — but the HTML file on disk is unchanged.

The DOM tree

Every HTML element becomes a node in the tree. Nodes have relationships:

Parent: the element that contains this one
Children: elements directly inside this one
Siblings: elements at the same level, sharing the same parent

<body>
  <header>
    <h1>Summit Trail Outfitters</h1>
  </header>
  <main>
    <section class="tours">...</section>
  </main>
</body>

The tree for this snippet:

body is the root
header and main are children of body, siblings of each other
h1 is a child of header
section.tours is a child of main

Every element, text node, and comment in your HTML becomes a node in this tree.

The document object

document is the JavaScript entry point to the DOM. It represents the entire page and is always available in the browser:

console.log(document.title);  // 'Summit Trail Outfitters'
console.log(document.body);   // the <body> element
console.log(document.URL);    // the page's URL

Every DOM operation you perform starts with document — selecting elements, creating new ones, navigating the tree.

DOM vs HTML

This distinction matters:

HTML file	DOM
Text on disk	Objects in memory
Static — only changes when you edit and save the file	Live — JavaScript changes it instantly
What the server sends	What the browser builds from it

When you see a change on the page after JavaScript runs, you are seeing a DOM change — not a file change. Reload the page and the DOM is rebuilt from the HTML file, discarding any JavaScript-driven changes.

Why this matters

Because the DOM is a tree of objects, JavaScript can:

Read any element’s text, attributes, and current styles
Change content, classes, and attributes on the fly
Create new elements and insert them anywhere in the tree
Delete elements entirely
Respond to user actions (clicks, keyboard input, form submission)

This is what makes interactive web pages possible. Every feature in Modules 06 and 07 — the mobile nav toggle, the tour filter, the contact form validator — is DOM manipulation responding to user events.

Exercise

Open the STO site in Chrome with DevTools open.

In the Console, run document.title — it returns the page title string.
Run document.body — it returns the <body> element. Click the arrow to expand it.
Switch to the Elements panel. You are looking at the live DOM tree. Click any element and watch it highlight on the page.
Back in the Console, run document.querySelector('h1') — it returns the first <h1> on the page. You will learn exactly how this works in the next lesson.
Notice: when you expand document.body in the console, you see the same structure visible in the Elements panel. That is the DOM tree.

Recap

The DOM (Document Object Model) is a live, in-memory tree of objects built from your HTML. It is not the HTML file.
Every HTML element becomes a node in the tree with parent, child, and sibling relationships.
document is the JavaScript entry point to the DOM — always available in the browser.
Changing the DOM changes the page instantly in the browser, but does not modify the HTML file on disk.
JavaScript can read, change, create, and delete DOM nodes — this is the basis of all interactive web functionality.