How To Convert an HTML Collection into An Array In JavaScript – Definitive Guide

There are three ways to convert an HTML Collection into an array in JavaScript.

You can convert an HTML collection into an array in JavaScript using Array.from() method.

This tutorial teaches you how to convert an HTML collection into an array in JavaScript using different methods.

HTML Collection

The following code demonstrates creating 4 paragraphs with the HTML class name para.

You can get this as a collection for converting them into an array.

<p class="head">Paragraphs are</p>

<p class="para">p1</p>
<p class="para">p2</p>
<p class="para">p3</p>
<p class="para">p4</p>

Output

The following text is rendered when the HTML code is executed.

Paragraphs are

p1

p2

p3

p4

You’ll learn the different methods to convert the HTML collection into an Array.

Convert an HTML Collection into An Array Using Array From()

The array.from() static method creates a new shallow copied array from any type of collection/iterable.

To create an array from the HTML collection,

• pass the collections to the array.from() method.
• It will return a new array based on the elements in the collection.

It also supports a map function. Use this if you want to apply a function to each element in the collection before pushing it into an array. For example, convert the text of the element into upper case.

Code

const paraCollection = document.getElementsByClassName("para");

const paraArray = Array.from(paraCollection);

paraArray.forEach(element => console.log(element.textContent));

Output

"p1”
"p2"
"p3"
"p4"

Convert an HTML Collection into An Array Using Spread Operator

The spread operator [...] expands an iterable where zero or more arguments are expected.

Using the spread operator,

• Expand the HTML collection into a JavaScript operator.

Use this method when you want to convert an HTML collection into an array and add some additional elements to the array. (Optional).

Code

The following code demonstrates adding the HTML collection with class para and an additional element with class name head.

const paraArray = [document.getElementsByClassName("head")[0], ...document.getElementsByClassName('para')];

paraArray.forEach(element => console.log(element.textContent));

Output

"p1”
"p2"
"p3"
"p4"

Convert an HTML Collection into An Array Using Array Slice Call

The call() method allows you to set the value of the this args.
When you invoke the call() method along with slice(),

• Pass the HTML collection as this arg in the slice() function

Use this method when you want to create an array with elements starting from a specific position instead of a complete array.

Code

The following code demonstrates how to use the slice.call() method to create an array with elements from starting index 1.

const paraArray = Array.prototype.slice.call(document.getElementsByClassName('para'),1);

paraArray.forEach(element => console.log(element.textContent));

Output

"p2"
"p3"
"p4"

Additional Resources

• How To Convert a String into a Character Array in JavaScript
• How To Convert A Set Into An Array In JavaScript
• How to Convert an Array into a Set in JavaScript