DOM and Events: Make Your Web Pages Interactive with JavaScript
DOM and Events is an intermediate-level course of 5 lessons (about 3 h 30 min), with 15 exercises and 15 quiz questions. Prerequisites: HTML Fundamentals, JavaScript Fundamentals. Exercises run in the browser, with nothing to install.
- Front-end
- Intermediate
- 5 lessons
- 3 h 30 min
- 15 exercises
- Exercises run in the browser
The course in brief
This course bridges the JavaScript language and the web page. You will learn to select and modify elements safely, react to user actions, handle events efficiently through delegation, then structure a small application around a state, a render function, and local storage. The final project is a complete, accessible, persistent to-do list or shopping cart.
What you will be able to do
- Select and traverse DOM elements with CSS selectors
- Modify content, classes, and attributes, and create elements without XSS vulnerabilities
- React to click, input, keyboard, and form submission events
- Manage dynamic lists with event delegation
- Read and validate a form accessibly
- Structure an interface with a state, a render, and localStorage persistence
Syllabus: 5 lessons
- Explain what the DOM is and how it relates to HTML
- Load a script at the right time (defer, type="module")
- Select elements with querySelector and querySelectorAll
- 02
Modifying the DOM: Content, Classes, Attributes, and Creating Elements
- Modify the text, classes, and attributes of an element
- Create, insert, and remove elements
- Avoid XSS vulnerabilities by distinguishing textContent from innerHTML
Modifying the DOMCreating elementsPreventing XSS vulnerabilities
- 03
Listening to Events
- React to user actions with addEventListener
- Use the event object (target, key, preventDefault)
- Choose the right event: click, input, change, submit, keydown
- 04
Event Propagation and Delegation
- Understand event propagation (bubbling)
- Listen to an entire list with a single handler (delegation)
- Identify the relevant element with closest and data-* attributes
- 05
Forms, Interface State, and Local Storage
- Read a form with FormData and validate it in JavaScript
- Organize an interface around a single state and a render function
- Save the state in localStorage
Final project
Shareable, Persistent Shopping List App
Build a shopping list in HTML, CSS, and JavaScript without any library: adding items through a validated form (required name, quantity from 1 to 99, category), checking/unchecking, deleting, filtering by instant search and by category, remaining-items counter, persistence in localStorage. The code follows the state + render pattern with event delegation.
Deliverables
- Semantic, accessible index.html, style.css, app.js loaded with type="module"
- A logique.js module of pure functions (validation, reducer, filters) and its node:assert tests
- A short note explaining the state / actions / render organization
Assessment criteria
- No user data inserted with innerHTML
- A single delegated listener for the actions on items
- Single state, rendering derived from the state, no direct mutation of the state
- Form validated with accessible messages (aria-describedby, aria-invalid, aria-live)
- Robust persistence: read-back protected by try/catch, versioned key
- Fully usable with the keyboard, with real buttons
Frequently asked questions
What are the prerequisites for learning DOM manipulation?
You need the basics of HTML (HTML Fundamentals course) and of the JavaScript language: variables, functions, arrays, and objects (JavaScript Fundamentals course).
Should I learn the DOM before React or another framework?
Yes. Frameworks automate DOM updates, but rely on the same concepts: events, propagation, forms, state, and rendering. Understanding them makes learning React much easier.
Why avoid innerHTML?
innerHTML interprets HTML: inserting user-entered data into it can run malicious code (XSS vulnerability). The course shows how to use textContent, createElement, and escaping.
Can I store login data in localStorage?
No. localStorage is readable by any script on the page; it suits preferences, a draft, or a guest cart, not passwords or authentication tokens.
This course, told for your job
Say what you want to be able to do: “DOM and Events” takes its place in your path, with examples from your field. The concepts stay those of the course.