The DOM and events

A page that never changes is only a document. The pages you use every day react: a menu opens, a counter goes up, a message appears when you press a button. All of that happens because JavaScript can reach into the page and change it while it is on screen. To do this safely you need to know what the browser is actually holding in memory, and how it tells your code that something has happened.

What the DOM is

When the browser loads an HTML file it does not keep the text. It reads it and builds a live model of the page in memory, called the DOM (Document Object Model). Each element becomes an object, and because elements sit inside other elements, the objects form a tree. The html element is the root; head and body are its branches; headings, paragraphs and buttons are leaves. A good picture is a family tree: every element has a parent and may have children.

JavaScript does not edit your HTML file. It edits the DOM, and the browser redraws the screen to match. Refresh the page and the original HTML is loaded again, so changes made by a script are lost unless something saves them.

Selecting elements and changing them

To change an element you first need to select it. document.querySelector("...") takes a CSS selector, the same kind you wrote in the CSS lesson, and gives back the first matching element. Use #message for an id and .note for a class. Once you hold the element in a variable you can change its textContent (the plain text inside it), its style, its attributes and its classes.

const message = document.querySelector("#message");

message.textContent = "Welcome, Fatuma!";
message.classList.add("highlight");

// Later, to undo it:
// message.classList.remove("highlight");

Changing a class is usually better than changing styles one by one from JavaScript. Keep the look in CSS, where the .highlight rule is written, and let JavaScript only switch the class on or off. That keeps the three languages tidy. Prefer textContent to innerHTML when you only want text: innerHTML reads its value as HTML, which becomes a security risk if the text came from a stranger.

Events: responding to the user

An event is something that happens on the page: a click, a key press, a form being submitted, the page finishing loading. The browser announces each one. Your code says in advance "when this event happens on this element, run this function". That function is an event listener (also called an event handler). You attach it with addEventListener, giving the event name and the function.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Garden club</title>
  <style>
    .highlight { background: #fff3cd; padding: 8px; }
  </style>
</head>
<body>
  <h1 id="title">Garden club</h1>
  <p id="message">Press the button.</p>
  <button id="greet">Greet</button>

  <script>
    const message = document.querySelector("#message");
    const button = document.querySelector("#greet");
    let clicks = 0;

    function handleClick() {
      clicks = clicks + 1;
      message.textContent = "Hello! You have clicked " + clicks + " times.";
      message.classList.add("highlight");
    }

    button.addEventListener("click", handleClick);
  </script>
</body>
</html>

Notice handleClick has no brackets inside addEventListener. You are handing the function over to be called later, not calling it now. Writing handleClick() there would run it immediately, once, when the page loads.

How HTML, CSS and JavaScript fit together

Each language has one job. HTML says what is on the page, CSS says how it looks, and JavaScript says what it does. They meet in the DOM: the browser builds the tree from HTML, attaches the CSS rules to its elements, and lets JavaScript change both the tree and the classes that CSS reacts to. Keep the jobs separate and your pages stay easy to fix.