# How to iterate over DOM elements using JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Feb 21, 2020, updated Oct 9, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-loop-dom-elements

> Learn how to loop through DOM elements returned by the querySelectorAll() method in JavaScript.

The [`querySelectorAll()`](https://attacomsian.com/blog/getting-dom-elements-javascript#query-selector-all) method is used for selecting all elements of a specific type in JavaScript. It returns a list of DOM elements that match the specified selectors. 

The returned list is not an array but a [`NodeList`](https://attacomsian.com/blog/javascript-nodelist) object containing a collection of nodes:

```javascript
// select all anchor tags
const anchors = document.querySelectorAll('a.open-article')

// TODO: iterate over `NodeList` elements and attach a click handler
```

There are many ways to loop through a `NodeList` object in JavaScript. Let us look at them.

## `forEach()` Method

The simplest and easiest way to loop over the results returned by `querySelectorAll()` is by using the [`forEach()`](https://attacomsian.com/blog/javascript-foreach#looping-through-nodelists) method. It executes the given function once for each node in the `NodeList`. 

Here is an example:

```javascript
anchors.forEach(anchor => {
  anchor.addEventListener('click', () => {
    console.log('Link is clicked!')
  })
})
```

The `forEach()` method for `NodeList` only works in modern browsers. If you want to support old browsers like Internet Explorer, use the following little hack instead:

```javascript
;[].forEach.call(anchors, function (anchor) {
  anchor.addEventListener('click', function () {
    console.log('Link is clicked!')
  })
})
```

You can also use the [spread operator](https://attacomsian.com/blog/javascript-convert-nodelist-to-array#spread-operator) to convert the `NodeList` to an `Array` object. This will give you access to all the array methods, including `forEach()`:

```javascript
;[...anchors].forEach(anchor => {
  anchor.addEventListener('click', () => {
    console.log('Link is clicked!')
  })
})
```

## `for...of` Loop

Another way to loop through a `NodeList` object is using the ES6 [for...of](https://attacomsian.com/blog/javascript-for-of-loop) statement. It has a clean and concise syntax and is supported by all modern browsers:

```javascript
for (const anchor of anchors) {
  anchor.addEventListener('click', () => {
    console.log('Link is clicked!')
  })
}
```

Modern browsers also support `entries()`, `keys()`, and `values()` methods on a `NodeList` object. These methods return an iterator allowing you to loop through all key-value pairs. The values are always `Node` objects:

```javascript
// entries() can be replaced with keys() or values()
for (const anchor of anchors.entries()) {
  anchor.addEventListener('click', () => {
    console.log('Link is clicked!')
  })
}
```

## `for` Loop

If you want to support the maximum number of browsers, including Internet Explorer (IE), the good old `for` loop is the way to go:

```javascript
for (let i = 0; i < anchors.length; i++) {
  anchors[i].addEventListener('click', () => {
    console.log('Link is clicked!')
  })
}
```

## 3rd-Party Libraries

If you are already using jQuery, there is no need to use any of the above methods:

```javascript
$('a.open-article').on('click', () => {
  console.log('Link is clicked!')
})
```

In JavaScript frameworks like Angular, React, and Vue, use Lodash's `_.forEach` method:

```javascript
_.forEach(anchors, (anchor, key) => {
  anchor.addEventListener('click', () => {
    console.log('Link is clicked!')
  })
})
```