Cómo agregar un evento de clic a una lista de elementos DOM devueltos por querySelectorAll

Cómo iterar una NodeList y adjuntar un detector de eventos a cada elemento

Puede agregar un detector de eventos a todos los elementos devueltos por undocument.querySelectorAll()llamar iterando sobre esos resultados utilizando elfor..oflazo:

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

Es importante tener en cuenta quedocument.querySelectorAll()no devuelve una matriz, sino un objeto NodeList.

Puedes iterarlo conforEachofor..of, o puede transformarlo en una matriz conArray.from()si tu quieres.


Más tutoriales de navegador:


Tech Wiki en línea!