Introduction : comprendre le DOM
Le DOM, ou modèle d’objet du document, est la représentation de la page HTML que le navigateur met à disposition de JavaScript. Il permet de retrouver un élément, de lire son contenu, de modifier son apparence ou de réagir à une interaction. Pendant ces deux jours, vous apprendrez à manipuler cette structure avec des exemples proches de situations professionnelles : formulaire de contact, menu de navigation, liste de tâches ou message de confirmation.
La formation alterne explications, démonstrations et exercices guidés. Vous développerez progressivement une petite interface interactive et découvrirez les bonnes habitudes qui rendent le code plus lisible, prévisible et facile à maintenir.
Module 1 : explorer la structure de la page
Du HTML à l’arbre DOM
Vous apprendrez comment le navigateur transforme le HTML en éléments reliés entre eux. Nous distinguerons les éléments, les attributs, le texte et les relations parent-enfant. Cette représentation vous aidera à comprendre pourquoi un script peut modifier une page après son chargement, et comment le navigateur retrouve les éléments concernés.
Sélectionner les bons éléments
Vous utiliserez querySelector et querySelectorAll pour cibler des éléments avec des sélecteurs CSS. Nous aborderons aussi les résultats possibles d’une recherche : élément trouvé, liste d’éléments ou absence de correspondance. Par exemple, vous pourrez retrouver le bouton d’envoi d’un formulaire ou toutes les lignes d’une liste.
Exercice pratique : dans une page de profil, sélectionner le titre, le paragraphe d’introduction et les liens de navigation, puis vérifier dans la console que les éléments attendus ont bien été trouvés.
Module 2 : lire et modifier le contenu
Mettre à jour texte et attributs
Vous apprendrez à lire et modifier le texte d’un élément avec des propriétés adaptées, à gérer les attributs comme href ou disabled, et à modifier le contenu d’un champ de formulaire. Nous comparerons les usages de textContent et innerHTML, afin de choisir une méthode appropriée et d’éviter d’insérer du HTML non maîtrisé.
Modifier les classes et les styles
Plutôt que d’accumuler des styles directement dans le script, vous apprendrez à ajouter, retirer ou basculer des classes avec classList. Cette méthode permet de séparer le comportement JavaScript de la présentation CSS. Exemple : afficher un message d’erreur ou mettre en évidence un champ qui doit être corrigé.
Exercice pratique : créer un panneau de notification dont le texte, la classe visuelle et le lien d’action changent en fonction d’un choix effectué par l’utilisateur.
Module 3 : créer et organiser des éléments
Construire une interface avec JavaScript
Vous verrez comment créer un élément avec document.createElement, lui donner du contenu et des attributs, puis l’insérer à l’endroit souhaité. Nous utiliserons notamment append et prepend pour compléter une liste sans réécrire toute la page. Vous apprendrez également à retirer un élément et à parcourir plusieurs résultats.
Garder un code lisible
Une interface qui évolue doit rester compréhensible. Nous organiserons les étapes de création dans des fonctions courtes et donnerons des noms explicites aux variables. Nous examinerons aussi comment éviter les doublons, par exemple en créant une fonction qui fabrique une ligne de liste à partir de données.
Exercice pratique : construire une liste de ressources à partir d’un petit tableau JavaScript. Chaque entrée affiche un titre et un lien, et un bouton permet de retirer une ressource.
Module 4 : réagir aux actions des utilisateurs
Écouter les événements
Vous apprendrez à utiliser addEventListener pour réagir à un clic, à la saisie dans un champ ou à l’envoi d’un formulaire. Nous étudierons l’objet événement et les situations où preventDefault est utile, par exemple pour contrôler la validation d’un formulaire avant son envoi.
Relier interaction et retour visuel
Une interaction doit produire un résultat compréhensible. Vous découvrirez comment afficher une confirmation, signaler une erreur ou mettre à jour un compteur. Nous évoquerons aussi la délégation d’événements : une approche pratique lorsqu’une liste contient des éléments ajoutés après le chargement de la page.
Exercice pratique : mettre en place un formulaire qui vérifie qu’un nom et une adresse e-mail sont renseignés, affiche un message adapté et empêche l’envoi si les informations sont incomplètes.
Module 5 : fiabiliser et tester ses manipulations
Anticiper les erreurs courantes
Vous apprendrez à vérifier qu’un élément existe avant de le modifier et à reconnaître les erreurs fréquentes : sélecteur incorrect, script exécuté trop tôt ou événement attaché au mauvais élément. Nous verrons comment utiliser la console du navigateur pour inspecter le DOM et suivre l’exécution du code.
Adopter de bonnes pratiques
Nous aborderons le chargement du script, la séparation entre HTML, CSS et JavaScript, ainsi que l’importance de préserver une interface accessible. Un bouton doit rester un véritable bouton, les changements d’état doivent être perceptibles et les messages doivent être compréhensibles. Vous apprendrez enfin à tester les cas normaux et les cas limites, comme une liste vide ou un champ laissé blanc.
Exercice pratique : reprendre une interface réalisée pendant la formation, tester plusieurs scénarios, corriger les erreurs détectées et améliorer les retours visuels et les libellés.
À retenir
À la fin de la formation, vous saurez sélectionner des éléments du DOM, modifier leur contenu et leurs classes, en créer de nouveaux et associer des actions aux événements. Vous repartirez avec une méthode pour construire et tester de petites interfaces interactives en JavaScript, tout en gardant un code organisé.
Pour aller plus loin
Vous pourrez appliquer ces acquis à des composants plus complets : menus déroulants, filtres de résultats, fenêtres de dialogue ou formulaires à plusieurs étapes. Pour progresser, entraînez-vous à améliorer une page existante, puis découvrez comment ces mêmes principes s’intègrent dans les bibliothèques et frameworks frontend.
