Free course · Lesson 4 of 5

The DOM & Events

In this lesson you will

Select and change page elements with JavaScript
Respond to clicks and form input with event listeners

The DOM (Document Object Model) is the browser's live, in-memory representation of a web page. JavaScript reads and changes it — updating text, toggling classes, responding to clicks — which is how a static page becomes interactive.

document.querySelector(".card") finds the first matching element.
element.textContent = "New text" safely updates visible text.
element.classList.add("is-active") toggles styling without touching CSS directly.
element.addEventListener("click", handlerFn) reacts to user interaction.

💡 Practical Skill: Prefer textContent and classList over directly writing HTML strings — it's safer and keeps your logic and markup cleanly separated.

Worked exampleA Simple Counter Button

JavaScript

const button = document.querySelector("#count-btn");const display = document.querySelector("#count-display");let count = 0; button.addEventListener("click", () => {  count += 1;  display.textContent = `Clicked ${count} times`;  display.classList.toggle("is-milestone", count % 10 === 0);});

Practice exercise

Make a page with a button that adds 1 to a counter shown on the page, and a reset button that sets it back to 0.

Key takeaways

querySelector finds elements using CSS selectors
addEventListener runs code when users act
Use textContent, not innerHTML, for text that users type

In the full program Module 4: The DOM and Events See how this topic is taught in depth, with practical activities and an assessment.

Free self-study lesson — no certificate. For the full instructor-led program, see registration options.