DOM and events

What you'll learn

• What the DOM actually is — the tree the browser builds from your HTML
• How to find elements: querySelector, querySelectorAll, closest, matches
• Reading and changing content safely: textContent vs innerHTML, attributes vs properties
• Creating, inserting, replacing, and removing nodes the modern way
• addEventListener, the event object, preventDefault, stopPropagation, capture vs bubble
• Event delegation — one listener that handles a whole list
• Forms from JavaScript: FormData, the submit event, validation events, dialog
• Focus, blur, tabindex, and the rules of keyboard navigation
• Announcing changes to screen readers with ARIA live regions
• Why innerHTML with user input is dangerous, and what to do instead

1. 01
   What the DOM actually is

   The tree the browser builds from your HTML. Nodes vs elements, and why your code touches one but talks about the other.
   12 min
2. 02
   Selecting and traversing

   querySelector, querySelectorAll, closest, matches. Walking up and across the tree without re-querying the whole document.
   14 min
3. 03
   Reading and changing the DOM

   textContent vs innerHTML vs innerText, attributes vs properties, the dataset shortcut.
   15 min
4. 04
   Creating and inserting

   createElement, append, prepend, replaceChildren, insertAdjacentHTML — the modern set, in their happy paths.
   13 min
5. 05
   Events

   addEventListener, the event object, preventDefault, stopPropagation, capture vs bubble.
   17 min
6. 06
   Event delegation

   One listener for a thousand items. The pattern that makes long lists cheap and dynamic content easy.
   13 min
7. 07
   Forms from JavaScript

   Reading values with FormData, the submit event, validation events, and the dialog element from JS.
   16 min
8. 08
   Keyboard and focus

   focus and blur, tabindex, focus traps, and the rules of keyboard navigation people don't get told.
   15 min
9. 09
   Accessibility from JavaScript

   ARIA live regions, announcing changes, when to update aria-* attributes, and what not to ARIA.
   14 min
10. 10
    Sanitization and the XSS threat model

    Why innerHTML with user data is dangerous, what an XSS attack actually does, and the safe alternatives.
    15 min