Convert HTMLCollection into array in JavaScript

By /

In this post, we will see how to convert HTMLCollection into an array in JavaScript.
The HTMLCollection is a array-like collections (list) of HTML elements (nodes) extracted from a document. The elements in an HTMLCollection can be accessed by their name, id, or index (starting from 0).

Now even though HTMLCollection object looks like an array, it does not give us useful array methods like forEach() to loop through its elements.

So, to loop through each element in an HTMLCollection object we have to convert it first to an array and then use the array method forEach on its elements.

Ways to convert HTMLCollection to an array are:

  1. Using Spread Operators (...)
  2. Using Array.from() to convert to array
  3. Using Array.prototype.slice.call() or [].slice.call() method.
  4. Using concat with spread operator
  5. Using for loop to convert HTMLCollection to array

Let’s see each method using examples.

<div class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>

Here we have four divs with class “mydiv“, we can query all of them using document.getElementsByClassName() in JavaScript.

Using Spread Operator to convert HTMLcollection to an array

The spread operator ( ... ) in Javascript allows iterable to expand its values and quickly copy all the elements of an array or array-like object into a new array.

<script>
    const newArray = [...document.getElementsByClassName('mydiv')];
</script>

Convert to arrray using Array.from()

We can also use Array.from() method to convert an array-like object to an actual array.

The Array.from() method is used to create a new, shallow copied Array from an array-like object in JavaScript.

<script>
    const newArr = Array.from(document.getElementsByClassName('mydiv'));
</script>

Using Array.prototype.slice.call() method to convert array-like object to array

We can also convert HTMLCollection to a JavaScript array using the slice method.

We can use the Array.prototype.slice.call() or [].slice.call() method to convert an array-like object to a array like this.

<script>
    const htmlCol = document.getElementsByClassName('mydiv');
    const newArr =  Array.prototype.slice.call(htmlCol);
</script>

Here, we have selected all the html divs with class name ‘mydiv’ using getElementsByClassName() method.

Next, we called the slice method along will call() that returns a copy of an array from the array-like object (here HTMLCollection) and then saves the copy to a new array object.

We can also use the shorthand of Array.prototype.slice.call() like this.

const newArr =  [].slice.call(htmlCol);

Using concat method with spread operator

The concat() method is used to join two or more arrays together and create a new array in JavaScript.

Here, we can use the spread operator to coverts the array-like iterable (here HTMLCollection) of the divs into a Javascript array and concatenates (joins) it to an empty array.

<script>
    const htmlCol = document.getElementsByClassName('mydiv');
    const newArr  = [].concat(...htmlCol)
</script>

Thus, we get a new array, newArr on which we can use forEach() method to loop in JavaScript.

Convert to array using for loop in JavaScript

This is the last method that is suitable for all browsers i.e using the for loop.

Here, we can loop through each element of HTMLCollection using for loop and push the items into a new Array on each loop.

Example:

<script>
    const htmlCol = document.getElementsByClassName('mydiv');
    const newArr =[]
    for(let i=0; i< htmlCol.length; i++){
        newArr.push(htmlCol[i])
    }
}
</script>

Since HTMLCollections have the length property, we can use it to iterate till it satisfies the condition i< htmlCol.length and on each iteration we push the items to the empty array newArr.

Related Topics:

Use Array forEach() to loop through JavaScript object

Convert javascript array to object of same keys/values

Related Posts

Scroll to Top