The DOM

The Document Object Model (DOM) is the browser’s representation of an HTML document as a tree of objects. When a browser loads a web page, it parses the HTML and creates this tree structure, where each HTML element becomes an object you can manipulate with JavaScript.

// Select an element and change its content
const heading = document.querySelector("h1");
heading.textContent = "Welcome!";

// Add a CSS class
heading.classList.add("highlight");

// Respond to user interaction
heading.addEventListener("click", () => {
  heading.textContent = "You clicked me!";
});

That example shows the three DOM operations we use most: selecting an element, modifying it, and responding to an event.

In this chapter, you will learn just enough DOM manipulation to start building interactive applications. We focus on the most commonly used methods and patterns rather than covering every available API.

Learning Outcomes

  • Explain the DOM as a tree structure that connects HTML documents to JavaScript
  • Select elements in the DOM using a range of query methods
  • Read and modify element content, attributes, and styles
  • Create, insert, and remove elements dynamically
  • Handle user interaction through event listeners
  • Combine selection, modification, and events to build interactive UI components

Sections

  1. HTML & CSS Refresher
  2. The Document Object Model
  3. Selecting Elements
  4. Modifying Element Content
  5. Modifying Element Styles
  6. Creating and Removing Elements
  7. Responding to User Actions
  8. Practical DOM Patterns
  9. Practice Questions