DOM and events
Selectors, event listeners, class changes, text updates, and UI behavior.
What you will practice
Query one element; Query a button; Click listeners; Text updates.
Use the worked examples when needed, then test your understanding without them.
- 01DOM and events: Query one elementquerySelector returns the first matching element or null. Guard a lookup before updating an optional element.Practice
- 02DOM and events: Query a buttonA selector should identify the intended control rather than an unrelated first button.Practice
- 03DOM and events: Click listenersAn event listener registers behavior for a future event; pass a function rather than its return value.Practice
- 04DOM and events: Text updatestextContent inserts text rather than parsing HTML, making it the appropriate choice for a plain status message.Practice
- 05DOM and events: Class additionsclassList.add adds a class without replacing unrelated classes already on the element.Practice
- 06DOM and events: Class togglesclassList.toggle alternates membership unless given an explicit force boolean.Practice
- 07DOM and events: Data attributesdataset exposes data-* values as strings; data-lesson-id becomes dataset.lessonId.Practice
- 08DOM and events: Keyboard-friendly buttonsA native button already supports keyboard activation. A click listener can serve mouse, touch, and keyboard users.Practice
- 09DOM and events: Status announcementsUpdating an existing live region can communicate a status without moving focus away from the user.Practice
- 10DOM and events: DOM behavior checkpointA reliable interaction finds its elements, guards their absence, and makes one deliberate update in response to an event.Practice