The DOM & Events

The DOM

When the browser loads HTML, it builds the DOM: a tree of objects you can read and change with JavaScript.

const title = document.querySelector("h1");
title.textContent = "Changed by JavaScript!";
title.classList.add("highlight");

• document.querySelector(selector) finds the first match
• document.querySelectorAll(selector) finds all matches

Events

Events are things that happen: clicks, key presses, form submits.

const button = document.querySelector("#save");
button.addEventListener("click", () => {
  console.log("Saved!");
});

Forms use the submit event. Call event.preventDefault() to stop the page from reloading:

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const email = form.elements.email.value;
});

State → UI

The pattern behind React, Vue and every modern framework is simple: keep your data in variables (state), and update the page from that data. You'll do exactly that in the exercise. Understanding it with plain JavaScript first makes frameworks much easier to learn later.