# Add a click event to querySelectorAll elements

> Learn how to attach a click event listener to every element returned by document.querySelectorAll() by looping over the NodeList with a for..of loop.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2018-10-24 | Topics: [Web Platform](https://flaviocopes.com/tags/platform/) | Canonical: https://flaviocopes.com/add-click-event-to-dom-list/

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:

```js
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.