Web foundations lab

DOM and events

Selectors, event listeners, class changes, text updates, and UI behavior.

Track progress 0/120 lessons 0/18 missions 12 courses

Continue View profile

01 DOM and events DOM and events: Query one element

Build query one element inside the persistent Learning journal: Query one element starter project.

Admin 7 minutes · querySelector, addEventListener, classList, textContent 02 DOM and events DOM and events: Query a button

Build query a button inside the persistent Product changelog: Query a button starter project.

Admin 7 minutes · querySelector, addEventListener, classList, textContent 03 DOM and events DOM and events: Click listeners

Build click listeners inside the persistent Workshop signup: Click listeners starter project.

Admin 7 minutes · querySelector, addEventListener, classList, textContent 04 DOM and events DOM and events: Text updates

Build text updates inside the persistent Incident summary: Text updates starter project.

Admin Checkpoint 10 minutes · querySelector, addEventListener, classList, textContent 05 DOM and events DOM and events: Class additions

Build class additions inside the persistent Community workshop: Class additions starter project.

Admin 7 minutes · querySelector, addEventListener, classList, textContent 06 DOM and events DOM and events: Class toggles

Build class toggles inside the persistent Neighborhood library: Class toggles starter project.

Admin 7 minutes · querySelector, addEventListener, classList, textContent 07 DOM and events DOM and events: Data attributes

Build data attributes inside the persistent Volunteer check-in: Data attributes starter project.

Admin 7 minutes · querySelector, addEventListener, classList, textContent 08 DOM and events DOM and events: Keyboard-friendly buttons

Build keyboard-friendly buttons inside the persistent Local event guide: Keyboard-friendly buttons starter project.

Admin 10 minutes · querySelector, addEventListener, classList, textContent 09 DOM and events DOM and events: Status announcements

Build status announcements inside the persistent Study group board: Status announcements starter project.

Admin 7 minutes · querySelector, addEventListener, classList, textContent 10 DOM and events DOM and events: DOM behavior checkpoint

Build dom behavior checkpoint inside the persistent Public resource hub: DOM behavior checkpoint starter project.

Admin 7 minutes · querySelector, addEventListener, classList, textContent

Save progress

Keep learning across sessions.

Create a free account to sync completed lessons, XP, streaks, course status, and your next lesson across sessions.

Checking account status...

Progress sync is idle.

0XP New learnerrank 0day streak 0best streak 0daily streak 0lessons 0courses 0missions 0tasks Noverified

Continue

Progress sync stores completion IDs, scores, streaks, badges, and game settings. Terminal contents, editor snippets, lab scratch, email, and real names are never published on leaderboards or share cards.

Snippet coverage

Patterns you will practice here.

addEventListener

Describe event-driven behavior in the simulated JavaScript lab.

querySelector

Select a simulated element shape without running real JavaScript.