Manipuler le DOM : querySelector, écouteurs d'événements

Sélectionnez des éléments de la page, réagissez aux clics et adoptez la délégation d'événements pour un code performant.

9 min · 3 questions

Le DOM est la représentation vivante de votre page HTML : c'est en le manipulant que JavaScript rend une interface interactive. Le duo indispensable : sélectionner un élément, puis écouter ce qui lui arrive. Prenons une petite structure de départ.

<button id="save-btn" class="btn">Enregistrer</button>
<ul class="task-list">
  <li>Faire les courses</li>
  <li>Appeler le client</li>
</ul>

querySelector accepte n'importe quel sélecteur CSS (#id, .classe, ul li, [data-id]) et retourne le premier élément correspondant, ou null. querySelectorAll retourne tous les éléments correspondants dans une NodeList, que vous pouvez parcourir avec forEach.

const button = document.querySelector("#save-btn");
const firstTask = document.querySelector(".task-list li");
const tasks = document.querySelectorAll(".task-list li");

console.log(tasks.length); // 2
console.log(firstTask.textContent); // "Faire les courses"

Pour réagir à une action de l'utilisateur, addEventListener attache une fonction à un type d'événement : click, input, submit, keydown... La fonction reçoit un objet event décrivant ce qui s'est passé. Vous pouvez ensuite modifier le contenu avec textContent et le style avec classList.

const button = document.querySelector("#save-btn");

button.addEventListener("click", () => {
  button.textContent = "Enregistré !";
  button.classList.add("success");
});

Bonne habitude professionnelle : une liste de 200 éléments ne mérite pas 200 écouteurs. Posez un seul écouteur sur le parent et identifiez l'élément cliqué avec event.target. C'est la délégation d'événements : elle fonctionne même pour les éléments ajoutés après coup.

const list = document.querySelector(".task-list");

list.addEventListener("click", (event) => {
  const item = event.target.closest("li");
  if (item) {
    item.classList.toggle("done");
  }
});

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Que retourne document.querySelector(".btn") si plusieurs éléments portent la classe btn ?
   • Tous les éléments correspondants
   • Le premier élément correspondant uniquement
   • Une erreur, car le sélecteur est ambigu
2. Quel est le rôle du deuxième argument de addEventListener ?
   • C'est la fonction exécutée à chaque déclenchement de l'événement
   • C'est la durée d'attente avant l'écoute
   • C'est le sélecteur CSS de l'élément cible
3. Dans un écouteur posé sur un parent, que représente event.target ?
   • Le parent qui porte l'écouteur
   • L'élément précis sur lequel l'événement s'est produit
   • La fenêtre du navigateur