Maitriser la Programmation Javascript
Maitriser la Programmation Javascript

Maitriser la Programmation Javascript: Manipulation du DOM et Événements Utilisateur

Introduction

Dans le monde du développement web moderne, JavaScript est le langage incontournable pour créer des expériences utilisateur dynamiques et interactives. Au cœur de cette interactivité se trouvent deux concepts fondamentaux : la Manipulation du DOM et la Gestion des Événements Utilisateur.

Le Document Object Model (DOM) est l'interface par laquelle JavaScript peut "voir" et "modifier" la structure, le contenu et le style d'une page web. Imaginez le DOM comme la carte routière détaillée de votre page HTML, permettant à JavaScript de naviguer et d'interagir avec chaque élément.

Les Événements Utilisateur, quant à eux, sont les signaux envoyés par le navigateur en réponse aux actions de l'utilisateur (clics, saisies au clavier, mouvements de souris) ou aux changements d'état de la page (chargement, redimensionnement). La capacité de réagir à ces événements est ce qui transforme une page statique en une application web vivante et réactive.

Dans cette leçon détaillée, nous allons explorer en profondeur ces deux piliers de la programmation JavaScript côté client. Vous apprendrez à identifier et à modifier les éléments de votre page, à créer de nouveaux contenus à la volée, et surtout, à rendre votre application interactive en répondant aux actions de vos utilisateurs.

1. Comprendre le DOM (Document Object Model)

Qu'est-ce que le DOM ?

Le DOM est une interface de programmation pour les documents HTML et XML. Il représente la page sous forme d'une structure arborescente (un arbre de nœuds), où chaque nœud représente une partie du document (un élément HTML, un attribut, un texte, etc.).

