DOM & Events

Making web pages interactive — selecting elements, changing content, responding to clicks and keyboard input.

What it is, in plain English: The DOM (Document Object Model) is JavaScript's view of a web page — every heading, paragraph, button, and image is a node in a tree that JavaScript can read and modify. Events are things that happen: a user clicks a button, presses a key, or the page finishes loading. Together, the DOM and events are how JavaScript makes web pages interactive. This is browser-only: Node.js has no DOM.

Where this bites you

getElementsByClassName returns a live collection that updates itself as the page changes. Loop over it while removing that class, and each element drops out of the collection the moment you change it, so the indexes shift and the loop skips every other element. Half the items stay untouched, with no error.

const pending = document.getElementsByClassName("pending");   // a LIVE collection

for (let i = 0; i < pending.length; i++) {
  pending[i].classList.remove("pending");   // the element leaves the collection
}

console.log(document.querySelectorAll(".pending").length);
// 2   -- with four <li class="pending">, items 2 and 4 are still pending (Chromium 141)

Making pages respond to users

Browser only. Everything on this page applies to JavaScript running in a browser. Node.js has no document, no window, and no DOM.

The DOM — JavaScript's view of your HTML

When a browser loads an HTML page, it builds a tree of objects called the DOM (Document Object Model). Every element — every <h1>, <button>, <p> — becomes a node in this tree. JavaScript can read and modify any of these nodes to change what the user sees.

Selecting elements

// querySelector — the modern, flexible selector (like CSS selectors)
const title   = document.querySelector("h1");           // first h1
const btn     = document.querySelector("#submit-btn");  // element with id="submit-btn"
const warning = document.querySelector(".warning");     // first with class="warning"
const input   = document.querySelector("form input[type='email']"); // specific input

// querySelectorAll — returns ALL matching elements (a NodeList)
const allButtons = document.querySelectorAll("button");
const listItems  = document.querySelectorAll(".menu li");

// Loop over them:
allButtons.forEach(btn => {
  console.log(btn.textContent);
});

querySelectorAll, used above, returns a static NodeList: a snapshot taken once, which doesn't change while you modify the page. Loop over that (or copy a live collection first with [...pending]), and every element gets visited:

const pending = document.querySelectorAll(".pending");   // a STATIC snapshot

for (const el of pending) {
  el.classList.remove("pending");
}

console.log(document.querySelectorAll(".pending").length);   // 0

Reading and changing content

const heading = document.querySelector("h1");

// textContent — plain text (safe, recommended):
console.log(heading.textContent);    // current text
heading.textContent = "New Heading"; // change the text

// innerHTML — can include HTML tags (use carefully — XSS risk with user data):
const div = document.querySelector(".message");
div.innerHTML = "<strong>Bold message</strong> and normal text";

// NEVER do this with user input — it's an XSS vulnerability:
// div.innerHTML = userInput;  // ✗ dangerous if userInput contains <script>

// Safe way to insert user content:
div.textContent = userInput;   // ✓ always treated as plain text

Changing styles and classes

const box = document.querySelector(".box");

// classList — the right way to manage CSS classes:
box.classList.add("active");           // add a class
box.classList.remove("hidden");        // remove a class
box.classList.toggle("selected");      // add if absent, remove if present
box.classList.contains("active");      // true/false check
box.classList.replace("old", "new");   // replace one class with another

// Inline styles (use classes when possible — CSS is more maintainable):
box.style.color       = "red";
box.style.fontSize    = "18px";
box.style.display     = "none";   // hide the element
box.style.display     = "";       // restore (remove inline override)

Responding to events

An event is something that happens — a click, a keystroke, the page loading. You listen for events and run a function (the event handler) when they occur.

const button = document.querySelector("#my-button");

// addEventListener — the correct, modern way:
button.addEventListener("click", function(event) {
  console.log("Button clicked!");
  console.log("Clicked element:", event.target);
  console.log("Mouse position:", event.clientX, event.clientY);
});

// Arrow function works too:
button.addEventListener("click", (e) => {
  e.target.textContent = "Clicked!";   // change the button text
  e.target.disabled = true;             // disable after clicking
});

// Common events:
document.addEventListener("DOMContentLoaded", () => {
  // Runs when HTML is fully parsed — safe to access elements here
  console.log("Page ready");
});

const input = document.querySelector("input");
input.addEventListener("input", (e) => {
  console.log("Current value:", e.target.value);
});

input.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    console.log("Enter pressed!");
  }
});

window.addEventListener("scroll", () => {
  console.log("Scrolled to:", window.scrollY);
});

Creating and inserting elements

// Create a new element:
const li = document.createElement("li");
li.textContent = "New list item";
li.classList.add("item");

// Insert into the page:
const list = document.querySelector("ul");
list.appendChild(li);                    // add at end
list.prepend(li);                        // add at start
list.insertBefore(li, list.children[2]); // add at specific position

// Modern insertion methods:
list.append(li);                          // like appendChild, also accepts strings
list.insertAdjacentHTML("beforeend", "<li>Another item</li>");

// Remove an element:
li.remove();   // remove from DOM

Try It Yourself

// The Try It editor runs in the browser — DOM access works here!
// But we can't show real element manipulation without HTML, so this
// demonstrates DOM concepts using the console output.

// The document object represents the entire page:
console.log("Page title:", document.title);
console.log("Page URL:", window.location.href);

