Learn / JavaScript / DOM & Events
Lesson 6 of 6 · Capstone

DOM & Events

Everything so far has lived in the console — invisible to anyone but you. This lesson is where it finally becomes a real, clickable page. The bridge between your JavaScript and the page a person actually sees is called the DOM — the Document Object Model.

💡 The Bottom Line

The browser turns your HTML into a live tree of objects — the DOM. JavaScript can select any piece of that tree, read or change it, and listen for things a person does to it, like a click. That loop — select, listen, react — is basically the entire job of front-end JavaScript.

Selecting an element

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

<script>
  const el = document.querySelector("#greeting");
  console.log(el.textContent); // "Hello!"
</script>

document.querySelector(...) takes a CSS-style selector — #id, .class, or a tag name — and hands back the first matching element. It's the modern, do-almost-everything way to grab something from the page.

Changing what's on screen

const el = document.querySelector("#greeting");
el.textContent = "Hello, Deva!";     // safely changes visible text
el.style.color = "teal";             // changes a CSS property directly
el.classList.add("highlight");       // adds a CSS class

⚠️ Watch Out

You'll also see innerHTML, which lets you insert actual HTML tags, not just text. It's powerful but risky: if any part of that HTML ever comes from something a user typed, you can open the door to injected malicious scripts. Default to textContent unless you specifically need to insert markup, and never feed raw user input into innerHTML.

Listening for events

const button = document.querySelector("#myButton");

button.addEventListener("click", () => {
  console.log("Someone clicked me!");
});

addEventListener takes an event name ("click", "input", "submit", "mouseover"...) and a function to run when that event happens. Nothing runs until the person actually does the thing — this is why JavaScript feels "alive": it's sitting quietly, waiting to react.

🔧 Live Demo — this is real, running JavaScript right now

Click the button below. It's wired up with exactly the pattern above — a querySelector to find it, an addEventListener to hear the click, and a line that updates textContent.

You've clicked 0 times

Here's the whole script behind that button — nothing hidden:

let count = 0;
const text = document.querySelector("#demo-text");
const button = document.querySelector("#demo-button");

button.addEventListener("click", () => {
  count++;
  text.textContent = `You've clicked ${count} times`;
});

🙋 There Are No Dumb Questions

Q: What if I select an element that doesn't exist on the page?
A: querySelector quietly returns null instead of erroring. The error shows up one line later, when you try to do something like el.textContent = ... on that null — "Cannot set property of null". If you ever see that exact error, the fix is almost always: check your selector spelling, and make sure your script runs after the element exists (remember Lesson 2's defer).

✅ Quick Check

What does addEventListener("click", fn) actually do?

Select, listen, react. That's the loop behind every button, form, and menu on every interactive site you've ever used — and now you've written it yourself.

← Back to
Next →