How to loop over DOM elements from querySelectorAll
TL;DR: Use the for..of loop
The querySelectorAll()
method run on document
returns a list of DOM elements that satisfy the selectors query.
It returns a list of elements, which is not an array but a NodeList
object.
The easiest way to loop over the results is to use the for..of
loop:
for (const item of document.querySelectorAll('.buttons')) {
//...do something
}
→ Here's my latest YouTube video
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025