JavaScript DOM Advanced

Build interactive UIs with advanced DOM patterns.

delegationtraversalperformance

Traversal
Dynamic Elements
Event Delegation
DocumentFragment Rendering
MutationObserver
DOM Performance Patterns
Interview Q&A
MCQ

DOM Traversal

Use parent-child-sibling APIs to move around node trees efficiently.

const item = document.querySelector(".item");
console.log(item.parentElement); // parent node
console.log(item.nextElementSibling); // next sibling

Create and Insert Elements

const li = document.createElement("li");
li.textContent = "New Item";
document.querySelector("#list").appendChild(li);

Related: DOM Basics, Events.

Event Delegation Pattern

document.querySelector("#list").addEventListener("click", (e) => {
  if (e.target.matches("li")) e.target.classList.toggle("active");
  // handles current + future list items
});

DocumentFragment for Batch Rendering

When adding many nodes, use DocumentFragment to reduce repeated reflow/repaint.

const list = document.querySelector("#users");
const fragment = document.createDocumentFragment();

["Asha", "Ravi", "John", "Priya"].forEach((name) => {
  const li = document.createElement("li");
  li.textContent = name;
  fragment.appendChild(li);
});

list.appendChild(fragment); // single DOM insert

Watch DOM Changes with MutationObserver

Use MutationObserver to react when nodes are added/removed or attributes change.

const target = document.querySelector("#feed");
const observer = new MutationObserver((mutations) => {
  mutations.forEach((m) => {
    if (m.type === "childList") {
      console.log("Child nodes changed");
    }
  });
});

observer.observe(target, { childList: true, subtree: true });

DOM Performance Patterns

Cache selectors instead of re-querying inside loops.
Batch reads and writes to avoid layout thrashing.
Use requestAnimationFrame for visual updates.
Prefer class toggles over multiple inline style writes.

// Bad: read/write repeatedly in loop
// Better: do one read phase, then one write phase
const cards = document.querySelectorAll(".card");
const heights = Array.from(cards).map((c) => c.offsetHeight); // read
requestAnimationFrame(() => {
  cards.forEach((c, i) => c.style.minHeight = `${heights[i]}px`); // write
});