Module 7: The DOM & Events

The Document Object Model (DOM) is the browser's live, in-memory object representation of an HTML document. When a browser loads an HTML file, its rendering engine parses the serialized text tags and constructs a hierarchical tree of interconnected node objects. JavaScript interacts with this tree via standard APIs to dynamically inspect, modify, add, or delete elements and attributes in real time without requiring a full page refresh.

1. HTML Source vs. Live DOM

Developers often mistake the DOM for HTML source code. They are fundamentally different entities:

• HTML: A static, serialized string representation of the document stored on disk or sent across the network.
• DOM: A dynamic, mutable, object-oriented data structure living in browser RAM. JavaScript does not alter the source .html file; it alters the live nodes residing in memory.

2. The Browser Rendering Pipeline

When the browser downloads HTML bytes, it executes a deterministic sequence:

1. Bytes → Characters: Raw network bytes are decoded to Unicode text.
2. Tokenization: The engine identifies HTML start/end tags, attributes, and text tokens.
3. Node Creation: Each token is converted into an object implementing the Node interface.
4. DOM Construction: Parent-child relationships are linked into a tree structure.
5. Render Tree & Layout: The DOM combines with the CSSOM (CSS Object Model) to compute exact physical geometry (Reflow) before pixels are painted to the screen (Repaint).

3. The Node Type Hierarchy

In JavaScript, every item in the DOM tree inherits from the base EventTarget interface through Node:

• Node.ELEMENT_NODE (1): HTML tags like <div>, <p>, <button>.
• Node.TEXT_NODE (3): The actual text contained inside an element.
• Node.COMMENT_NODE (8): HTML comments <!-- comment -->.
• Node.DOCUMENT_NODE (9): The top-level document owner.

// Inspecting Node Types and Tree Properties
console.log(document.nodeType); // 9 (DOCUMENT_NODE)
console.log(document.body.nodeType); // 1 (ELEMENT_NODE)

// Traversing relationships
const body = document.body;
console.log(body.parentNode); // <html>
console.log(body.children); // HTMLCollection of direct element tags
console.log(body.childNodes); // NodeList including text/whitespace nodes!

// Checking root objects
console.log(window.document === document); // true
// 'window' is the global tab context; 'document' is the DOM root

Before JavaScript can modify the content, style, or structure of a web page, it must obtain a direct reference to the corresponding DOM element node in memory. Modern JavaScript provides fast, flexible selector query engines and intuitive mutation APIs.

1. Modern Selection APIs

2. Security & Performance: textContent vs. innerHTML

• textContent (Recommended): Sets or retrieves raw text. It treats input literally and does NOT parse HTML tags. It is 100% immune to Cross-Site Scripting (XSS) injections and executes much faster.
• innerHTML (Dangerous if Unsanitized): Forces the browser to invoke its HTML parser, tokenize string tags, and build child DOM nodes. Inserting untrusted user input via innerHTML enables malicious script injection (XSS).
• innerText: Aware of rendered styling. It triggers a layout reflow to ignore hidden elements (display: none), making it slower than textContent.

3. Manipulating Classes & Attributes

Always manipulate styling via CSS classes rather than inline styles. The classList API provides clean utility methods:

• el.classList.add("btn-primary"): Adds one or more classes.
• el.classList.remove("btn-dimmed"): Removes class without affecting others.
• el.classList.toggle("active"): Toggles class existence (returns boolean).
• el.classList.contains("loading"): Checks membership.

// 1. Safe Selection & Content Modification
const banner = document.querySelector("#hero-banner");
banner.textContent = "Welcome to ReadyToGo!"; // Safe against XSS!

// 2. ClassList manipulation
banner.classList.add("featured", "glow");
banner.classList.toggle("dark-mode");

// 3. Attribute & Data-Attributes
banner.setAttribute("role", "alert");
banner.dataset.userId = "9401"; // Sets data-user-id="9401"
console.log(banner.dataset.userId); // "9401"

// 4. Batch Insertion with DocumentFragment (Prevents layout thrashing!)
const fragment = document.createDocumentFragment();
for (let i = 1; i <= 3; i++) {
  const item = document.createElement("li");
  item.textContent = "Item #" + i;
  fragment.appendChild(item);
}
document.querySelector("#item-list").appendChild(fragment); // Single reflow!

