Introduction
Within HTML, the HTML collection is a grouping of HTML elements resembling an array. It is accessible through different DOM techniques like "getElementsByTagName" or "querySelectorAll". It's important to note that the HTML collection differs from a true array.
Furthermore, it lacks support for operations specific to arrays. Therefore, it becomes necessary to transform the HTML Collection into an array to carry out particular array-specific tasks. This tutorial will cover various methods for converting an HTMLCollection into an array.
Using Array. prototype.slice:
By utilizing this approach, we are able to associate the call function with Array.prototype.slice. This technique enables the invocation of Array.prototype.slice on HTMLCollection as well. Furthermore, it facilitates the conversion of HTMLCollection into an Array by generating a superficial duplicate utilizing this mechanism.
Syntax:
By utilizing the following syntax, we are able to execute the implementation of Array.prototype.slice.
Array.prototype.slice.call(htmlCollection)
Example:
Consider an example to enhance our understanding of Arrays, specifically the prototype.slice method.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Welcome to our tutorial</h1>
<div>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 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:
Using Array.from:
The functionality was introduced in ES6 and is now available in HTML. The method accepts an object that resembles an array as an argument and produces a new array with identical elements. In our scenario, the object mimicking an array is an HTMLCollection. We need to apply this method to convert the HTMLCollection into an array, resulting in a new array.
Syntax:
The following syntax can be utilized to employ the Array.from method:
<p>Let us understand this by taking an example.</p>
<h3 class="h3">HTML code:</h3>
<div class="codeblock"><textarea name="code" class="xml">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Welcome to our tutorial</h1>
<div>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
</div>
<script>
// Return an HTMLCollection
const htmlCollection =
document.getElementsByTagName("p");
const array = Array.from(htmlCollection);
console.log(array);
</script>
</body>
</html>
Output:
Using Spread Operator:
By utilizing this technique, we are able to transform an HTMLCollection into an array. This approach involves unpacking an iterable entity into individual elements. By employing the spread syntax within square brackets, we can generate an array that mirrors the elements present in the HTMLCollection.
Syntax:
By utilizing the syntax provided below, we can incorporate the spread operator functionality.
[...htmlCollection]
Let us understand this by taking an example.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Welcome to our tutorial</h1>
<div>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
</div>
<script>
// Return an HTMLCollection
const htmlCollection =
document.getElementsByTagName("p");
const array = [...htmlCollection];
console.log(array);
</script>
</body>
</html>
Output:
Using for-loop:
Converting an HTML collection to an array is a frequently used method in programming.
Syntax:
With the help of the below syntax, we can implement this method.
const array = [];
for (let i = 0; i < collection.length; i++) {
array.push(collection[i]);
}
Let us understand this by taking an example.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Welcome to our tutorial</h1>
<div>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 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: