Generation STEM
Learning LibraryWebsite Development LibraryTeens

The DOM: the live page your code can change

Once a page loads, it's not frozen — it's a live tree of objects called the DOM. JavaScript can reach into that tree, grab any element, and change it while the page is running.

The big idea

The DOM is the browser's live, in-memory tree of the page; JavaScript selects nodes from it and updates them, and the page changes instantly.

See it in code

1The basics

The DOM is the live tree of a loaded page, and JavaScript can reach into it. getElementById grabs a node; setting its .textContent rewrites what it shows:

html
<p id="status">Waiting...</p>

<script>
  document.getElementById("status").textContent = "Changed by JavaScript!";
</script>
JavaScript selects the paragraph and rewrites its text:

The paragraph started as 'Waiting...' in the HTML, but the script rewrote it before you ever saw it. Select a node, change it — that's the whole idea.

2A step further

Now make it react. addEventListener("click", ...) runs your code every time the button is pressed. Click it and the paragraph updates, with no reload:

html
<p id="status">Waiting...</p>
<button id="go">Click me</button>

<script>
  const status = document.getElementById("status");
  document.getElementById("go").addEventListener("click", function () {
    status.textContent = "You clicked the button!";
  });
</script>
A real click handler — press the button:

Select, listen, update. The click fires your function, and the function changes the DOM.

3In our world

One more step: remember something between clicks. A clicks variable counts up, and each click writes the new total into the paragraph. Try it:

html
<p id="status">Waiting...</p>
<button id="go">Click me</button>

<script>
  const status = document.getElementById("status");
  const button = document.getElementById("go");
  let clicks = 0;

  button.addEventListener("click", function () {
    clicks += 1;
    status.textContent = "Clicked " + clicks + " time(s)!";
  });
</script>
A real, clickable DOM update — press the button:

getElementById selects a node from the DOM tree; .textContent reads or writes its text; addEventListener runs code when something happens. That loop — select, listen, update — is the heart of every interactive page, from a like button to a whole app.

The same idea, everywhere

The pattern — hold a live model in memory, and re-render the view when it changes — is the foundation of all modern UI. React, Vue, and every app framework are really sophisticated ways of updating the DOM. Under the hood, it's always select an element and change it.

Try it yourself

Add a second button that resets clicks to 0 and updates the text. Then change status.textContent to status.style.color = "red" to modify a style instead of text — you can change almost anything about a node.

The common mistake

Running the script before the elements exist. If your <script> runs before the <p> and <button> are in the DOM, getElementById returns null and everything breaks. Put scripts at the end of the body, or wait for the page to load.

What it unlocks

The DOM lets code manipulate your HTML using attributes and classes as hooks, and is the basis for interactive components.

Related concepts