The DOM: Loop through DOM elements

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.

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
}

Lessons in this unit:

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