Most efficient Way to Convert an HTMLCollection to an Array

0 0 2 minutes read

HTMLCollection is an array-like collection of HTML elements returned by various DOM methods, such as “getElementsByTagName” or “querySelectorAll”. This collection seems like an array but it does not support array-specific operation. Sometimes it’s required to convert the HTMLCollection to an array to perform certain array-specific operations. In this article, we’ll see all possible ways to convert an HTMLCollection to an array and see which of those is more efficient and why.

Approach 1: Converting an HTMLCollection to an Array using Array.prototype.slice(): Here we bind the call() method with Array.prototype.slice(). This will invoke Array.prototype.slice() on HTMLCollection. This method converts the HTMLCollection to the array by creating a shallow copy of it. Below is the syntax we’ll use.

Syntax:

Array.prototype.slice.call(htmlCollection)

Example: In this example, we are using the Array.prototype.slice() method.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>HTMLCollection To Array Conversion</title> 
</head> 
<body> 
    <div> 
        <p>This is para 1</p> 
        <p>This is para 2</p> 
        <p>This is para 3</p> 
    </div> 
  
    <script> 
  
        // Return an HTMLCollection 
        const htmlCollection =  
            document.getElementsByTagName("p"); 
        const array = Array.prototype 
            .slice.call(htmlCollection); 
        console.log(array); 
    </script> 
</body> 
</html>

Output:

HTMLCollection to Array – Method 1

Approach 2: Converting an HTMLCollection to an Array using Array.from(): The Array.from() method is available from ES6. This method takes an array-like iterable object and returns a new array with the same elements. In our case the array-like iterable object is HTMLCollection. We simply pass it to this method and accept an array from it.

Syntax:

Array.from(htmlCollection)

Example: In this example, we are using Array.from() method.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>HTMLCollection to Array Conversion</title> 
</head> 
<body> 
    <div> 
        <p>This is para 1</p> 
        <p>This is para 2</p> 
        <p>This is para 3</p> 
    </div> 
  
    <script> 
  
        // Return an HTMLCollection 
        const htmlCollection =  
            document.getElementsByTagName("p"); 
        const array = Array.from(htmlCollection); 
        console.log(array); 
    </script> 
</body> 
</html>

Output:

HTMLCollection to Array – Method 2

Approach 3: Converting an HTMLCollection to an Array using Spread Operator: Using spread syntax also we can convert an HTMLCollection to an array. The spread syntax(. . .) 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:

[...htmlCollection]

Example: In this example, we are using the spread operator.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>HTMLCollection to Array Conversion</title> 
</head> 
<body> 
    <div> 
        <p>This is para 1</p> 
        <p>This is para 2</p> 
        <p>This is para 3</p> 
    </div> 
  
    <script> 
  
        // Return an HTMLCollection 
        const htmlCollection =  
            document.getElementsByTagName("p"); 
        const array = [...htmlCollection]; 
        console.log(array); 
  
    </script> 
</body> 
</html>

Output:

HTMLCollection to Array – Method 3

Approach 4: Converting an HTMLCollection to an Array using for-loop: This is the most common approach to convert an HTMLCollection to an array. Here we simply iterate over the HTMLCollection and push each element into a new array.

Syntax:

const array = [];
for (let i = 0; i < collection.length; i++) {
  array.push(collection[i]);
}

Example: In this example, we are using the above-explained method.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>HTMLCollection to Array Conversion</title> 
</head> 
<body> 
    <div> 
        <p>This is para 1</p> 
        <p>This is para 2</p> 
        <p>This is para 3</p> 
    </div> 
  
    <script> 
  
        // Return an HTMLCollection 
        const collection = document.getElementsByTagName('p'); 
        const array = []; 
        for (let i = 0; i < collection.length; i++) { 
            array.push(collection[i]); 
        } 
        console.log(array); 
  
    </script> 
</body> 
</html>