JavaScript querySelectorAll forEach Method


In this article, you will look at how to loop through the nodeList using Javascript queryeSelectorall forEach method.

Before using the forEach method with the modern API querySelectorAll you must first have a prior understanding of both of these methods.

We have briefly explained both queryeSelectorall and forEach method briefly here. If you are already familiar with these methods, and jump to section 3.

    Table of contents

  1. Understanding querySelectorAll
  2. forEach loop
  3. Using forEach with queryeSelectorall
    1. Changing style of element
    2. Adding event listener to the element

javascript queryselectorall foreach

1. Understanding querySelectorAll Method

querySelectorAll is a DOM API used to select element in the webpage using CSS selectors. You can use querySelectorAll to select elements based on their tag name, attributes, class, id, combinations of these and any possible valid CSS selector.

The querySelectorAll method selects all the matching element from the document and returns a static nodeList which is an an array-like object. This nodeList contains all the elements that match the specified selector.

Let out HTML be like as shown below.

<div data-id="1" class="box">Box number 1</div>
<div data-id="2" class="box">Box number 2</div>
<div data-id="3" class="box">Box number 3</div>
<div data-id="4" class="box">Box number 4</div>
<div data-id="5" class="box">Box number 5</div>
<div data-id="6" class="box">Box number 6</div>
<div data-id="7" class="box">Box number 7</div>
<div data-id="8" class="box">Box number 8</div>

To select the above elements use querySelectorAll and use a valid CSS selector to select all of the above elements.

Above all elements can be selected in 3 ways: select by tag name, select by class name, select by attribute

Example

// select by tag name
const group1 = document.querySelectorAll("div");
// select by class name
const group2 = document.querySelectorAll(".box");
// select by attribute
const group3 = document.querySelectorAll("[data-id]");

// all the groups contain same element for above HTML
console.log(group1, group2, group3);

2. Using forEach Method

The forEach() method is a modern way to loop through array elements. Using forEach loop you get more control over the array and array element while looping.

The forEach method is called upon an array or an array-like object and accepts a callback function which is executed for each and every element of the array, where the first argument of the callback function is an element of the array.

Example

const arr = [1, 2, 3, 4, 5];

// loop through the array
// using forEach
arr.forEach(function (element) {
  console.log(element);
});

The second and third argument of the callback function is index and array itself.

Example

const arr = [1, 2, 3, 4, 5];
arr.forEach(function (element, index, array) {
  console.log("element = " + element, "index = " + index, "array = " + array);
});

3. JavaScript forEach querySelectorAll

Now you will see how to use forEach method with the nodeList selected by querySelectorAll.

Since nodeList selected by querySelectorAll has an array-like structure so you can directly apply forEach method with it and pass element as the first element in the callback function.

Example

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>

<script>
  const elements = document.querySelectorAll(".box");
  elements.forEach(function (element) {
    alert(element.innerHTML)
  });
</script>

Changing style of element

In the previous example, you have looped through all the elements and alerted a message, but in a real-world we have to do something with the selected elements.

In this example, we will change the style of each element in the nodeList selected by querySelectorAll.

Example

const elements = document.querySelectorAll(".box");

function changeStyle() {
  elements.forEach(function (element) {
    element.style.color = "white";
    element.style.backgroundColor = "red";
    element.style.margin = "10px 0";
  });
}

Adding event listener to the element

Suppose you want to add an event listener to each and every button of a document. You can do this using the forEach method.

Example

const allButtons = document.querySelectorAll("button");

allButtons.forEach(function (button) {
  button.addEventListener("click", () => {
    alert("Button clicked!");
  });
});

Conclusion

The querySelectorAll method selects all matching element from a document specified by a CSS selector, whereas the forEach method is the advanced way to loop through the array elements. In this section, we selected the DOM element using querySelectorAll and looped it using the forEach method.