Module 12: The DOM & Closures | Web Dev for Beginners

"The DOM is how JavaScript reaches into a page and changes it. Closures are a quiet superpower that lets functions remember."

Learning Objectives

By the end of this module, you will be able to:

Explain what the DOM is
Select and change page elements
Understand a closure in plain terms
See why both matter for real apps

1. The DOM: Your Page as Objects

When the browser loads your HTML, it builds a live, changeable model of it called the DOM (Document Object Model). JavaScript reads and edits this model, and the page updates instantly.

The terrarium project, built by manipulating the DOM

javascript

[object Object], title = ,[object Object],.,[object Object],(,[object Object],);   ,[object Object],
title.,[object Object], = ,[object Object],;                ,[object Object],
title.,[object Object],.,[object Object], = ,[object Object],;                    ,[object Object],

Key idea: document.querySelector("...") finds an element using a CSS selector (like #id or .class). Once you have it, you can change its text, styles, and classes — and the browser re-renders live.

Think of the DOM as a family tree of your HTML. The <html> tag is the root; <head> and <body> are its children; everything nests inside from there. JavaScript can walk this tree, grab any branch, and rewrite it. querySelector returns the first match; querySelectorAll returns all matches so you can loop over them.

Explain like I'm new: Your HTML file is the blueprint; the DOM is the actual house the browser built from it. Editing the DOM is like moving real furniture around — the house (page) changes instantly, even though the original blueprint on disk is untouched.

Try this: Open any web page, press F12, and in the Console type document.querySelectorAll("a").length. You just counted every link on the page using the DOM — the same tool you'll use to build interactive features.

2. Changing the Page

Common DOM moves:

element.textContent = "..." — change text
element.classList.add("active") — toggle styling via classes
document.createElement("div") — make new elements
parent.appendChild(child) — add them to the page

The terrarium project above works entirely by selecting plants and updating their position in the DOM as you drag them.

Here's a tiny end-to-end example — find a list, make a new item, and add it:

javascript

[object Object], list = ,[object Object],.,[object Object],(,[object Object],);
,[object Object], item = ,[object Object],.,[object Object],(,[object Object],);
item.,[object Object], = ,[object Object],;
list.,[object Object],(item);

Reading text, toggling a class, creating an element, appending it — those four moves cover the vast majority of DOM work you'll ever do.

Real-world use case: Every "live" thing you see — a like count ticking up, a dropdown opening, items appearing in a search box as you type — is JavaScript editing the DOM. No page reload, just the model changing and the browser redrawing.

3. Closures (Gently)

A closure is a function that remembers the variables around it, even after the outer function has finished. It sounds abstract, but it's how a function can "keep its own private memory."

Don't worry if it feels slippery at first — even experienced developers describe closures as "the thing you use every day without noticing." The example below makes it concrete:

javascript

[object Object], ,[object Object],(,[object Object],) {
  ,[object Object], count = ,[object Object],;                 ,[object Object],
  ,[object Object], ,[object Object], ++count;          ,[object Object],
}
,[object Object], next = ,[object Object],();
,[object Object],();  ,[object Object],
,[object Object],();  ,[object Object],

Each time you call makeCounter(), it creates a fresh count that only the returned function can touch — the outside world can't reach it. That's two superpowers at once: the function remembers its value between calls, and that value is private. It's how a single page can run three separate counters that don't interfere with each other.

Concept: Closures are why event handlers "just work." When you write a click handler that updates a count variable, the handler keeps a live link to that count long after the setup code has finished running — thanks to closures.

Beginner mistake: Expecting a variable inside a function to reset every call. Thanks to closures, the returned function keeps access to count between calls. That's a feature — it's how drag handlers, counters, and event callbacks remember state.

Practice task: Select an <h1> with querySelector and change its text and color from the console. Then peek at the DOM in the Inspector (Module 20) to see your change reflected live.

Key Takeaway: The DOM is the browser's live model of your page; JavaScript selects elements (querySelector) and changes their text, style, classes, or structure to update the page instantly. A closure lets a function remember the variables around it between calls — the mechanism behind counters, drag handlers, and event callbacks.

Further Learning

Adapted from Microsoft's Web Dev for Beginners (MIT License). Terrarium project from the source curriculum.