DOM and Events

What you will learn

• DOM queries and traversal
• Changing the page safely
• Events and delegation
• Forms and validation with JavaScript
• Accessible interactive components

Lessons

1. 1

   The DOM Tree

   window, document and navigator, the tree of nodes and how to walk it, querySelector, querySelectorAll and getElementById, static NodeLists and live collections, and when a script can see the page: defer and DOMContentLoaded.

   11 exercises

2. 2

   Changing the Page

   textContent and innerHTML and why user data in innerHTML is XSS, creating, appending, removing and replacing elements, attributes, properties and dataset, classList instead of inline styles, and rendering a list from an array with a template.

   10 exercises

3. 3

   Events

   addEventListener and handler properties, why inline onclick is avoided, the event object, removing listeners and once, bubbling and capture, target and currentTarget, event delegation, and preventDefault versus stopPropagation.

   12 exercises

4. 4

   Forms with JavaScript

   Handling submit, reading fields with FormData, the Constraint Validation API with checkValidity and setCustomValidity, inline errors with aria-invalid and aria-describedby, input versus change, and a debounced live search.

   10 exercises

5. 5

   Accessible Interactive Components

   A disclosure with aria-expanded, a modal dialog with showModal that returns focus, tabs with roving tabindex and arrow keys, live region announcements, and events that work for mouse, touch and keyboard alike.

   12 exercises

6. 6

   Putting It Together

   Four small apps built from everything in the course: a todo list with delegation and filters, an accessible confirm dialog, a validated signup form with inline errors, and a live filtered list.

   8 exercises

How you practice

You practice in the browser and every exercise gives you feedback right away. This course uses these formats:

• Code exercise: 22
• Fix the bug: 18
• Predict the output: 9
• Fill in the blank: 5
• Multiple choice: 4
• Type the answer: 3
• Spot the bug: 1
• Select all that apply: 1