The DOM: Loop through DOM elements

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.

The querySelectorAll() method, when called on document, returns a list of DOM elements that match the selector.

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
}

0:	Introduction
1:	The `window` object
2:	The `document` object
3:	Types of nodes
4:	Traversing the DOM
5:	Editing the DOM
6:	Selectors API
7:	DOM Ready
8:	Add a class to an element
9:	Remove a class from an element
10:	Check if element has a class
11:	Change a DOM node value
12:	▶︎ Loop through DOM elements
13:	Add an image to the DOM
14:	Create a DOM attribute
15:	Remove children elements
16:	Replace a DOM element
17:	insertAdjacentHTML
18:	Add click events to a list