How to Loop Over DOM Elements using querySelectorAll

TL;DR: Utilize the for..of loop to iterate through DOM elements obtained from querySelectorAll.

The querySelectorAll() method, when executed on the document, provides a collection of DOM elements that match the given selector(s).

Keep in mind that this method does not return an array, but a NodeList object.

To traverse through the resulting collection, a straightforward approach is to use the for..of loop:

1
2
3

for (const item of document.querySelectorAll('.buttons')) {
 //...perform actions here
}

By employing this loop, you can easily access and manipulate each DOM element as necessary.

Tags: JavaScript, DOM traversal, for..of loop, querySelectorAll, NodeList