Lorsque votre navigateur charge une page HTML, il analyse le code et construit cette représentation arborescente en mémoire. JavaScript peut alors interagir avec ce "modèle objet" pour :

  • Accéder aux éléments (par exemple, un paragraphe, un bouton, une image).
  • Modifier le contenu (changer le texte d'un paragraphe).
  • Changer les attributs (modifier la source d'une image, la destination d'un lien).
  • Modifier le style (changer la couleur de fond d'un élément).
  • Ajouter ou supprimer des éléments.

En somme, le DOM est le pont entre votre code JavaScript et le contenu visible de votre page web.

La Structure Arborescente du DOM

Visualisons la structure du DOM :

<!DOCTYPE html>
<html>
<head>
    <title>Ma Page</title>
</head>
<body>
    <h1 id="titre">Bienvenue</h1>
    <p class="texte">Ceci est un paragraphe.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</body>
</html>

Cette structure HTML est transformée en un arbre de nœuds dans le DOM :

  • Le document est la racine de l'arbre.
  • <html> est l'enfant du document.
  • <head> et <body> sont les enfants de <html>.
  • <h1 id="titre"> est un enfant de <body>, etc.

Chaque élément, chaque morceau de texte, chaque attribut est un nœud dans cet arbre. Il existe différents types de nœuds :

  • Nœuds d'éléments : Représentent les balises HTML (ex: <h1>, <p>).
  • Nœuds de texte : Représentent le contenu textuel à l'intérieur des balises (ex: "Bienvenue", "Ceci est un paragraphe.").
  • Nœuds d'attributs : Représentent les attributs des balises (ex: id="titre", class="texte").
  • Le nœud document : La racine de l'arbre, représentant l'ensemble de la page HTML.

Accéder aux Éléments du DOM

Pour manipuler un élément, la première étape est de le sélectionner. JavaScript offre plusieurs méthodes pour cela :

  1. document.getElementById('idDuElement')

    • Sélectionne le premier élément dont l'attribut id correspond à la valeur spécifiée.
    • Retourne un seul élément ou null s'il n'est pas trouvé.
    • L'ID doit être unique dans le document.

  2. document.getElementsByClassName('nomDeClasse')

    • Sélectionne tous les éléments ayant la classe spécifiée.
    • Retourne une HTMLCollection (similaire à un tableau, mais pas un vrai tableau JavaScript), que vous pouvez itérer.

  3. document.getElementsByTagName('nomDeBalise')

    • Sélectionne tous les éléments ayant la balise spécifiée (ex: 'div', 'p', 'a').
    • Retourne une HTMLCollection.

  4. document.querySelector('sélecteurCSS')

    • La méthode la plus polyvalente et recommandée pour la plupart des cas.
    • Prend un sélecteur CSS en argument (ID, classe, balise, attribut, etc.).
    • Retourne le premier élément qui correspond au sélecteur, ou null.

  5. document.querySelectorAll('sélecteurCSS')

    • Similaire à querySelector, mais retourne tous les éléments qui correspondent au sélecteur CSS.
    • Retourne une NodeList (qui peut être facilement convertie en tableau ou itérée avec forEach).

Exemple de sélection d'éléments :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sélection DOM</title>
</head>
<body>
    <h1 id="titrePrincipal">Bienvenue sur la page</h1>
    <p class="description">Ceci est un paragraphe introductif.</p>
    <p class="description">Un second paragraphe d'exemple.</p>
    <ul>
        <li>Item A</li>
        <li class="liste-item">Item B</li>
        <li class="liste-item">Item C</li>
    </ul>

    <script>
        // 1. Sélection par ID
        const titre = document.getElementById('titrePrincipal');
        console.log("Titre par ID:", titre); // Affiche l'élément h1

        // 2. Sélection par classe (retourne une collection)
        const descriptions = document.getElementsByClassName('description');
        console.log("Paragraphes par classe:", descriptions); // Affiche une HTMLCollection
        console.log("Premier paragraphe par classe:", descriptions[0]); // Accéder au premier élément

        // 3. Sélection par balise (retourne une collection)
        const tousLesLi = document.getElementsByTagName('li');
        console.log("Tous les LI:", tousLesLi); // Affiche une HTMLCollection de tous les li

        // 4. Sélection avec querySelector (le premier qui matche)
        const premierParagraphe = document.querySelector('p'); // Sélectionne le premier <p>
        console.log("Premier paragraphe avec querySelector:", premierParagraphe);

        const itemB = document.querySelector('.liste-item'); // Sélectionne le premier élément avec la classe 'liste-item'
        console.log("Premier item de liste avec classe:", itemB);

        // 5. Sélection avec querySelectorAll (tous ceux qui matchent)
        const tousLesItemsDeListe = document.querySelectorAll('.liste-item');
        console.log("Tous les items de liste avec classe:", tousLesItemsDeListe); // Affiche une NodeList

        // Itérer sur une NodeList ou HTMLCollection
        tousLesItemsDeListe.forEach(item => {
            console.log("Contenu d'un item de liste:", item.textContent);
        });

        // Convertir une HTMLCollection en tableau (si nécessaire)
        const descriptionsArray = Array.from(descriptions);
        descriptionsArray.forEach(desc => {
            console.log("Description:", desc.textContent);
        });
    </script>
</body>
</html>

Explication du code : Ce bloc de code HTML et JavaScript illustre les différentes méthodes de sélection d'éléments du DOM.

  • document.getElementById('titrePrincipal') cible un élément unique par son identifiant.
  • document.getElementsByClassName('description') et document.getElementsByTagName('li') retournent des collections d'éléments, qui peuvent être parcourues comme des tableaux (ou converties en tableaux pour utiliser des méthodes comme forEach).
  • document.querySelector('p') sélectionne le premier paragraphe trouvé dans le document, tandis que document.querySelector('.liste-item') sélectionne le premier élément avec la classe liste-item.
  • document.querySelectorAll('.liste-item') est très puissant car il permet de récupérer tous les éléments correspondant au sélecteur CSS fourni, retournant une NodeList sur laquelle on peut directement utiliser forEach.

2. Manipuler les Éléments du DOM

Une fois que vous avez sélectionné un ou plusieurs éléments, vous pouvez les manipuler de diverses manières.

Modifier le Contenu

Deux propriétés principales sont utilisées pour modifier le contenu textuel ou HTML d'un élément :

  1. element.textContent

    • Définit ou retourne le contenu textuel de l'élément, en ignorant toute balise HTML.
    • Sécurisé : Empêche l'injection de code HTML malveillant (attaques XSS).

  2. element.innerHTML

    • Définit ou retourne le contenu HTML de l'élément.
    • Permet d'insérer des balises HTML.
    • Dangereux si vous insérez du contenu provenant de l'utilisateur sans le nettoyer, car cela peut ouvrir une faille de sécurité (injection de script).

Exemple de modification de contenu :

const titre = document.getElementById('titrePrincipal');
const premierParagraphe = document.querySelector('.description');

// Modifier le texte
titre.textContent = "Bienvenue, Professeur!";

// Modifier le contenu HTML
premierParagraphe.innerHTML = "Ce paragraphe a été mis à jour par **JavaScript**.";

// Ajouter du contenu HTML avec innerHTML
const liste = document.querySelector('ul');
liste.innerHTML += '<li>Nouveau Item Ajouté via innerHTML</li>'; // Attention, écrase et recrée les écouteurs d'événements existants sur la liste si elle en a.

Modifier les Attributs

Les attributs HTML (comme src pour les images, href pour les liens, class pour les classes CSS, id pour les identifiants) peuvent être modifiés via JavaScript.

  • element.setAttribute('nomAttribut', 'valeur') : Ajoute ou modifie un attribut.
  • element.getAttribute('nomAttribut') : Récupère la valeur d'un attribut.
  • element.removeAttribute('nomAttribut') : Supprime un attribut.

Pour les classes CSS, il existe des méthodes spécifiques, plus pratiques et sécurisées que la manipulation directe de l'attribut class :

  • element.classList.add('nouvelleClasse') : Ajoute une classe à l'élément.
  • element.classList.remove('classeASupprimer') : Supprime une classe.
  • element.classList.toggle('classeATogglée') : Ajoute la classe si elle n'est pas présente, la supprime si elle l'est.
  • element.classList.contains('classeATester') : Vérifie si l'élément possède une classe (retourne true ou false).

Exemple de modification d'attributs et de classes :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulation Attributs</title>
    <style>
        .rouge {
            color: red;
        }
        .grand {
            font-size: 2em;
        }
        .cache {
            display: none;
        }
    </style>
</head>
<body>
    <img id="monImage" src="placeholder.png" alt="Image par défaut">
    <a id="monLien" href="https://example.com">Visiter Example.com</a>
    <p id="paragrapheStyle" class="normal">Ce paragraphe changera de style.</p>

    <script>
        // Modifier l'attribut src d'une image
        const image = document.getElementById('monImage');
        image.setAttribute('src', 'https://via.placeholder.com/150');
        image.setAttribute('alt', 'Image modifiée');
        console.log("Nouvelle source de l'image:", image.getAttribute('src'));

        // Modifier l'attribut href d'un lien
        const lien = document.getElementById('monLien');
        lien.setAttribute('href', 'https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction');
        lien.textContent = "Documentation DOM MDN";

        // Gérer les classes CSS
        const paragrapheStyle = document.getElementById('paragrapheStyle');

        // Ajouter une classe
        paragrapheStyle.classList.add('rouge'); // Le texte devient rouge
        console.log("Classes après ajout 'rouge':", paragrapheStyle.classList);

        // Ajouter une autre classe
        paragrapheStyle.classList.add('grand'); // Le texte devient grand
        console.log("Classes après ajout 'grand':", paragrapheStyle.classList);

        // Vérifier si une classe est présente
        if (paragrapheStyle.classList.contains('rouge')) {
            console.log("Le paragraphe est rouge.");
        }

        // Supprimer une classe
        paragrapheStyle.classList.remove('normal'); // Supprime la classe initiale
        console.log("Classes après suppression 'normal':", paragrapheStyle.classList);

        // Basculer une classe (toggle)
        setTimeout(() => {
            paragrapheStyle.classList.toggle('cache'); // Le paragraphe disparaît
            console.log("Classes après toggle 'cache' (ajouté):", paragrapheStyle.classList);
        }, 2000); // Après 2 secondes

        setTimeout(() => {
            paragrapheStyle.classList.toggle('cache'); // Le paragraphe réapparaît
            console.log("Classes après toggle 'cache' (supprimé):", paragrapheStyle.classList);
        }, 4000); // Après 4 secondes
    </script>
</body>
</html>

Explication du code : Ce script montre comment manipuler les attributs src et href d'une image et d'un lien respectivement. Plus important, il illustre l'utilisation des méthodes de classList pour gérer les classes CSS :

  • add() pour ajouter une classe (rendant le texte rouge et plus grand).
  • contains() pour vérifier la présence d'une classe.
  • remove() pour retirer une classe.
  • toggle() pour basculer la présence d'une classe, très utile pour des effets d'affichage ou des états dynamiques (comme masquer/afficher un élément).

Modifier le Style

Vous pouvez modifier directement le style CSS d'un élément via la propriété style de l'élément JavaScript. Chaque propriété CSS (en camelCase) peut être accédée.

  • element.style.proprieteCssCamelCase = 'valeur';

Par exemple : element.style.backgroundColor = 'blue';, element.style.fontSize = '16px';.

Conseil : Bien que possible, la modification directe du style avec element.style est généralement moins recommandée pour des changements complexes ou multiples. Il est préférable de manipuler les classes CSS (comme vu précédemment avec classList) car cela :

  • Maintient une meilleure séparation des préoccupations (CSS pour le style, JS pour le comportement).
  • Rend le code plus facile à maintenir et à déboguer.
  • Permet d'exploiter la cascade CSS et les feuilles de style externes.

Créer et Supprimer des Éléments

La manipulation du DOM ne se limite pas à modifier des éléments existants ; vous pouvez également en créer de nouveaux et les insérer dans le document, ou supprimer ceux qui ne sont plus nécessaires.

  • document.createElement('nomDeBalise') : Crée un nouvel élément HTML (ex: document.createElement('div')).
  • elementParent.appendChild(elementEnfant) : Ajoute un élément en tant que dernier enfant d'un parent.
  • elementParent.insertBefore(nouvelElement, elementReference) : Insère nouvelElement juste avant elementReference dans elementParent.
  • elementParent.removeChild(elementEnfant) : Supprime un enfant de son parent.

Exemple de création et suppression d'éléments :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Création/Suppression DOM</title>
</head>
<body>
    <div id="conteneur">
        <p>Paragraphe initial.</p>
    </div>
    <button id="ajouterElement">Ajouter un item</button>
    <button id="supprimerDernier">Supprimer dernier item</button>

    <script>
        const conteneur = document.getElementById('conteneur');
        const boutonAjouter = document.getElementById('ajouterElement');
        const boutonSupprimer = document.getElementById('supprimerDernier');
        let compteur = 0;

        // Ajouter un nouvel élément
        boutonAjouter.addEventListener('click', () => {
            compteur++;
            // 1. Créer un nouvel élément div
            const nouvelElement = document.createElement('div');
            // 2. Définir son contenu textuel
            nouvelElement.textContent = `Nouvel élément ajouté ${compteur}`;
            // 3. Lui ajouter une classe pour le style (optionnel)
            nouvelElement.classList.add('nouvel-item'); // Assurez-vous d'avoir ce style dans votre CSS
            // 4. Ajouter l'élément au conteneur
            conteneur.appendChild(nouvelElement);
            console.log(`Ajouté: ${nouvelElement.textContent}`);
        });

        // Supprimer le dernier enfant
        boutonSupprimer.addEventListener('click', () => {
            // Vérifier s'il y a des enfants à supprimer
            if (conteneur.children.length > 0) {
                // conteneur.lastElementChild est une propriété pratique pour le dernier enfant
                const dernierEnfant = conteneur.lastElementChild;
                conteneur.removeChild(dernierEnfant);
                console.log(`Supprimé: ${dernierEnfant.textContent}`);
            } else {
                console.log("Plus d'éléments à supprimer !");
            }
        });
    </script>
</body>
</html>

Explication du code : Ce script permet d'ajouter et de supprimer des éléments du DOM de manière dynamique.

  • Le bouton "Ajouter un item" :
    • Crée un nouvel élément div avec document.createElement('div').
    • Lui attribue un contenu textuel unique avec textContent.
    • L'ajoute en tant qu'enfant au div avec l'ID conteneur grâce à appendChild().
  • Le bouton "Supprimer dernier item" :
    • Vérifie si le conteneur a des enfants (pour éviter une erreur si le conteneur est vide).
    • Utilise conteneur.lastElementChild pour obtenir une référence au dernier enfant.
    • Utilise conteneur.removeChild() pour retirer cet enfant du DOM.

3. Gérer les Événements Utilisateur

La manipulation du DOM est puissante, mais elle prend tout son sens lorsqu'elle est combinée avec la gestion des événements. Les événements permettent à votre page de réagir aux interactions de l'utilisateur ou aux changements d'état du navigateur.

Qu'est-ce qu'un Événement ?

Un événement est une action ou une occurrence qui se produit dans le système et à laquelle le programme peut réagir. Dans le contexte du navigateur web, cela inclut :

  • Interactions utilisateur :
    • click : Clic de souris sur un élément.
    • mouseover / mouseout : La souris entre/sort d'un élément.
    • keydown / keyup : Touche pressée/relâchée au clavier.
    • submit : Soumission d'un formulaire.
    • scroll : Défilement de la page.
  • Événements navigateur :
    • load : La page ou une ressource (image, script) est complètement chargée.
    • DOMContentLoaded : Le DOM est entièrement chargé et analysé (sans attendre les feuilles de style, images, etc.).
    • resize : La fenêtre du navigateur est redimensionnée.

L'Écouteur d'Événements (Event Listener)

Pour réagir à un événement, vous devez "écouter" cet événement sur un élément spécifique du DOM. La méthode principale pour cela est addEventListener().

  • element.addEventListener(type, fonctionDeGestionnaire, [options]);

    • type (chaîne de caractères) : Le nom de l'événement à écouter (ex: 'click', 'mouseover', 'keydown').
    • fonctionDeGestionnaire (fonction) : La fonction à exécuter lorsque l'événement se produit. C'est le "callback" de l'événement.
    • options (objet, facultatif) :
      • once (booléen) : Si true, le gestionnaire ne sera appelé qu'une seule fois.
      • capture (booléen) : Définit si l'événement doit être géré pendant la phase de capture ou de propagation (par défaut, false pour la propagation, le plus courant).
      • passive (booléen) : Si true, indique que le gestionnaire d'événements n'appellera jamais preventDefault(). Utile pour l'optimisation des performances de défilement.

Le flux des événements : Propagation (Bubbling) et Capture

Lorsqu'un événement se produit sur un élément (par exemple, un clic sur un bouton à l'intérieur d'un div), il traverse le DOM en deux phases :

  1. Phase de Capture : L'événement descend de la racine du DOM (le document) vers l'élément cible.
  2. Phase de Propagation (Bubbling) : L'événement remonte de l'élément cible vers la racine du DOM. C'est la phase par défaut pour addEventListener.

Sauf cas spécifiques (délégation d'événements, etc.), vous travaillerez le plus souvent avec la phase de propagation.

L'Objet Événement (Event Object)

Lorsque la fonction de gestionnaire est exécutée, elle reçoit un argument : l'objet événement. Cet objet contient des informations précieuses sur l'événement qui s'est produit. Par convention, il est souvent nommé e ou event.

Quelques propriétés et méthodes utiles de l'objet événement :

  • e.target : L'élément sur lequel l'événement s'est réellement produit (l'élément le plus profond dans le DOM).
  • e.currentTarget : L'élément sur lequel l'écouteur d'événements est attaché. Souvent le même que e.target, mais différent en cas de délégation d'événements.
  • e.type : Le type d'événement qui s'est produit (ex: "click", "keydown").
  • e.preventDefault() : Empêche l'action par défaut du navigateur associée à l'événement. Par exemple, pour un lien (<a>), cela empêche la navigation ; pour un formulaire (<form>), cela empêche la soumission et le rechargement de la page.
  • e.stopPropagation() : Empêche l'événement de se propager plus loin dans le DOM (arrêtant la phase de bubbling).

Supprimer un Écouteur d'Événements

Il est parfois nécessaire de supprimer un écouteur d'événements, par exemple si un élément n'est plus pertinent ou pour éviter des fuites de mémoire dans des applications complexes.

  • element.removeEventListener(type, fonctionDeGestionnaire, [options]);

Attention : La fonctionDeGestionnaire doit être une référence à la même fonction qui a été passée à addEventListener. Cela signifie que vous ne pouvez pas passer une fonction anonyme directement à removeEventListener si vous l'avez utilisée avec addEventListener. Il est donc préférable de nommer vos fonctions de gestionnaire.

// Bon pour removeEventListener
function handleClick() {
    console.log("Bouton cliqué!");
}
monBouton.addEventListener('click', handleClick);
// ... plus tard ...
monBouton.removeEventListener('click', handleClick);

// Mauvais pour removeEventListener
// monBouton.addEventListener('click', function() { console.log("Clic!"); });
// monBouton.removeEventListener('click', function() { console.log("Clic!"); }); // Ne fonctionnera pas car ce sont deux fonctions anonymes différentes.

Exemple complet : Manipulation DOM et Événements

Cet exemple combine tout ce que nous avons appris : sélection, manipulation et gestion des événements pour créer une interaction dynamique.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactivité DOM & Événements</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .compteur-container {
            border: 1px solid #ccc;
            padding: 15px;
            margin-bottom: 20px;
            background-color: #f9f9f9;
        }
        #monBouton {
            background-color: #007bff;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            margin-right: 10px;
        }
        #monBouton:hover {
            background-color: #0056b3;
        }
        #compteurDisplay {
            font-size: 1.5em;
            font-weight: bold;
            color: #28a745;
        }
        .message {
            margin-top: 15px;
            padding: 10px;
            border-left: 5px solid #ffc107;
            background-color: #fff3cd;
            color: #856404;
            display: none; /* Initialement caché */
        }
        .show {
            display: block; /* Afficher avec JS */
        }
        form {
            margin-top: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #e9ecef;
        }
        input[type="text"] {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 10px;
        }
        input[type="submit"] {
            background-color: #dc3545;
            color: white;
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #c82333;
        }
        #listeDynamique {
            list-style: none;
            padding: 0;
            margin-top: 20px;
            border: 1px dashed #aaa;
            padding: 10px;
            background-color: #f1f1f1;
        }
        #listeDynamique li {
            padding: 8px;
            border-bottom: 1px solid #eee;
        }
        #listeDynamique li:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body>
    <h1>Interactivité en JavaScript</h1>

    <div class="compteur-container">
        <p>Compteur de clics: <span id="compteurDisplay">0</span></p>
        <button id="monBouton">Cliquez-moi !</button>
        <button id="resetBouton">Réinitialiser</button>
        <div id="messageCache" class="message">
            <p>Le compteur a atteint 5 !</p>
        </div>
    </div>

    <form id="monFormulaire">
        <label for="nomInput">Votre nom:</label>
        <input type="text" id="nomInput" placeholder="Entrez votre nom">
        <input type="submit" value="Envoyer">
        <p id="messageForm"></p>
    </form>

    <ul id="listeDynamique">
        <li>Élément statique 1</li>
    </ul>

    <script>
        // --- 1. Gestion d'un compteur de clics ---
        const monBouton = document.getElementById('monBouton');
        const resetButton = document.getElementById('resetBouton');
        const compteurDisplay = document.getElementById('compteurDisplay');
        const messageCache = document.getElementById('messageCache');
        let compteur = 0;

        // Fonction pour mettre à jour le compteur
        function mettreAJourCompteur() {
            compteur++;
            compteurDisplay.textContent = compteur;

            // Afficher un message si le compteur atteint 5
            if (compteur === 5) {
                messageCache.classList.add('show');
            } else if (compteur > 5 && messageCache.classList.contains('show')) {
                // Pour cacher le message si on continue de cliquer après 5
                messageCache.classList.remove('show');
            }
        }

        // Ajouter un écouteur d'événement 'click' au bouton
        monBouton.addEventListener('click', mettreAJourCompteur);

        // Ajouter un écouteur pour le bouton de réinitialisation
        resetButton.addEventListener('click', () => {
            compteur = 0;
            compteurDisplay.textContent = compteur;
            messageCache.classList.remove('show'); // Cacher le message si affiché
            console.log("Compteur réinitialisé !");
        });

        // --- 2. Prévention du comportement par défaut d'un formulaire ---
        const monFormulaire = document.getElementById('monFormulaire');
        const nomInput = document.getElementById('nomInput');
        const messageForm = document.getElementById('messageForm');

        monFormulaire.addEventListener('submit', (e) => {
            // Empêcher la soumission par défaut du formulaire (qui rechargerait la page)
            e.preventDefault();

            const nom = nomInput.value;
            if (nom.trim() === '') {
                messageForm.textContent = "Veuillez entrer votre nom !";
                messageForm.style.color = 'red';
            } else {
                messageForm.textContent = `Bonjour, ${nom} ! Formulaire traité par JS.`;
                messageForm.style.color = 'green';

                // On peut aussi créer un nouvel élément dans la liste dynamique
                const liste = document.getElementById('listeDynamique');
                const nouvelLi = document.createElement('li');
                nouvelLi.textContent = `Nouvelle entrée: ${nom}`;
                liste.appendChild(nouvelLi);

                nomInput.value = ''; // Vider le champ d'entrée
            }
        });

        // --- 3. Événements de clavier sur l'input ---
        nomInput.addEventListener('keydown', (e) => {
            // Afficher la touche pressée dans la console
            console.log(`Touche pressée: ${e.key}`);
            // Exemple: empêcher l'entrée du chiffre '5'
            if (e.key === '5') {
                e.preventDefault();
                console.log("Le chiffre 5 n'est pas autorisé !");
            }
        });
    </script>
