Lesson 4: The DOM

Everything so far has run only in the console. This lesson is where JavaScript starts touching the actual page — selecting elements, changing their text, and updating styles live, without reloading anything.

What the DOM actually is

DOM stands for Document Object Model — it's the browser's live, in-memory representation of your HTML page. When JavaScript "selects an element," it's grabbing a piece of this model, and any change you make updates what the user sees instantly.

Selecting elements

// the modern, most flexible way — works with any CSS selector
const title = document.querySelector("h1");
const allCards = document.querySelectorAll(".card");

// older, still common for a single element by ID
const header = document.getElementById("header");

querySelector grabs the first matching element. querySelectorAll grabs all of them, as a list you can loop through with .forEach() — exactly like the arrays from Lesson 3.

Changing text content

const title = document.querySelector("h1");
title.textContent = "New heading text!";

quick tip

Use textContent to change plain text. Avoid innerHTML unless you specifically need to insert HTML tags — it can accidentally run malicious code if the text ever comes from user input, a security issue called XSS.

Changing styles from JavaScript

const box = document.querySelector(".box");
box.style.backgroundColor = "orange";
box.style.padding = "20px";

You can set any CSS property this way — note that hyphenated CSS properties become camelCase in JavaScript: background-color becomes backgroundColor.

Adding and removing classes (the preferred approach)

box.classList.add("active");     /* add a class */
box.classList.remove("active");  /* remove a class */
box.classList.toggle("active");  /* on if off, off if on */

For most real projects, this is better than setting .style directly: define the look in your CSS file with a class, then just toggle that class on and off from JavaScript. It keeps your styling in one place instead of scattered across your script.

See it live

This button is running real JavaScript right now, on this page:

Nothing has changed yet.

Try it yourself

exercise

In your HTML page, add a button and a paragraph. Use document.querySelector to grab both, and write a function that changes the paragraph's text and color when the button is clicked (you'll wire up the actual click in Lesson 5 — for now, just call the function directly in the console to test it).

Level up: toggle a class

exercise 2

Create a .hidden { display: none; } class in your CSS. Select an element and use classList.toggle("hidden") in the console to make it appear and disappear. This exact pattern is behind almost every "show/hide" UI element you've ever used.

✓ quick check — 3 questions

1. What does DOM stand for?

Data Object Method Direct Object Mapping Document Object Model

2. Which is safer for changing plain text on a page?

textContent innerHTML Both are equally safe

3. What does classList.toggle("active") do?

Always adds the class Adds it if missing, removes it if present Deletes the element entirely

what's next

Lesson 5 covers events and forms — how to actually respond to clicks, typing, and form submissions, instead of testing everything manually in the console.

bottom line

The DOM is the live version of your page that JavaScript can read and change. querySelector grabs elements, textContent changes their text, and classList is the preferred way to control their styling from your script.

The DOM: Making Pages Interactive

What the DOM actually is

Selecting elements

Changing text content

Changing styles from JavaScript

Adding and removing classes (the preferred approach)

See it live

Try it yourself

Level up: toggle a class