DOM Manipulation and Events
The DOM Manipulation and Events domain tests how you select and modify nodes, how events propagate, and how to write handlers that stay correct as content changes.
Selecting and changing
querySelector and querySelectorAll take CSS selectors and return a static NodeList. getElementsByClassName and getElementsByTagName return live HTMLCollections that update as the document changes - a trap inside loops. Create nodes with document.createElement, insert with append, prepend, before, after or replaceWith, and write text with textContent. innerHTML parses markup and can execute injected content; textContent never does.
Events
Events travel capture → target → bubble. addEventListener(type, fn, { capture, once, passive }) defaults to the bubble phase. preventDefault() cancels the default action such as link navigation or form submission; stopPropagation() halts travel to listeners on other elements. Inside a handler, event.target is the element that fired the event and event.currentTarget is the element the listener is attached to.
Delegation
Attach one listener to a stable ancestor and resolve the real target with event.target.closest('li'). This keeps working for elements added later and uses less memory than per-item listeners.
Worked example
list.addEventListener('click', e => { const li = e.target.closest('li[data-id]'); if (!li) return; select(li.dataset.id); }); - delegation survives re-rendering, and the guard handles clicks on padding or a nested icon.
Timing
DOMContentLoaded fires after HTML parsing; load also waits for images and stylesheets. <script defer> runs after parsing, in document order; <script type="module"> is deferred by default.
Traps
Using innerHTML with user data, expecting querySelectorAll to stay live, and forgetting preventDefault so the page reloads on submit.