How to convert HTMLCollection to an Array

How to convert HTMLCollection to an Array?

Short answer

let arr = Array.prototype.slice.call( HTMLCollection )

let arr [ ].slice.call(HTMLCollection);

let arr = Array.from(HTMLCollection);

let arr = […HTMLCollection]

Detail Explanation

Let’s look at the following html code.

<body>
  <ul class="fruit-list">
    <li class="fruit-item">apple</li>
    <li class="fruit-item">banana</li>
    <li class="fruit-item">orange</li>
    <li class="fruit-item">grape</li>
  </ul>
<script>
  let fruits = document.getElementsByClassName('fruit-item');
  console.log(fruits);
</script>
</body>

In browser, the following html code will look like this.

  • apple
  • banana
  • orange
  • grape

truncated for brevity

….

<script>

        let fruits = document.getElementsByClassName(‘fruit-item’);

        console.log(fruits);

</script>
….

In console log, we will get

∇HTMLCollection(4)

0: li.fruit-item

1: li.fruit-item

2: li.fruit-item

3: li.fruit-item

length: 4

[[Prototype]]: HTMLCollection

What is a HTMLCollection?

HTMLCollection  is a list of nodes. It is like an array, i.e we can access the values in HTML collection by referring it’s index.

truncated for brevity

….

<script>

        let fruits = document.getElementsByClassName(‘fruit-item’);

        console.log(fruits[2].innerHTML);

</script>

….

//orange

Although, it is structured like an array with coma separated values inside brackets, you can apply array methods on HTMLCollection without converting it to an array first otherwise you will get the following error.

truncated for brevity

….

<script>

        let fruits = document.getElementsByClassName(‘fruit-item’);

        fruits.forEach(function (li) {

console.log(li.innerHTML);

});

</script>

…..

// Uncaught TypeError: fruits.forEach is not a function

You can use anyone methods listed in short answer section to convert HTMLCollection to an array.

truncated for brevity

….

<script>

let fruits = document.getElementsByClassName(‘fruit-item’);

fruits = Array.from(fruits);    /* convert to array */

fruits.forEach(function (li) {

   console.log(li.innerHTML.toUpperCase());

});

</script>

…..

APPLE

BANANA

ORANGE

GRAPE

Converting NodeList

NodeList can be converted into an array in same way as HTMLCollection.

let arr = Array.prototype.slice.call( NodeList )

let arr = [ ].slice.call(NodeList);

let arr = Array.from(NodeList);

let arr = [… NodeList]

truncated for brevity

……

<script>

let fruits = document.querySelectorAll(‘.fruit-item’);

fruits = Array.from(fruits);

fruits.reverse();

fruits.forEach(function (li) {

    console.log(li.innerHTML);

});

</script>

……

grape

orange

banana

apple

Remember, unlike HTMLCollection you can use forEach array method on NodeList without converting it to an array first.

truncated for brevity

……

<script>

let fruits = document.querySelectorAll(‘.fruit-item’);

fruits.forEach(function (li) {

   console.log(li.innerHTML);

});

</script>

……

apple

banana

orange

grape