// Create elements programmatically (common pattern):
const div = document.createElement("div");
div.textContent = "Hello from JavaScript!";
div.className = "greeting";
div.style.color = "blue";

// Reading element properties before it's in the DOM:
console.log("Element tag:", div.tagName);        // "DIV"
console.log("Element text:", div.textContent);   // "Hello from JavaScript!"
console.log("Has class:", div.classList.contains("greeting")); // true

// classList — the right way to manage CSS classes:
div.classList.add("active");
div.classList.add("visible");
console.log("Classes:", div.className);          // "greeting active visible"
div.classList.remove("active");
div.classList.toggle("highlight");               // adds if absent, removes if present
console.log("After toggle:", div.className);     // "greeting visible highlight"

// Data attributes — storing data in HTML:
div.dataset.userId = "42";
div.dataset.role   = "admin";
console.log("User ID:", div.dataset.userId);     // "42"
console.log("Role:", div.dataset.role);          // "admin"

Event bubbling, delegation, and working with forms

Event bubbling and capturing

// Events bubble UP from the target to the document root:
// Click on button → button's listeners fire → parent's → grandparent's → document

document.querySelector(".container").addEventListener("click", (e) => {
  console.log("Container clicked");
  console.log("Actual target:", e.target);    // the element clicked
  console.log("Current target:", e.currentTarget); // the element with this listener
});

document.querySelector("button").addEventListener("click", (e) => {
  console.log("Button clicked");
  // e.stopPropagation();  // uncomment to prevent bubbling to container
});

// Capturing phase (fires before bubbling, top-down):
document.addEventListener("click", (e) => {
  console.log("Document captured");
}, { capture: true });  // third argument: capture = true

Event delegation — one listener for many elements

// Instead of adding a listener to every list item (expensive),
// add ONE listener to the parent and check e.target:
const todoList = document.querySelector("#todo-list");

todoList.addEventListener("click", (e) => {
  // Check which element was clicked:
  if (e.target.matches(".delete-btn")) {
    e.target.closest("li").remove();
  }
  if (e.target.matches(".complete-btn")) {
    e.target.closest("li").classList.toggle("completed");
  }
});

// This works even for items added to the list AFTER the listener was set up!
// (Unlike adding listeners to each item)

Working with forms

const form = document.querySelector("#signup-form");

form.addEventListener("submit", (e) => {
  e.preventDefault();   // stop the page from reloading

  const data = new FormData(form);
  const name  = data.get("name");
  const email = data.get("email");

  // Or access inputs directly:
  const nameInput  = form.querySelector("[name='name']");
  const emailInput = form.querySelector("[name='email']");

  // Validate:
  if (!email.includes("@")) {
    emailInput.setCustomValidity("Please enter a valid email");
    emailInput.reportValidity();
    return;
  }

  console.log("Submitting:", { name, email });
});

Intersection Observer — efficient scroll animations

// Don't use scroll events for visibility — use IntersectionObserver:
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
      observer.unobserve(entry.target);  // stop watching after first trigger
    }
  });
}, { threshold: 0.1 });  // 10% visible triggers the callback

document.querySelectorAll(".animate-on-scroll").forEach(el => {
  observer.observe(el);
});

The DOM spec, event loop integration, and performance

The DOM is not part of ECMAScript

The DOM is specified by WHATWG's DOM Standard (dom.spec.whatwg.org), not ECMAScript. The DOM exposes a host environment — a set of host-defined objects (window, document, Element) that the JS engine can interact with. The ECMAScript spec defines how the engine interacts with host objects via [[Call]], [[Get]], etc.; the DOM spec defines the specific objects and their behaviour.

Event dispatch algorithm

The DOM event dispatch algorithm (DOM Standard §2.9) proceeds in three phases:

Capture phase — from Window down to the target's parent, firing listeners registered with capture=true
Target phase — at the target element, firing both capture and bubble listeners
Bubble phase — from target's parent up to Window, firing bubble listeners

stopPropagation() sets a flag that halts propagation after the current listener. stopImmediatePropagation() also prevents other listeners on the same element from firing.

Virtual DOM vs real DOM

DOM mutations are expensive because they can trigger layout (reflow) and paint. React and Vue use a virtual DOM — a JS object tree representing the desired DOM — to batch mutations. They diff the virtual DOM against the previous state and apply only the minimal set of real DOM mutations. Modern browsers also support requestAnimationFrame and CSS will-change for moving animations off the main thread.

// Batch DOM reads and writes — avoid layout thrashing:
// ✗ Alternating read/write forces reflow each time:
const height1 = el1.offsetHeight;  // read — forces layout
el2.style.height = height1 + "px"; // write
const height2 = el2.offsetHeight;  // read — forces layout again!
el3.style.height = height2 + "px"; // write

// ✓ Batch reads first, then writes:
const h1 = el1.offsetHeight;  // read
const h2 = el2.offsetHeight;  // read (cached from above layout)
el2.style.height = h1 + "px"; // write
el3.style.height = h2 + "px"; // write (only one reflow total)

Custom events

// Create and dispatch custom events for component communication:
const event = new CustomEvent("user:login", {
  detail: { userId: 42, username: "Alice" },
  bubbles: true,
  cancelable: true
});

document.dispatchEvent(event);

// Listen anywhere in the tree:
document.addEventListener("user:login", (e) => {
  console.log("User logged in:", e.detail.username);
});

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.