Manipuler le DOM en JavaScript : afficher, modifier et écouter les actions de l’utilisateur

Une page HTML devient interactive lorsque JavaScript peut lire sa structure et la modifier pendant que l’utilisateur navigue. Cette structure porte un nom : le DOM, pour Document Object Model. Il représente les balises de la page sous forme d’objets que le navigateur peut manipuler.

Pour débuter, trois opérations suffisent dans la plupart des petits scripts : sélectionner un élément, changer son contenu ou son apparence, puis écouter une action comme un clic. La difficulté ne vient pas de la syntaxe seule, mais du moment où le script s’exécute et de la manière dont les éléments sont ciblés.

Le DOM transforme la page HTML en objets manipulables

Lorsque le navigateur charge un document, il construit une représentation arborescente de ses éléments. Une balise parent contient des balises enfants, elles-mêmes parfois rattachées à d’autres éléments. JavaScript peut parcourir cette arborescence et agir sur chaque nœud.

Dans une page contenant un titre, un paragraphe et un bouton, le DOM donne accès à ces éléments comme à des objets. Le script peut alors remplacer le texte du paragraphe, ajouter une classe CSS ou réagir lorsque le bouton est activé.

Cette séparation est utile : HTML décrit la structure, CSS définit la présentation et JavaScript gère les comportements. Un script DOM bien conçu ne reconstruit pas toute la page à chaque interaction. Il modifie uniquement ce qui doit l’être.

Sélectionner un élément sans dépendre d’un sélecteur fragile

