The DOM

A web page loaded in a browser isn’t just the HTML you wrote, it’s a live, in-memory structure called the DOM (Document Object Model), and JavaScript can read and change it directly. This module covers how.

Why This Matters

Every interactive web page comes down to the same thing: JavaScript reading the DOM to see what’s there, and changing it in response to something. Without this, JavaScript in the browser can only run in the background, it can’t actually touch the page a user sees.

What You’ll Learn

• What the DOM is, and how it relates to the HTML you write
• Selecting elements with document.querySelector() and friends
• Creating new elements and inserting them into the page
• Modifying existing elements: text, attributes, and classes
• Moving around the page structure with DOM traversal
• Reading and working with forms

Outcome

By the end of this module, you’ll be able to take a static HTML page and change anything about it from JavaScript: what it says, what it looks like, and what’s on it.

Let’s get started.