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> |
Output:
HTMLCollection to Array – Method 4
