Cours

JavaScript Leçon 3

Manipuler la page

Le vrai intérêt de JavaScript : trouver un élément de la page, changer son contenu et réagir à un clic.

25 min

À la fin de cette leçon, tu sauras

  • Sélectionner un élément avec querySelector
  • Modifier son texte et ses classes
  • Réagir à un événement avec addEventListener

Le DOM

Quand le navigateur lit ton HTML, il construit en mémoire un arbre d'objets : le DOM. JavaScript peut y trouver n'importe quel élément et le modifier : la page change aussitôt à l'écran, sans la recharger.

Trouver un élément

const titre = document.querySelector("h1");
const bouton = document.querySelector("#valider");
const cartes = document.querySelectorAll(".carte");

querySelector prend un sélecteur CSS, exactement comme en CSS, et renvoie le premier élément trouvé. querySelectorAll les renvoie tous.

Le modifier

titre.textContent = "Nouveau titre";
titre.classList.add("important");
titre.classList.toggle("cache");   // ajoute la classe si elle manque, l'enlève sinon

Attention : pour mettre un texte, utilise textContent. innerHTML interprète le HTML : avec un texte tapé par un visiteur, c'est la porte ouverte à la faille XSS, comme en PHP sans htmlspecialchars.

Réagir à un événement

const bouton = document.querySelector("#compteur");
let clics = 0;

bouton.addEventListener("click", () => {
  clics++;
  bouton.textContent = `Cliqué ${clics} fois`;
});

addEventListener enregistre une fonction qui sera appelée à chaque clic. C'est le même principe que les événements en Lua. Il existe beaucoup d'autres événements : "input" quand on tape dans un champ, "submit" pour un formulaire, "keydown" pour une touche…

Astuce : les exercices de ce site fonctionnent exactement comme ça : un écouteur "input" sur l'éditeur, qui met à jour le résultat et coche les consignes.

À toi de jouer

La page contient <button id="theme">Mode sombre</button>. Écris le JavaScript qui :

  • sélectionne ce bouton avec querySelector ;
  • au clic, ajoute ou enlève la classe sombre sur document.body avec classList.toggle.
script.js
  • Le bouton est sélectionné avec querySelector("#theme")
  • Un écouteur de clic est ajouté
  • La classe sombre est basculée sur document.body
  • Pas de innerHTML
Bloqué ? Voir une solution 
const bouton = document.querySelector("#theme");

bouton.addEventListener("click", () => {
  document.body.classList.toggle("sombre");
});

Quiz

1Que renvoie document.querySelector(".carte") ?
2Pourquoi préférer textContent à innerHTML pour afficher un texte tapé par un visiteur ?
3Quel événement se déclenche quand on tape dans un champ ?