HTMLCollection forEach loop – Convert object to array: JavaScript

forEach loop JavaScript

Ever had an array-like object that you want to iterate over? These annoying collections, which look like arrays, don’t have access to useful array methods like the ‘forEach‘ loop. They include objects with a length property, such as HTMLCollection, NodeList, argument list and even strings. Today I’m going to show you how to make these objects a little bit more useful, by converting them into JavaScript arrays.

Let’s start with a simple scenario where we have 5 divs. Each div has the same class and we query for a HTMLCollection using ‘getElementsByClassName‘.

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

    const boxes = document.getElementsByClassName('box');

Here are 4 ways to convert the returned HTMLCollection to an array.

Convert to array using a spread operator

A spread operator will allow us to expand the values of our array-like object and push them into a new array. This works because the HTMLCollection is iterable. The code looks something like this:

const boxArray = [...document.getElementsByClassName('box')];

Convert to array using Array.from()

Array.from does what it sounds like; it converts array-like objects to actual arrays. This is my preferred method of converting to array because it is semantically very easy to read at a glance. You should note that this method isn’t actually supported by Internet Explorer, but who cares about Internet Explorer now anyway…

const boxes = Array.from(document.getElementsByClassName('box'));

Convert to array using

More widely supported, we can use the (or [] for short) methods for converting. Basically we are using the array method ‘slice‘ (which returns a copy of an array) on an array-like object with a ‘call’ method, and then saving the copy into a new array object.

var boxes ='box'));

var boxes = []'box'));

Convert to array using an iterator loop

Last, but not least, you could solve this problem the good old fashioned way; with a simple iterator loop. From here we could loop our array-like object ‘as-is’ or push each iteration to a new array (in this case ‘boxArray’) for a future use.

const boxes = document.getElementsByClassName('box');
const boxArray = [];

for (let i = 0; i < boxes.length; i++) {

    // At this point we could also push the elements to an array

  1. Mike says:

    Exactly what I needed.

  2. David says:


  3. Guillaume says:

    Ohhh thank you dude !!! I wanted to style elements by classNames but it doesn’t work with forEarch. I searched documentation everywhere about this.

  4. Tobias says:

    Thanks ever so much – just what I needed!

  5. mwai wachira says:

    I am getting [object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement] as the output to innerHTML I have set. How can I get the actual values between the DIVS.

  6. Ana Maria says:

    Thank you! This article was all I needed!

Join the discussion!

You might like: