How to loop over DOM elements from querySelectorAll

Oct 19, 2018

Learn how to loop over the elements returned by querySelectorAll, which gives you a NodeList rather than an array, using a clean JavaScript 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
}

Tagged: Web Platform · All topics

~~~