Avant de modifier un élément, il faut le récupérer. La méthode la plus polyvalente est document.querySelector(), qui accepte les sélecteurs CSS habituels. Pour cibler un identifiant, on écrit par exemple document.querySelector(‘#message’). Pour une classe, le sélecteur devient document.querySelector(‘.carte’).

La méthode renvoie le premier élément correspondant. Si plusieurs éléments doivent être traités, utilisez document.querySelectorAll(‘.produit’). Le résultat est une collection sur laquelle il est possible d’itérer avec forEach.

Les identifiants sont pratiques pour un élément unique, tandis qu’une classe convient à un ensemble d’éléments partageant le même comportement. Évitez les sélecteurs qui dépendent d’une position, comme un parcours complexe de div imbriquées : une modification du HTML pourrait alors casser le script.

Vérifier qu’un élément existe avant de le modifier

Un sélecteur ne trouve pas toujours sa cible. La page peut utiliser un autre modèle HTML, le script peut être chargé sur un gabarit différent ou l’identifiant peut contenir une faute. Dans ce cas, la valeur renvoyée est null.

Une vérification simple évite une erreur d’exécution :

const titre = document.querySelector(‘#titre’);

if (titre) { titre.textContent = ‘Nouveau titre’; }

Cette précaution est particulièrement utile dans un site composé de plusieurs pages. Un fichier JavaScript commun peut être chargé partout, alors que certains éléments n’existent que sur une seule page.

Modifier le texte, les attributs et les classes CSS

Pour changer le texte visible, privilégiez textContent. Cette propriété remplace le contenu textuel sans interpréter ce qui ressemble à du HTML. Elle est donc adaptée lorsque la valeur provient d’un champ utilisateur ou d’une donnée externe.

Par exemple, après avoir sélectionné un paragraphe dans la variable message, message.textContent = ‘Votre demande a bien été enregistrée’ modifie son affichage immédiatement.

innerHTML permet d’insérer des balises, mais son usage demande davantage de prudence. Injecter directement une chaîne contenant une donnée non vérifiée peut créer une faille de type XSS. Pour afficher une information saisie par un utilisateur, textContent est le choix le plus sûr.

Les attributs HTML se lisent et se modifient avec getAttribute() et setAttribute(). La ligne image.setAttribute(‘alt’, ‘Illustration du produit’) met à jour le texte alternatif d’une image. Pour un attribut courant comme href, image.src ou input.value peuvent aussi être utilisés directement.

Utiliser classList plutôt que modifier la classe entière

Pour adapter l’apparence d’un élément, il vaut mieux ajouter une classe CSS que modifier des styles directement depuis JavaScript. La propriété classList fournit plusieurs méthodes utiles :

• add() ajoute une classe ;
• remove() la retire ;
• toggle() l’ajoute si elle est absente et la retire si elle existe ;
• contains() vérifie sa présence.

Si un bouton doit afficher ou masquer un panneau, une classe comme panneau-visible peut contrôler l’affichage dans la feuille CSS. JavaScript se contente alors de modifier l’état, tandis que CSS conserve la responsabilité de la présentation.

Attendre le bon moment pour exécuter le script

Un problème fréquent apparaît lorsque le script s’exécute avant que le HTML ciblé ne soit disponible. Si le fichier JavaScript est placé dans l’en-tête et lancé immédiatement, document.querySelector() peut ne rien trouver.

La solution la plus simple consiste à placer la balise script juste avant la fermeture du body. Le navigateur aura déjà analysé les éléments de la page lorsque le script commencera.

Une autre solution consiste à utiliser l’attribut defer sur la balise script. Le fichier est téléchargé pendant l’analyse du document, puis exécuté après sa construction. Cette approche convient bien aux scripts externes communs à plusieurs pages.

Il est également possible d’attendre l’événement DOMContentLoaded. Le code placé dans sa fonction de rappel ne s’exécute qu’une fois la structure HTML disponible. Cette méthode est pratique lorsque le placement du script ne peut pas être modifié.

Réagir aux clics avec addEventListener()

Pour rendre un élément interactif, utilisez addEventListener(). Cette méthode associe une fonction à un type d’événement sans remplacer les autres écouteurs déjà attachés.

Un exemple classique consiste à afficher un message après l’activation d’un bouton :

const bouton = document.querySelector(‘#afficher’);

const message = document.querySelector(‘#message’);

bouton.addEventListener(‘click’, function () { message.textContent = ‘Le bouton a été activé’; });

La fonction est exécutée uniquement lorsque l’événement click se produit. Le script ne bloque donc pas le chargement de la page et ne lance pas inutilement la modification avant l’action de l’utilisateur.

Un clic n’est pas le seul événement disponible. input convient à un champ pendant sa saisie, change à une modification validée, submit à l’envoi d’un formulaire et keydown à l’appui d’une touche. Le choix doit correspondre au moment où l’action doit être détectée.

Ne pas oublier les interactions au clavier

Un élément qui réagit uniquement à un événement de souris peut devenir difficile à utiliser au clavier. Pour une action principale, préférez un véritable bouton HTML plutôt qu’une div rendue cliquable avec JavaScript. Le navigateur fournit alors la gestion du focus et des interactions clavier attendues.

Dans un formulaire, utilisez aussi les éléments natifs avant d’ajouter un comportement personnalisé. JavaScript doit enrichir une interaction existante, pas supprimer les repères utiles aux personnes utilisant un clavier ou une technologie d’assistance.

Construire un petit composant : afficher et masquer un panneau

Voici une méthode complète, suffisamment simple pour être réutilisée dans un menu, une aide contextuelle ou une zone de détails. Le HTML contient un bouton et un panneau identifié. Le CSS définit une classe masquée, par exemple panneau-cache, qui rend le panneau invisible.

JavaScript sélectionne ensuite les deux éléments, écoute le clic et inverse la classe avec classList.toggle(‘panneau-cache’). Cette logique ne dépend pas du contenu du panneau : elle ne fait que gérer son état d’affichage.

Pour améliorer l’accessibilité, le bouton peut aussi recevoir un attribut aria-expanded. Après chaque clic, sa valeur doit correspondre à l’état réel du panneau : true lorsqu’il est visible et false lorsqu’il est masqué. Le texte du bouton peut également devenir « Masquer les détails » lorsque le panneau est ouvert.

Ce fonctionnement illustre une règle utile : une interaction fiable possède un état identifiable, une action clairement associée et un retour visible pour l’utilisateur. Modifier seulement une couleur sans indiquer ce qui a changé rend le composant plus difficile à comprendre.

Éviter les erreurs courantes dans un script DOM

Les premières difficultés sont souvent faciles à diagnostiquer si l’on sait où regarder. La console du navigateur signale notamment les erreurs de syntaxe et les tentatives de manipulation d’une valeur null.

• Le sélecteur ne correspond pas au HTML : vérifiez l’identifiant, les points devant les classes et les majuscules.
• Le script intervient trop tôt : utilisez defer, placez le script en bas du document ou attendez DOMContentLoaded.
• Le mauvais événement est choisi : submit concerne l’envoi d’un formulaire, tandis que input réagit à la saisie.
• Le contenu est injecté avec innerHTML sans contrôle : préférez textContent pour les données non fiables.
• Le comportement est dupliqué : vérifiez qu’un même fichier ou écouteur n’est pas chargé plusieurs fois.
• Le script modifie la présentation directement : créez une classe CSS lorsque le changement représente un état visuel.

Pour isoler un problème, ajoutez temporairement un console.log après la sélection d’un élément. Si la console affiche null, le problème se situe avant la modification : mauvais sélecteur, mauvais moment d’exécution ou élément absent.

Une méthode simple pour progresser sans bibliothèque

Pour chaque interaction, décrivez d’abord le comportement en une phrase : « Lorsque l’utilisateur active ce bouton, ce panneau devient visible ». Identifiez ensuite la cible, l’événement, la modification attendue et l’état final.

1. Repérez l’élément à déclencher et l’élément à modifier.
2. Ajoutez des identifiants ou des classes aux endroits qui doivent être ciblés.
3. Sélectionnez-les avec querySelector().
4. Vérifiez que les sélections ne renvoient pas null.
5. Associez un écouteur avec addEventListener().
6. Modifiez le texte, l’attribut ou la classe nécessaire.
7. Testez le clavier, plusieurs clics et les cas où l’élément n’existe pas.

Cette progression évite d’introduire trop tôt un framework ou une bibliothèque. Une fois ces mécanismes compris, vous retrouverez les mêmes principes dans de nombreuses interfaces plus complexes : sélectionner un état, écouter une action et mettre à jour l’affichage.

Le DOM est donc moins une collection de recettes qu’un modèle mental pour relier structure et comportement. Commencez par une interaction visible, gardez les responsabilités séparées entre HTML, CSS et JavaScript, puis contrôlez systématiquement les éléments sélectionnés et les données affichées.