</body>
</html>

Explication du code : Ce code met en œuvre plusieurs interactions :

  1. Compteur de clics :

    • Un bouton (monBouton) est sélectionné.
    • Un écouteur d'événement click lui est attaché.
    • La fonction mettreAJourCompteur s'exécute à chaque clic : elle incrémente un compteur, met à jour son affichage dans un <span>, et bascule la visibilité d'un message (#messageCache) en ajoutant/supprimant une classe CSS show lorsque le compteur atteint 5.
    • Un bouton de réinitialisation est également présent pour remettre le compteur à zéro et cacher le message.

  2. Prévention de soumission de formulaire :

    • Le formulaire (monFormulaire) est sélectionné.
    • Un écouteur d'événement submit est attaché.
    • À l'intérieur du gestionnaire, e.preventDefault() est appelé pour empêcher le comportement par défaut du navigateur (rechargement de la page).
    • Le script récupère la valeur de l'input, affiche un message personnalisé, et ajoute même l'entrée de l'utilisateur à une liste dynamique.

  3. Événements de clavier :

    • L'input de nom (nomInput) est sélectionné.
    • Un écouteur d'événement keydown est attaché.
    • Chaque fois qu'une touche est pressée, la fonction affiche la touche dans la console (e.key).
    • Un exemple de e.preventDefault() est utilisé pour bloquer l'entrée du chiffre '5'.

Conclusion

Félicitations ! Vous avez maintenant une compréhension solide de la Manipulation du DOM et de la Gestion des Événements Utilisateur, les fondations de l'interactivité en JavaScript.

Nous avons couvert :

  • La nature du DOM en tant que représentation arborescente de votre page HTML.
  • Les différentes méthodes pour sélectionner des éléments (par ID, classe, balise, ou sélecteurs CSS puissants).
  • Comment modifier le contenu, les attributs et les classes CSS des éléments pour les rendre dynamiques.
  • Comment créer de nouveaux éléments et les insérer/supprimer de la page.
  • Le concept des événements utilisateur et leur importance pour la réactivité.
  • L'utilisation de addEventListener() pour attacher des fonctions de gestionnaire à des événements.
  • L'objet événement (e) et ses propriétés clés comme e.target et e.preventDefault().

La maîtrise de ces concepts vous ouvre les portes à la création d'applications web véritablement interactives et riches. La clé est la pratique : essayez de modifier vos propres pages HTML, d'ajouter des boutons qui changent des couleurs, des formulaires qui valident les entrées en temps réel, ou des listes qui se mettent à jour dynamiquement. Plus vous expérimenterez, plus ces concepts deviendront intuitifs.