JavaScript DOM Manipulation: Make Your Page Interactive

The DOM (Document Object Model) is the browser's live, in-memory version of your HTML. When JavaScript "changes the page", it is really changing the DOM — and the browser instantly redraws what you see.

Selecting elements

Before you can change something, you have to find it:

// By id — returns one element
const title = document.getElementById("title");

// By CSS selector — returns the first match
const firstButton = document.querySelector("button");

// All matches — returns a list
const allItems = document.querySelectorAll("li");

querySelector accepts any CSS selector, so everything you learned in CSS works here too: .class, #id, ul > li, and so on.

Changing content and styles

title.textContent = "New heading";       // change the text
title.style.color = "crimson";           // change one style
title.classList.add("highlight");        // add a CSS class (better!)
title.classList.toggle("dark-mode");     // switch a class on/off

Prefer classList over style — keep the styling rules in your CSS file and just switch classes from JavaScript.

Creating and removing elements

const li = document.createElement("li"); // create
li.textContent = "Buy milk";             // fill it
list.appendChild(li);                    // attach to the page
li.remove();                             // delete it again

Nothing appears on the page until you attach the new element with appendChild (or append, prepend, insertBefore).

Reacting to events

Events are how the page tells you something happened:

button.addEventListener("click", function () {
  console.log("Button was clicked!");
});

Common events you will use all the time:

Event	Fires when...
click	An element is clicked
input	Text in a field changes
submit	A form is submitted
keydown	A keyboard key is pressed
mouseover	Pointer enters an element

Try it yourself: a mini shopping list

The editor below combines everything: it selects the input, button and list, then on every click it creates a new <li>, fills it with the input text, and attaches it to the list. Clicking any item removes it.

Try these challenges:

1. Make the Enter key also add the item (listen for keydown on the input and check event.key === "Enter").
2. Show an alert when the user tries to add an empty item.
3. Add a counter above the list showing how many items it contains.
4. Bonus: give every added item a random colour using li.style.color.

Press Run after each change to see the result instantly.

Practice exercises

Still using the shopping list — these three exercises each practise one core DOM skill.

Exercise 1 (easy): Add a "Clear all" button to the HTML that empties the entire list at once. (Hint: setting list.innerHTML = "" removes every child.)

Solution:

<button id="clear-btn">Clear all</button>

document.getElementById("clear-btn").addEventListener("click", function () {
  list.innerHTML = "";
});

Exercise 2 (medium): Right now, clicking an item deletes it. Change the behaviour: the first click should mark it done (strike-through), a second click deletes it. Use classList — add a .done rule in the CSS tab with text-decoration: line-through.

Solution:

.done { text-decoration: line-through; color: #999; }

li.addEventListener("click", function () {
  if (li.classList.contains("done")) {
    li.remove();
  } else {
    li.classList.add("done");
  }
});

Exercise 3 (challenge): Show a live item count in the page's <h2> — "My Shopping List (3)". Update it every time an item is added or removed. (Hint: list.children.length gives the current count; write an updateCount() function and call it after every change.)

Solution:

const heading = document.querySelector("h2");
function updateCount() {
  heading.textContent = "My Shopping List (" + list.children.length + ")";
}
// call updateCount(); after appendChild and after remove