5 ways to loop over DOM elements from querySelectorAll in JavaScript

JS dev Ray
Apr 5, 2018 · 4 min read

There are a lot of ways to loop over a NodeList Object (List of DOM elements) that is returned by a querySelectorAll method! In this post I want to share 5 ways.

Let’s start with defining a piece of HTML and a const variable that is searching for multiple elements.

HTML

<div class="container" id="myContainer">
<div class="fake-image">
<h2>Fake image</h2>
</div>
<div class="fake-image">
<h2>Fake image</h2>
</div>
<div class="fake-image">
<h2>Fake image</h2>
</div>
<div class="fake-image">
<h2>Fake image</h2>
</div>
</div>

JavaScript

const fakeImages = document.querySelectorAll(".fake-image");

So now we are ready to find out which 5 ways we can use to loop over this cool NodeList Object that is returned by the querySelectorAll method.

If a method gives a option of a callback, then I will use the “Arrow function” for that.

1. For-loop

So if you need to support older browsers like IE11 or lower and you don’t use a compiler like Babel, than this is your best weapon.

Support: every browser!

const fakeImages = document.querySelectorAll(".fake-image");
for (var i = 0; i < fakeImages.length; i++) {
console.log('fakeImage: ', fakeImages[i]);
}

2. For..of

If you need to support old browsers then you definitely need a compiler like Babel. But if you only need to support the modern browsers For..of would be my weapon of choice!

Support: All modern browsers! Not supported in IE11 or lower.

const fakeImages = document.querySelectorAll(".fake-image");
for (const fakeImage of fakeImages) {
console.log('fakeImage: ', fakeImage);
}

3. For..of entries, keys, values

The entries(), keys() and values() methods return a iterator. A iterator is a new iterable protocol in the ES2015 specification.

In JavaScript some types of data (Array or Map) have built in functionality to loop over.

Object don’t have build-in functionality to loop over it. Via the iterator protocol we can loop over data types that don’t default support for that.

entries

const fakeImages = document.querySelectorAll(".fake-image");
for (const fakeImage of fakeImages.entries()) {
console.log('fakeImage: ', fakeImage);
};

values

const fakeImages = document.querySelectorAll(".fake-image");
for (const fakeImage of fakeImages.values()) {
console.log('fakeImage: ', fakeImage);
};

keys

const fakeImages = document.querySelectorAll(".fake-image");
for (const fakeImage of fakeImages.keys()) {
console.log('fakeImage: ', fakeImage);
};

4. forEach

The most important note on this is that it’s only supported in modern browsers. For support in older browsers you definitely need a compiler.

Support: All modern browsers! Not supported in IE11 or lower.

const fakeImages = document.querySelectorAll(".fake-image");
fakeImages.forEach(fakeImage => {
console.log('fakeImage: ', fakeImage);
});

5. (ES2015) Spread syntax with forEach

For support in older browsers you definitely need a compiler, because the support is not completely implemented in all the modern browsers.

Support: Almost all modern browsers! Not supported in IE11 or lower.

const fakeImages = document.querySelectorAll(".fake-image");
[...fakeImages].forEach(fakeImage => {
console.dir(fakeImage);
});

Thanks


Mr Frontend Community

Mr Frontend encourage developers that want to grow their skillset! Want to join a community of developers & nice coaches? Join on slack: https://publicslack.com/slacks/mrfrontend/invites/new

JS dev Ray

Written by

Javascript Developer

Mr Frontend Community

Mr Frontend encourage developers that want to grow their skillset! Want to join a community of developers & nice coaches? Join on slack: https://publicslack.com/slacks/mrfrontend/invites/new

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade