DOM & events

Everything below runs against a real, live sandbox on this page, not a simulation — the buttons genuinely call querySelector, classList, appendChild and friends against the little page snippet right above them. Push every button before reading on; watching it happen is most of the lesson.

Selecting elements

document.getElementById("de-text");         // exact id match
document.querySelector("#de-text");         // same element, CSS-selector syntax
document.querySelector(".btn");             // the FIRST element with class "btn"
document.querySelectorAll(".btn");          // every element with class "btn"

Reading and changing content

el.textContent = "hello <b>there</b>";  // literal text — tags show up as text, not bold
el.innerHTML = "hello <b>there</b>";     // actually renders as bold

el.setAttribute("data-user-id", "42");
el.getAttribute("data-user-id");            // "42" — always a string, even for numbers

el.classList.add("active");
el.classList.toggle("open");                // on if it was off, off if it was on
el.classList.contains("active");            // true

Creating, appending, removing

const li = document.createElement("li");   // exists only in memory so far
li.textContent = "New item";
listEl.appendChild(li);                     // now it's actually in the page

listEl.removeChild(li);                     // gone from the page (still exists in memory until GC'd)
li.remove();                                // modern shorthand — no need to know the parent

Walking the tree — traversal properties

function handleClick(event) {
  const row = event.target.closest("tr");   // works whether they clicked text, an icon, or the row
  if (!row) return;                          // clicked something outside any row
  console.log("row id:", row.dataset.id);
}
table.addEventListener("click", handleClick);

closest() is what makes delegation practical for anything nested — the click target is rarely the element you actually care about (more often an icon or a span inside it), and closest() walks upward from wherever the click landed until it finds the ancestor that matters.

HTMLCollection vs NodeList — one of them is alive

const live = document.getElementsByClassName("item");    // HTMLCollection — LIVE
const frozen = document.querySelectorAll(".item");         // NodeList — static

console.log(live.length, frozen.length);   // 2 2

listEl.appendChild(document.createElement("li"));

console.log(live.length, frozen.length);   // what happens?

3 2 — live is a live view: it re-counts the DOM every time you touch .length or index into it, because getElementsByClassName/getElementsByTagName return an HTMLCollection. querySelectorAll always returns a static NodeList — a snapshot taken the moment it ran, unaffected by later DOM changes. A live collection is a classic footgun inside a loop: removing an element while iterating a live HTMLCollection shifts every later index down by one and silently skips an element. Convert one to a real array first (Array.from(live)) before mutating while iterating.

Batch inserts with DocumentFragment

const fragment = document.createDocumentFragment();
for (const item of items) {
  const li = document.createElement("li");
  li.textContent = item;
  fragment.appendChild(li);                // appending to the fragment, not the live page yet
}
listEl.appendChild(fragment);               // ONE reflow, however many items were added

Events — addEventListener and the event object

button.addEventListener("click", function (event) {
  console.log(event.type);          // "click"
  console.log(event.target);        // the exact element that was clicked
  console.log(event.currentTarget); // the element the LISTENER is attached to
});

target and currentTarget only differ when events bubble — a click starts at the exact element you tapped and travels upward through every ancestor that's listening. target stays fixed at where it started; currentTarget is always whichever element's listener is currently running. That bubbling is what makes event delegation work: put one listener on a parent list instead of one on every item, and check event.target inside it to see which item was actually clicked.

outer.addEventListener("click", () => console.log("outer"));
middle.addEventListener("click", () => console.log("middle"));
inner.addEventListener("click", () => console.log("inner"));
// inner is nested inside middle, which is nested inside outer

inner.click();   // simulates a real click landing on inner

Dry run: the bubble path from a click on inner

target never changes — it's fixed at the element the click actually landed on. currentTarget changes on every row, because bubbling calls each ancestor's listener in turn, innermost first, and currentTarget is always whichever one is running right now.

preventDefault — stopping the browser's own reaction

Some elements have a built-in behavior for certain events — a form submits and reloads the page, an <a> navigates. event.preventDefault() cancels that specific default without stopping the event from continuing to bubble or running your own handler.

form.addEventListener("submit", function (event) {
  event.preventDefault();          // stop the page reload
  const data = new FormData(form); // now handle it yourself — fetch(), validation, etc.
});

Keyboard events — key vs code

input.addEventListener("keydown", function (event) {
  console.log(event.key);    // "a", "A", "Enter", "Shift" — what the key actually produced
  console.log(event.code);   // "KeyA", "KeyA", "Enter", "ShiftLeft" — the physical key, layout-independent
  if (event.key === "Enter" && !event.shiftKey) {
    event.preventDefault();
    submitForm();
  }
});

Use .key for anything about what the user meant to type — checking for "Enter", "Escape", or a specific letter — it already accounts for Shift and the user's keyboard layout. Use .code only for physical-position logic, like WASD game controls, where you want the same key regardless of what character it produces on a different layout.

removeEventListener — and the function-identity trap

function onClick() { console.log("clicked"); }

button.addEventListener("click", onClick);
button.removeEventListener("click", onClick);   // works — same function reference

button.addEventListener("click", () => console.log("clicked"));
button.removeEventListener("click", () => console.log("clicked"));  // does NOTHING

Listener options: once, passive, and signal

button.addEventListener("click", handler, { once: true });   // auto-removes itself after firing once

list.addEventListener("touchstart", handler, { passive: true });  // promises never to call preventDefault — lets the browser scroll immediately

const controller = new AbortController();
button.addEventListener("click", handler, { signal: controller.signal });
input.addEventListener("input", handler, { signal: controller.signal });
// ... later, remove BOTH listeners in one call:
controller.abort();

signal is the newest of the three, and often the best answer to "clean up every listener a component added" — one shared AbortController across every addEventListener call removes all of them the moment .abort() runs, no manual bookkeeping of which handler needs which element. passive: true matters specifically for scroll-blocking events (touchstart, wheel) — without it, the browser has to wait and see whether the handler calls preventDefault() before it can start scrolling, a measurable jank source on mobile.

Forms and input values

input.value;                 // the current text — always a string, even for type="number"
input.value = "";            // clearing it programmatically

checkbox.checked;            // boolean — .value on a checkbox is NOT what's checked
select.value;                // the selected <option>'s value

input.addEventListener("input", e => console.log(e.target.value));  // fires on every keystroke
input.addEventListener("change", e => console.log(e.target.value)); // fires once, on blur/commit

input vs change trips a lot of people up: input is for "react live, as they type" (a character counter, live search); change is for "react once they're done" (a select dropdown, a checkbox, a field that loses focus).