DOM et événements : rendre vos pages web interactives en JavaScript
DOM et événements est un cours de niveau intermédiaire de 5 leçons (environ 3 h 30), avec 15 exercices et 15 questions de quiz. Prérequis : HTML fondamentaux, JavaScript fondamentaux. Les exercices s'exécutent dans le navigateur, sans installation.
- Front-end
- Intermédiaire
- 5 leçons
- 3 h 30
- 15 exercices
- Exercices exécutés dans le navigateur
Le cours en bref
Ce cours fait le lien entre le langage JavaScript et la page web. Vous apprendrez à sélectionner et modifier des éléments en toute sécurité, à réagir aux actions de l'utilisateur, à gérer efficacement les événements par délégation, puis à structurer une petite application autour d'un état, d'une fonction de rendu et du stockage local. Le projet final est une liste de tâches ou un panier complet, accessible et persistant.
Ce que tu sauras faire
- Sélectionner et parcourir les éléments du DOM avec les sélecteurs CSS
- Modifier contenu, classes et attributs, et créer des éléments sans faille XSS
- Réagir aux événements clic, saisie, clavier et envoi de formulaire
- Gérer des listes dynamiques avec la délégation d'événements
- Lire et valider un formulaire de façon accessible
- Structurer une interface avec un état, un rendu et la persistance localStorage
Programme des 5 leçons
- Expliquer ce qu'est le DOM et son lien avec le HTML
- Charger un script au bon moment (defer, type="module")
- Sélectionner des éléments avec querySelector et querySelectorAll
- 02
Modifier le DOM : contenu, classes, attributs et création d'éléments
- Modifier le texte, les classes et les attributs d'un élément
- Créer, insérer et supprimer des éléments
- Éviter les failles XSS en distinguant textContent et innerHTML
Modification du DOMCréation d'élémentsPrévention des failles XSS
- 03
Écouter les événements
- Réagir aux actions de l'utilisateur avec addEventListener
- Exploiter l'objet événement (target, key, preventDefault)
- Choisir le bon événement : click, input, change, submit, keydown
- 04
Propagation et délégation d'événements
- Comprendre la propagation (bouillonnement) des événements
- Écouter une liste entière avec un seul gestionnaire (délégation)
- Identifier l'élément concerné avec closest et les attributs data-*
- 05
Formulaires, état de l'interface et stockage local
- Lire un formulaire avec FormData et le valider en JavaScript
- Organiser une interface autour d'un état unique et d'une fonction de rendu
- Sauvegarder l'état dans localStorage
Projet final
Application de liste de courses partageable et persistante
Réalisez en HTML, CSS et JavaScript sans bibliothèque une liste de courses : ajout d'articles via un formulaire validé (nom obligatoire, quantité de 1 à 99, catégorie), cocher/décocher, supprimer, filtrer par recherche instantanée et par catégorie, compteur d'articles restants, persistance dans localStorage. Le code suit le motif état + rendu avec délégation d'événements.
Livrables
- index.html sémantique et accessible, style.css, app.js chargé en type="module"
- Un module logique.js de fonctions pures (validation, réducteur, filtres) et ses tests node:assert
- Une courte note expliquant l'organisation état / actions / rendu
Critères d'évaluation
- Aucune donnée utilisateur insérée avec innerHTML
- Un seul écouteur délégué pour les actions sur les articles
- État unique, rendu dérivé de l'état, aucune mutation directe de l'état
- Formulaire validé avec messages accessibles (aria-describedby, aria-invalid, aria-live)
- Persistance robuste : relecture protégée par try/catch, clé versionnée
- Utilisable entièrement au clavier, avec de vrais boutons
Questions fréquentes
Quels prérequis pour apprendre la manipulation du DOM ?
Il faut connaître les bases de HTML (cours HTML fondamentaux) et du langage JavaScript : variables, fonctions, tableaux et objets (cours JavaScript fondamentaux).
Faut-il apprendre le DOM avant React ou un autre framework ?
Oui. Les frameworks automatisent la mise à jour du DOM, mais reposent sur les mêmes notions : événements, propagation, formulaires, état et rendu. Les comprendre facilite énormément l'apprentissage de React.
Pourquoi éviter innerHTML ?
innerHTML interprète du HTML : y insérer une donnée saisie par un utilisateur peut exécuter du code malveillant (faille XSS). Le cours montre comment utiliser textContent, createElement et l'échappement.
Peut-on stocker des données de connexion dans localStorage ?
Non. localStorage est lisible par tout script de la page ; il convient pour des préférences, un brouillon ou un panier invité, pas pour des mots de passe ou des jetons d'authentification.
Ce cours, raconté pour ton métier
Dis ce que tu veux savoir faire : « DOM et événements » prend sa place dans ton parcours, avec des exemples de ton secteur. Les notions restent celles du cours.