An event listener is a callback function configured to execute whenever a specific user action (click, keypress, mouse movement) or browser lifecycle event (DOM ready, resize, scroll) occurs on a target DOM element.

1. Anatomy of addEventListener

The standard method to register an event handler is element.addEventListener(type, listener, options):

• type: Event identifier string (e.g. "click", "input", "keydown", "submit").
• listener: The callback function invoked when the event triggers, supplied with the synthetic Event object.
• options (Object): Advanced configuration flags:
  • { once: true }: Automatically unbinds the listener after firing once.
  • { passive: true }: Asserts that the listener will NEVER call e.preventDefault(), allowing the browser to scroll smoothly without waiting for JavaScript execution.
  • { capture: true }: Handles the event during the downward capturing phase rather than the bubbling phase.

2. The Event Object: target vs. currentTarget

A frequent technical interview question tests the difference between event.target and event.currentTarget:

• event.target: The innermost element where the interaction physically occurred (e.g., an icon inside a button).
• event.currentTarget: The element to which the event listener was explicitly attached (e.g., the parent button).

3. Preventing Memory Leaks with removeEventListener

To remove a listener with removeEventListener, you must pass the exact same function reference. Passing an anonymous inline arrow function will silently fail because each inline function creates a distinct object in memory!

const btn = document.querySelector("#action-btn");

// Named handler reference (required for clean removal)
function handleClick(event) {
  console.log("Event Type:", event.type);
  console.log("Physical Target:", event.target);
  console.log("Listener Owner:", event.currentTarget);
}

// 1. Attaching with options:
btn.addEventListener("click", handleClick, { once: false });

// 2. Removing listener cleanly (Prevents SPA memory leaks):
btn.removeEventListener("click", handleClick);

// 3. High-Performance Scroll Listener with passive: true
window.addEventListener("scroll", () => {
  console.log("Y Offset:", window.scrollY);
}, { passive: true }); // Guarantees 60fps smooth scrolling!

// 4. Form Submit & preventDefault
const form = document.querySelector("#auth-form");
form.addEventListener("submit", (e) => {
  e.preventDefault(); // Cancels browser page reload!
  const data = new FormData(form);
  console.log("Submitting asynchronously:", Object.fromEntries(data));
});

When an event occurs on a nested element, it does not execute in isolation on that single node. Standard DOM events travel through three consecutive propagation phases across the entire document tree.

1. The Three Propagation Phases

1. Capturing Phase (Trickling): The event starts at the window object, travels through document, <html>, <body>, and down the ancestor hierarchy toward the target. Handlers registered with { capture: true } fire during this phase.
2. Target Phase: The event reaches the exact element where the user initiated interaction. Handlers attached directly to this element run.
3. Bubbling Phase (Default): The event triggers handlers on the target, then reverses direction and bubbles upward through every parent ancestor all the way back to window. Standard addEventListener listens in this phase.

2. Stopping Propagation

• event.stopPropagation(): Prevents the event from bubbling further up to ancestor nodes. However, other listeners attached to the same element will still execute.
• event.stopImmediatePropagation(): Halts propagation to parent elements AND immediately cancels any remaining sibling listeners registered on the current element.

3. The Event Delegation Pattern (Top Interview Pattern)

Instead of attaching 1,000 separate event listeners to 1,000 table rows or list items, Event Delegation attaches a single listener to their common parent container. Because events bubble upward, the parent catches all child clicks. By inspecting e.target.closest(selector), the parent executes the appropriate logic.

Two Core Advantages:

• Huge Memory Savings: Only 1 function reference in memory instead of thousands.
• Dynamic Elements Work Instantly: New items added to the list via JavaScript or AJAX immediately respond to clicks without needing new listeners attached!

// Event Delegation on a dynamic list:
const todoList = document.querySelector("#todo-list");

todoList.addEventListener("click", (event) => {
  // Find if click originated inside a delete button:
  const deleteBtn = event.target.closest(".delete-btn");
  if (!deleteBtn) return; // Ignore clicks elsewhere inside the list

  // Access data attribute from the clicked item:
  const taskId = deleteBtn.dataset.id;
  console.log("Deleting task with ID:", taskId);

  // Remove the parent list item from DOM:
  const listItem = deleteBtn.closest("li");
  if (listItem) listItem.remove();

  // Stop bubbling to higher ancestors:
  event.stopPropagation();
});