How to iterate over dom elements - JavaScript

In this article we will learn how to iterate over dom elements in JavaScript.

It is very common to iterate over dom elements in JavaScript in JavaScript.

Problem

Now we have a problem which is that we want to iterate over dom elements.

We will select a set of buttons through querySelectorAll() method, and then we want to add an event listener, meaning when any of the buttons is pressed, something happens.

// Select Elements
var buttons = document.querySelectorAll('button');

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

How to solve this problem?

The solution to this problem is easy and simple, and fortunately we can solve it in more than one way, such as:

• Using forEach
• Using spread operator ...
• Using for .. of
• Using for loop

Iterate over dom elements using forEach

The easy and simple way is to use forEach to iterate over all elements.

Let's see an example

// Select elements
var buttons = document.querySelectorAll('button');

// Iterate using `forEach`
buttons.forEach(button => {
    // Add event listener to each button
    button.addEventListener('click', function() {
        console.log('Do something');
    })
});

Iterate over elements using spread operator

You can use spread operator to iterate over elements in DOM tree as well.

Let's see an example:

// Select elements
var buttons = document.querySelectorAll('button');

// Iterate using `forEach`
[...buttons].forEach(button => {
    // Add event listener to each button
    button.addEventListener('click', function() {
        console.log('Do something');
    })
});

The spread (...) syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. MDN

Iterate over elements using for .. in

We can use for .. in to solve this problem as well.

Example

// Select elements
var buttons = document.querySelectorAll('button');

// Iterate using `forEach`
for(const button of buttons) {
    // Add event listener to each button
    button.addEventListener('click', function() {
        console.log('Do something');
    })
}

Iterate over elements using for loop

We can use for loop to iterate over DOM elements as well.

Example

// Select elements
var buttons = document.querySelectorAll('button');

// Iterate over elements using `for`
for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
        console.log('Do something');
    })
}

Thank you for reading

Thank you for reading my blog. 🚀