Tutorials Tonight's Logo
Follow Us

JavaScript querySelectorAll forEach - Loop Through The nodeList


In this article, you will look at how to loop through the nodeList select by the querySelectorAll method. We will also quickly look at how to use both querySelectorAll and forEach method.

Before using the forEach method with the modern API querySelectorAll you must first have a prior understanding of this. We have briefly described both here. If you already know then you can directly jump to section 3 from the table of contents.

    Table of contents

  1. Understanding querySelectorAll
  2. forEach to loop through array elements
  3. Using forEach with queryeSelectorall
javascript queryselectorall foreach

1. Understanding querySelectorAll

querySelectorAll is a DOM API used to select any kind of element in the webpage. It uses CSS selectors to select elements from the webpage. 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

const group1 = document.querySelectorAll("div"); // select by tag name
const group2 = document.querySelectorAll(".box"); // select by class name
const group3 = document.querySelectorAll("[data-id]"); // select by attribute
// 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];
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.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.