Convert an HTML Collection to an Array

Introduction

In HTML, the HTML collection is a collection of HTML elements that looks like an array. We can return this HTML collection by various DOM methods, such as "getElementsByTagName" or "querySelectorAll". However, the HTML collection is not an actual array.

Also, it does not support the array-specific operations. So, we have to convert the HTML Collection to an array to perform certain array-specific operations. In this article, we are going to learn about all possible methods of converting an HTMLCollection to an array.

Using Array. prototype.slice():

With the help of this method, we can bind the call() with Array.prototype.slice(). With the help of this, we can also invoke the Array.prototype.slice() on HTMLCollection. Also, we can convert the HTMLCollection to the Array by creating a shallow copy of it with the help of this method.

Syntax:

With the help of the syntax below, we can implement the Array. prototype.slice().

Example:

Let's take an example and understand the Array better. prototype.slice().

HTML Code:

Output:

Using Array.from():

This method comes to HTML from ES6. This method takes an array-like iterable object as input and returns a new array with the same elements. In our program, the iterable object is HTMLCollection. We have to pass the method to this Array, and this method returns a new array.

Syntax:

We can implement the Array.from() with the help of the below syntax.

Output:

Using Spread Operator:

With the help of this method, we can convert an HTMLCollection to an array. This method internally expands an iterable object into multiple elements. With the use of the spread syntax inside the square brackets, we can create an array containing the same element as HTMLCollection.

Syntax:

With the help of the below syntax, we can implement the spread operator.

Let us understand this by taking an example.

HTML Code:

Output:

Using for-loop:

This is the most common way to convert the HTML collection to Array.

Syntax:

Let us understand this by taking an example.

HTML Code:

Output: