TP 1 · Manipulation du DOM

Le changeur de thème

Objectif : un bouton qui fait basculer la page entre mode clair et mode sombre. Derrière ce petit effet se cache le trio de base de tout site interactif : sélectionner un élément, écouter un événement, modifier la page.

Comment travailler

Chaque exercice a son propre aperçu : une vraie petite page qui contient le bouton #toggle-theme-btn. ▶ Exécuter lance votre code dans cet aperçu (vous pouvez ensuite cliquer sur le bouton), ✔ Vérifier le teste automatiquement et compte pour votre certificat.

1. Le DOM : la page vue par JavaScript

Quand le navigateur lit votre HTML, il construit en mémoire un arbre d'objets : le DOM (Document Object Model). Chaque balise devient un objet que JavaScript peut retrouver, lire et modifier. Tout part de l'objet document.

document html head body h3 p button#…
La page de l'aperçu, vue comme un arbre : on part de document pour atteindre le bouton.

2. Sélectionner un élément

Pour agir sur un élément, on le range d'abord dans une variable :

HTML

<body>
  <button id="toggle-theme-btn">
    Activer le Mode Sombre
  </button>
</body>

JavaScript

// par son id (unique), SANS le #
const themeButton =
  document.getElementById("toggle-theme-btn");

// par un sélecteur CSS, comme en CSS
const bodyElement =
  document.querySelector("body");

getElementById("id")

Cherche l'élément qui porte cet id. Rapide et sans ambiguïté, mais uniquement par id : on écrit le nom sans dièse.

querySelector("sélecteur")

Accepte n'importe quel sélecteur CSS ("body", "#toggle-theme-btn", ".carte"…) et renvoie le premier élément trouvé.

Quand la sélection renvoie null

Si l'élément n'existe pas (faute de frappe, # en trop dans getElementById, ou script exécuté avant que le HTML soit chargé), on obtient null, et la ligne suivante plante avec « Cannot read properties of null ». C'est pourquoi on lie script.js juste avant </body>.

3. Écouter un événement

Un événement, c'est quelque chose qui arrive sur la page : un clic, une touche, le survol de la souris… On demande à un élément d'appeler une fonction quand l'événement se produit : 

themeButton.addEventListener("click", function () {
  // ce code attend le clic : il ne s'exécute pas tout de suite
});

La fonction passée en second argument s'appelle un callback (fonction de rappel) : on la donne au navigateur, qui la rappellera au bon moment, à chaque clic.

Piège : les parenthèses en trop

Avec une fonction nommée, on écrit addEventListener("click", basculer) et pas basculer() : avec les parenthèses, la fonction s'exécute immédiatement, une seule fois, au chargement, et c'est son résultat (undefined) qui est confié au bouton.

4. Ajouter, retirer, basculer une classe

Plutôt que de changer les couleurs une par une en JavaScript, on laisse le CSS faire son travail : une règle body.dark-theme décrit le mode sombre, et JavaScript se contente d'ajouter ou de retirer la classe.

CSS (déjà en place)

body.dark-theme {
  background: #12141c;
  color: #e7e9f2;
}

JavaScript

bodyElement.classList.add("dark-theme");
bodyElement.classList.remove("dark-theme");
bodyElement.classList.toggle("dark-theme");
bodyElement.classList.contains("dark-theme");

toggle inverse la présence de la classe : absente, il l'ajoute ; présente, il la retire. Un seul appel suffit donc pour faire un interrupteur. contains ne modifie rien : il répond true ou false.

Le body a déjà la classe dark-theme. Que fait classList.toggle("dark-theme") ?

5. Modifier le texte selon l'état

Dernière étape : le bouton doit toujours proposer l'autre mode. Après la bascule, on regarde l'état de la page et on choisit le texte :

Pseudo-code

AU CLIC SUR le bouton :
  basculer la classe dark-theme
  SI le body a dark-theme ALORS
    texte ← "Activer le Mode Clair"
  SINON
    texte ← "Activer le Mode Sombre"
  FIN SI

À utiliser

bodyElement.classList.contains("dark-theme")
// → true ou false

themeButton.textContent = "…";
// remplace le texte du bouton

À retenir