DOM manipulation and events — JavaScript (ES5 → ES2025) & TypeScript Basics

11. DOM manipulation and events

Basic★ Must knowLesson 11 of 16

const list = document.querySelector("#orders");
const items = document.querySelectorAll(".order");      // static NodeList

const li = document.createElement("li");
li.textContent = "Order #42";                            // safe — no HTML parsing (prevents XSS)
li.classList.add("order", "new");
li.dataset.id = "42";                                    // data-id="42"
list.append(li);

// Event handling
button.addEventListener("click", e => {
  e.preventDefault();                                    // stop default action (form submit, link navigation)
  e.stopPropagation();                                   // stop bubbling
}, { once: true });

// Event delegation — one listener for many (and future) children
list.addEventListener("click", e => {
  const item = e.target.closest(".order");
  if (item) openOrder(item.dataset.id);
});

Event propagation phases: capture (window → target) → target → bubble (target → window). Listeners run in the bubble phase by default ({ capture: true } for capture). e.target = element clicked; e.currentTarget = element the listener is on.

Performance: batch DOM writes (DocumentFragment, append(...nodes)), avoid layout thrashing (reading offsetHeight after writes in a loop), use requestAnimationFrame for visual updates.