The DOM: making pages interactive

The page as something you can touch

You can write JavaScript, and you can write HTML, but the interesting part is joining them: letting your code reach into the page and change it while the visitor watches. The bridge between the two is the DOM, short for Document Object Model. When a browser loads your HTML, it builds a live model of the page in memory, with every heading, paragraph and image as an object your code can find and edit. Change an object in the DOM and the page updates on screen at once.

So the DOM is not a new language. It is the set of handles JavaScript uses to grab the elements you already wrote and do something to them.

Finding an element

Before you can change something, you have to point at it. The most direct way is by its id, a unique name you give an element in the HTML.

<p id="greeting">Hello.</p>

In your JavaScript, document.getElementById fetches that exact element so you can work with it.

let para = document.getElementById("greeting");

Now para is your handle on that paragraph. Name the element, get a handle, then act on it.

Properties and methods

Once you hold an element, you interact with it through properties and methods. A property is a value you can read or set, like the text inside an element. A method is an action you can perform. The one you will use constantly is the textContent property, which reads or replaces the words inside an element.

let para = document.getElementById("greeting");
para.textContent = "Good evening.";

That single assignment reaches into the live page and swaps the paragraph's words. The visitor sees "Good evening." where "Hello." used to be, with no reload. Setting a property in the DOM is how you change what is on screen.

Reacting to a click

Changing the page is more useful when it happens in response to the visitor. An event is something that happens on the page, like a click, and you can ask an element to run a function when its event fires. The simplest way is the onclick attribute in the HTML, naming a function to call.

<button onclick="greet()">Say hello</button>

When the button is clicked, the browser runs your greet function. Inside it, you use the DOM tools above to change the page. Structure in HTML, behaviour in JavaScript, joined by the event.

A worked example: a click counter

Let us build something small but complete: a button that counts how many times it has been pressed and shows the running total. The HTML gives us a place to show the number and a button to press.

<p id="count">0</p>
<button onclick="addOne()">Press me</button>
<script src="script.js"></script>

The JavaScript keeps the running total in a variable and, on each click, raises it and writes it back into the paragraph.

let total = 0;

function addOne() {
  total = total + 1;
  document.getElementById("count").textContent = total;
}

Trace one click. The button calls addOne, which adds one to total, then finds the paragraph with id count and sets its textContent to the new number. Press it five times and the page shows 5, updating instantly each time. Nothing reloads, because you edited the live DOM rather than fetching a new page.

That counter is the whole shape of interactive web pages in miniature: HTML lays out the elements, an event notices the click, and JavaScript reaches through the DOM to update what the visitor sees. Every richer interface you meet later is built from exactly these moves.

Check yourself

1. In your own words, what is the DOM, and why does changing an object in it change what appears on the screen?
2. What is the difference between a property like textContent and a method, and which one did the click counter use to update the number?
3. Your counter button does nothing when clicked and the console shows the function was never found. Following the tip above, what two names would you check line up?