Skip to content

Add click event to DOM elements returned from querySelectorAll

How to iterate a NodeList and attach an event listener to each element

You can add an event listener to all the elements returned by a document.querySelectorAll() call by iterating over those results using the for..of loop:

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

It’s important to note that document.querySelectorAll() does not return an array, but a NodeList object.

You can iterate it with forEach or for..of, or you can transform it to an array with Array.from() if you want.


→ Here's my latest YouTube video

→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list