For loop for HTMLCollection elements

Essential facts

Working with HTMLCollections to manipulate the DOM is a common scenario. Here are some reliable methods to iterate over these objects.

Cruising with a for...of loop

The for...of loop is widely supported in modern browsers and provides an efficient option to iterate over HTMLCollections:

// "Just keep spinning," said the JavaScript engine.
let elements = document.getElementsByClassName('example');
for (let element of elements) {
    console.log(element.id);
}


Array conversion for expanded functionality

Sometimes you need more power. Converting an HTMLCollection to an Array enables the use of array-specific methods:

// Map the stars, or just your DOM elements.
let elementsArray = Array.from(document.getElementsByClassName('example'));
elementsArray.map(elem => elem.textContent);


Rolling by with Array.prototype.forEach

Before Array.from() hit the stage, Array.prototype.forEach was borrowed often to iterate HTMLCollections:

// Array.prototype: "Borrow my forEach, I insist."
let collection = document.getElementsByClassName('example');
Array.prototype.forEach.call(collection, function(elem) {
  console.log(elem);
});


Albeit old, this approach remains crucial for legacy browsers missing support for iterable HTMLCollections.

Exercise caution with for...in

The for...in loop is designed for object properties, not numerical indexes:

// A loop less travelled. Proceed with caution!
for (let key in collection) {
  if (collection.hasOwnProperty(key)) {
    console.log(collection[key]);
  }
}


Using this loop with HTMLCollections may lead to unexpected results. Beware!

Decoding Symbol.iterator

The Symbol.iterator property lets us use for...of on NodeLists. Notably, modern browsers have added this property to HTMLCollection:

// Adding Symbol.iterator to HTMLCollection: Let the cheering begin!
HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];


Be aware! Overriding native prototypes can affect globally, so consider potential side effects.

Going beyond the basics

Array conversion using the spread operator

Less common but equally useful, the spread operator copies the collection into an array:

// Spread prosperity, or just the DOM elements.
[...document.getElementsByClassName('example')].forEach(item => console.log(item));


QuerySelectorAll() and the iterable NodeList

NodeLists are similar to HTMLCollections but behave better with forEach, thanks to the querySelectorAll method:

// "Query" is my middle name!
document.querySelectorAll('.example').forEach(elem => console.log(elem.id));


Ensuring maximum compatibility

Browser support is essential when writing cross-platform code. For wide compatibility with older browsers, the traditional for loop still shines:

// Back to the roots.
let collection = document.getElementsByClassName('example');
for (let i = 0; i < collection.length; i++) {
    console.log(collection[i].id);
}


Hints of functional programming

Embrace functional programming with methods like map and reduce by converting HTMLCollections:

// Reduce, Reuse, Recycle.
Array.prototype.reduce.call(collection, (accumulator, current) => {
    accumulator[current.id] = current;
    return accumulator;
}, {});


Striking a balance

When choosing an iteration method, consider the balance between performance, readability, and functionality. Also, consider how well it aligns with your coding style and project architecture.