Partie 8 — Manipulation du DOM : quand JavaScript rencontre le HTML

Jusqu’à maintenant, nous avons écrit du JavaScript qui fonctionne surtout dans la console. C’est bien pour apprendre, mais ce n’est pas encore très visible.

La vraie magie de JavaScript commence quand il peut interagir avec le HTML : changer un texte, réagir à un clic, afficher ou cacher des éléments, valider un formulaire, créer une interface vivante.

Tout cela est possible grâce à un concept fondamental : le DOM.

1) Qu’est-ce que le DOM ? (explication simple)

DOM signifie Document Object Model. Ce nom peut faire peur, mais l’idée est très simple.

Quand un navigateur charge une page HTML, il transforme ce HTML en une structure que JavaScript peut comprendre et manipuler. Cette structure, c’est le DOM.

Imaginez le DOM comme un arbre :

• Le document est la racine
• Les balises HTML sont des branches
• Les textes et attributs sont des feuilles

Grâce au DOM, JavaScript peut dire :

• “Donne-moi ce bouton”
• “Change ce texte”
• “Ajoute une classe CSS”
• “Écoute quand l’utilisateur clique ici”

👉 Sans le DOM, JavaScript ne pourrait pas interagir avec le HTML.

2) Sélectionner des éléments HTML

Avant de modifier un élément, JavaScript doit le sélectionner. C’est comme pointer du doigt quelque chose.

Exemple HTML de base :

<h1 id="titre">Bonjour</h1>
<p class="description">Texte initial</p>
<button id="btn">Cliquer</button>
  

Sélection par ID

let titre = document.getElementById("titre");
  

Sélection par classe

let description = document.querySelector(".description");
  

Sélection multiple

let paragraphs = document.querySelectorAll("p");
  

👉 querySelector sélectionne un élément, querySelectorAll en sélectionne plusieurs.

3) Modifier le texte, les classes et les styles

Modifier le texte

titre.textContent = "Titre modifié avec JavaScript";
  

Modifier le HTML

description.innerHTML = "<strong>Texte en gras</strong>";
  

Modifier les styles

titre.style.color = "blue";
titre.style.fontSize = "32px";
  

Ajouter / supprimer des classes CSS

titre.classList.add("active");
titre.classList.remove("active");
titre.classList.toggle("active");
  

Utiliser les classes est beaucoup plus propre que modifier les styles directement.

4) Les événements : rendre la page interactive

Un événement est une action de l’utilisateur : clic, saisie clavier, soumission de formulaire, etc.

Événement click

let bouton = document.getElementById("btn");

bouton.addEventListener("click", function() {
  alert("Bouton cliqué !");
});
  

Événement input

let champ = document.querySelector("input");

champ.addEventListener("input", function() {
  console.log(champ.value);
});
  

Événement submit (formulaire)

let form = document.querySelector("form");

form.addEventListener("submit", function(event) {
  event.preventDefault();
  console.log("Formulaire envoyé");
});
  

5) Construire votre première page interactive

Objectif : un bouton qui change le texte quand on clique.

HTML

<p id="message">Message initial</p>
<button id="changer">Changer le message</button>
  

JavaScript

let message = document.getElementById("message");
let btn = document.getElementById("changer");

btn.addEventListener("click", function() {
  message.textContent = "Le message a changé 🎉";
});
  

✅ Félicitations : vous venez de créer une interaction complète entre HTML et JavaScript.

6) Erreurs fréquentes à éviter

• Exécuter le JavaScript avant le chargement du HTML
• Mal orthographier un ID ou une classe
• Modifier le style au lieu des classes
• Oublier preventDefault() sur les formulaires

👉 Astuce pro : vérifiez toujours la console en cas de problème.

La manipulation du DOM est une étape clé dans l’apprentissage de JavaScript. C’est ici que le langage devient visuel, interactif et concret.

Dans la Partie 9, nous irons plus loin avec les formulaires et l’interaction utilisateur : validation, messages d’erreur et expérience utilisateur.