3.14 Manipulating the Page: DOM and Events

The JS syntax so far (variables, loops, functions…) isn't truly "connected" to the page yet. This section is the climax of the whole course: making JavaScript grab page elements, change them, and respond to user actions. After this, you can build genuinely "live" web pages.

The lab below is exactly that — an interactive mini page: click to change a number, switch colors, and type a name for a live greeting.

The DOM: a "programmable version" of the page

When the browser loads HTML, it turns the page into a tree of elements called the DOM (Document Object Model). JavaScript can access and modify anything on the page through the DOM.

The entry point is the global object document.

Step 1: find an element

Use document.querySelector(selector) to grab an element — the parentheses take the same selector syntax you learned in CSS:

const title = document.querySelector("h1");       // the first h1
const btn   = document.querySelector("#myBtn");    // the element with id myBtn
const items = document.querySelectorAll(".item");  // all .item (multiple)

Step 2: change an element

Once grabbed, you can change its content and style:

title.textContent = "New title";    // change text
title.style.color = "red";          // change style
btn.classList.add("active");        // add a class

• textContent: the element's text.

• style.xxx: inline styles (note CSS font-size becomes fontSize in JS).

• classList.add / remove: add/remove classes — most convenient paired with CSS.

Step 3: listen for events

An event is "the user did something" — a click, typing, moving the mouse. Use addEventListener to "listen": when it happens, run the function you give.

const btn = document.querySelector("#myBtn");

btn.addEventListener("click", () => {
  console.log("The button was clicked!");
});

addEventListener takes two arguments: the event name ("click") and a callback function (the code to run when it happens).

Connect all three: a counter

const display = document.querySelector("#count");
const btn = document.querySelector("#plus");
let count = 0;

btn.addEventListener("click", () => {
  count = count + 1;             // change data
  display.textContent = count;   // update the page
});

Read this once and you'll see it uses everything in this course: variables, functions, events, the DOM. Click the button → run the callback → change a variable → update the page. That's the basic pattern behind almost all web interactivity.

Congratulations — you made it!

Look back at the path this course took:

• HTML builds the page's structure (headings, paragraphs, buttons, forms).

• CSS gives the page its look (colors, the box model, Flexbox layout).

• JavaScript makes the page move (variables, branches, loops, functions, arrays, objects, plus the DOM and events).

These three layers together are the entire foundation behind every web page. From here, you have the roots to go deeper into any front-end direction (React, Vue, animation, visualization…). Keep building little things — learning by doing is always the fastest road.