DOM Manipulation

Updating the UI Without Killing Performance

Direct DOM manipulation is how JavaScript communicates with the page. But the DOM is slow — every change can trigger reflows and repaints.

Document Fragments

When adding multiple elements, use a DocumentFragment to batch insertions into a single DOM update instead of multiple individual ones.

Event Delegation

Instead of attaching event listeners to every child element, attach one to the parent and use event.target to determine which child was clicked. This is critical for dynamic lists.