Stop 03 · HTML, CSS & JavaScript EssentialsTopics · 7/11

DOM & Events

Part of the Full Stack Developer Roadmap

In short

HTML is just text until the browser turns it into the DOM, a live tree of objects. Events tell your JavaScript when the user acts, so it can change that tree or call your API.

The browser's programmatic interface for reading and modifying a page's content, and the event system that lets your JavaScript react to clicks, input and other user actions.

The mascot presses a switch on a corridor switchboard and a bulb lights up.

Think of it like this

The hostel corridor switchboard

Every bulb in the corridor is wired to the board. You can rewire which switch controls which bulb, add new bulbs, or remove old ones. The DOM is that wiring map, and an event is someone pressing a switch.

Watch it happen

A click travels up the DOM

document

body

form#todo

input

button Add

ul#list

li Buy milk

li Pay fees

1/5The browser reads your HTML and builds this tree. Every tag becomes an object JavaScript can read and change.

The big ideas

What you need to know

The DOM is a tree

Each element has a parent and children. querySelector finds a node, and methods like append and remove change the tree.

Listen, don't poll

addEventListener("click", fn) runs fn only when the click happens. No loops checking 'did they click yet?'.

Events bubble up

A click on a child also reaches its parents. That lets one listener on a list handle all its items.

textContent over innerHTML

Putting user text into innerHTML can run injected scripts. textContent treats it as plain text, which is safe.

See it in code

Walk through the code

1const form = document.querySelector("#todo");2const list = document.querySelector("#list");3form.addEventListener("submit", async (event) => {4  event.preventDefault(); // stop the full page reload5  const text = form.elements.task.value.trim();6  if (!text) return;7  const li = document.createElement("li");8  li.textContent = text; // safe, never innerHTML for user text9  list.append(li);10  form.reset();11  await fetch("/api/todos", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text }) });12});13 14// One listener on the list handles every <li>, even new ones15list.addEventListener("click", (e) => e.target.closest("li")?.classList.toggle("done"));

1/4Grab the form and the list once and keep them in variables.

The page updates first, then the task is saved to the server. That's how most snappy UIs feel instant.

Save yourself the pain

Common mistakes

Oops

Adding a click listener to every li in a loop, then wondering why new items don't respond.

Do this instead

Put one listener on the parent list and use event.target.closest("li") to find the item.

Oops

Forgetting event.preventDefault() on a form submit.

Do this instead

Without it the browser reloads the page and your fetch call gets cancelled halfway.

Your mission

Build a mini to-do list

~30 min

Quick check

You attach one click listener to ul#list. A new li is added later. Does clicking it trigger the listener?

Go deeper

1Use `document.querySelector` and event listeners to build a small interactive widget without a framework.
2Learn event bubbling and delegation for handling events on dynamically added elements.
3Understand this is what frameworks like React abstract away — knowing it underneath helps you debug framework issues.