Comment ajouter un événement de clic à une liste d'éléments DOM renvoyés par querySelectorAll

Comment parcourir une liste de nœuds et attacher un écouteur d'événement à chaque élément

Vous pouvez ajouter un écouteur d'événement à tous les éléments renvoyés par undocument.querySelectorAll()appeler en itérant sur ces résultats en utilisantfor..ofboucle:

const buttons = document.querySelectorAll("#select .button")
for (const button of buttons) {
  button.addEventListener('click', function(event) {
    //...
  })
}

Il est important de noter quedocument.querySelectorAll()ne renvoie pas un tableau, mais un objet NodeList.

Vous pouvez l'itérer avecforEachoufor..of, ou vous pouvez le transformer en tableau avecArray.from()si tu veux.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de didacticiels sur le navigateur: