DOM Fundamentals

Introduction

The browser takes your HTML and converts it into the DOM—a tree of JavaScript objects. Each HTML tag becomes an object with properties you can read and methods you can call.

Understanding the DOM means understanding that your HTML is not the same as what JavaScript sees. The browser parses HTML, fixes errors, and builds a live object structure that you can inspect and manipulate.

This lesson focuses on what the DOM is and how to work with DOM objects. The next lesson will focus on finding those objects efficiently.

Learning Objectives

By the end of this lesson, you'll be able to:

Understand the DOM as a tree of JavaScript objects
Know the difference between HTML source code and the live DOM
Access DOM objects via document and getElementById()
Read and change element properties with .textContent
Listen for user events with .addEventListener()
Inspect the live DOM in Developer Tools

What Is the DOM?

DOM = Document Object Model. It's the browser's internal representation of your HTML as JavaScript objects.

HTML is text. The browser reads it, parses it, builds a tree of objects.

Simple Example

Your HTML:

<div>
  <h1>Hello</h1>
  <p>Welcome to the DOM.</p>
</div>

The DOM (as JavaScript objects):

document.body = {
  tagName: "BODY",
  textContent: "Hello Welcome to the DOM.",
  children: [
    {
      tagName: "DIV",
      children: [
        { tagName: "H1", textContent: "Hello" },
        { tagName: "P", textContent: "Welcome to the DOM." },
      ],
    },
  ],
}

Each element is an object. Each object has:

Properties (data): textContent, className, id, children, etc.
Methods (actions): addEventListener(), appendChild(), querySelector(), etc.

Key Difference: HTML vs DOM

HTML source code:

<p>Hello</p>

DOM object for that element:

{
  tagName: "P",
  textContent: "Hello",
  className: "",
  id: "",
  // ... 50+ other properties and methods
}

The browser fixes your HTML before building the DOM. Missing tags are auto-closed. Errors are corrected. That's why the DOM might look different from your source HTML.

Put simply, JS loves objects, not HTML. The DOM is how the browser gives you access to those objects.

Accessing the DOM

The document object is your entry point to the DOM:

// Access the entire document
console.log(document);

// Access the body element
console.log(document.body);

// Access the root html element
console.log(document.documentElement);

// Find elements (we'll cover this deeply in the next lesson)
const title = document.getElementById("page-title");
const buttons = document.querySelectorAll("button");

document is a global property that represents your page's DOM. It's accessed through the browser's global window object (window.document), but for DOM work, you'll use document directly.

DOM Objects Have Properties and Methods

Every DOM element is a JavaScript object with properties (data) and methods (actions).

Reading and Writing `.textContent`

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

// Read the text
console.log(heading.textContent);  // "Hello"

// Write new text
heading.textContent = "New title";

.textContent is the most direct way to change what users see. It updates the page instantly—no refresh needed.

(There's also .innerText, which behaves similarly but returns only visible text. For now, stick with .textContent—it's the reliable choice.)

Listening with `.addEventListener()`

const button = document.querySelector("button");

// Listen for a click event
button.addEventListener("click", () => {
  console.log("Button was clicked!");
  button.textContent = "You clicked me!";
});

The name addEventListener is quite explicit. We are adding a listener for an event to some element. When the event happens, the function you provide runs by getting called back by the browser.

When the user clicks, your function runs. You can then update the page.

Common events:

click - user clicked
input - user typed in a form field
submit - user submitted a form
mouseenter / mouseleave - user hovered

Responding to User Interaction

Inspecting the Live DOM with Developer Tools

Viewing the Live DOM

Open any webpage
Press F12 to open Developer Tools
Click the Elements or Inspector tab

What you see is the live DOM—not your original HTML source code.

Key Difference: Source HTML vs Live DOM

Your original HTML file:

<div>
  <p>Hello world</p>
</div>

The browser's DOM (what you see in DevTools):

<html>
  <body>
    <div>
      <p>Hello world</p>
    </div>
  </body>
</html>

The browser auto-corrected your HTML by adding missing tags.

Testing DOM Changes in Real Time

Open any webpage, press F12, and try this in the Console:

// Get an element
const heading = document.querySelector("h1");

// Change its text
heading.textContent = "I changed this!";

// Add a class
heading.classList.add("text-red-500");

// Look at the Elements tab — you'll see your changes!

Refresh the page — changes disappear (they were only in the DOM, not saved to disk).

Summary: The DOM is Live

When you modify a DOM object, the browser immediately updates what the user sees. No refresh needed. This is the power of the DOM.

Practical Example: A Simple Counter

Note: At this point, you should switch over into the template repo provided for this lesson assignment. Remember to commit early and often as you work through the exercises.

Let's build something that demonstrates reading and listening:

HTML

<main>
  <h1 id="title">Click the button below</h1>
  <button id="counter-btn">Clicks: 0</button>
</main>

JavaScript

let clicks = 0;
const button = document.getElementById("counter-btn");

button.addEventListener("click", () => {
  clicks = clicks + 1;
  button.textContent = `Clicks: ${clicks}`;
});

What's Happening

We select the button element
We listen for clicks with addEventListener()
When clicked, we update the button's .textContent
The page updates instantly

That's the core of interactive web development: read elements, listen for events, update the page.

Looking Ahead

You now understand the DOM foundation: it's a tree of JavaScript objects, and you can read/write them and listen for events.

What's next: Selecting elements more powerfully with CSS selectors and .querySelector(). Then building more complex interactions, creating dynamic elements, and working with forms.

Key Takeaways

DOM ≠ HTML — The browser converts HTML to a tree of JavaScript objects
Every element is an object with properties and methods you can call
The DOM is live — Changes appear instantly on the page
.textContent and .addEventListener() are your core tools for reading and interacting
DevTools Inspector shows the live DOM — use it to inspect and test
You now understand the foundation of all interactive web development