Looping through querySelectorAll() with Javascript

javascript
Published on November 16, 2019

Use-Cases of this code snippet

  • Know how to iterate through list of nodes returned by document.querySelectorAll().
  • Know how to loop through a NodeList object.

List of nodes returned by querySelectorAll() can be looped through using the forEach() method of the returned NodeList object.

HTML

<div class="item" data-id="1">Item 1</div>
<div class="item" data-id="2">Item 2</div>
<div class="item" data-id="3">Item 3</div>
<div class="item" data-id="4">Item 4</div>
<div class="item" data-id="5">Item 4</div>
<div class="item" data-id="6">Item 6</div>
<div class="item" data-id="7">Item 7</div>
<div class="item" data-id="8">Item 8</div>

Javascript

document.querySelectorAll(".item").forEach(function(element) {
    // element refers to the DOM node

    console.log(element.getAttribute('data-id'));
});

Result :

1
2
3
4
5
6
7
8

Notes

  • querySelectorAll() returns a NodeList object, which is array-like, but not an array. It has its own forEach() method that can be used to used to loop through it (this is different from the forEach statement used to loop arrays).
  • The NodeList returned by querySelectorAll() can be converted to a proper Javascript array using Array.from() method.

    Array.from(document.querySelectorAll(".item")).forEach(function(element) {
        // element refers to the DOM node
    
        console.log(element.getAttribute('data-id'));
    });
    
In this Tutorial