Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Fastest Way to Convert JavaScript NodeList to Array
In this tutorial, we will learn the fastest way to convert JavaScript NodeList to Array. NodeList is a similar structure to an array; it is a collection of DOM (Document Object Model) elements. However, array methods like ?map( )', ?filter( )', and ?slice( )' cannot be used on NodeList objects.
There are so many ways to convert NodeList to Array, but this task can be done faster using these two ways ?
By iterating for loop
Using Array.from( ) function
By iterating for loop
In JavaScript, we can use for loop to iterate over the NodeList to get all the elements to perform a specific task. So, by iterating over the NodeList, we make a copy of all the elements of NodeList in an Array.
Syntax
const len = nodeList.length;
const arr = Array(len);
for (var i = 0 ; i != len ; i++) {
arr[i] = nodeList[i];
}
We save the length of nodeList in a variable and declare array of that size. It is good to declare fixed-size array when we know the array size. Then we assign values in the array using for loop.
Algorithm
Step 1 ? Store a length of nodeList in a len variable.
Step 2 ? Declare the array of the len size.
Step 3 ? In for loop, initialize counter variable ?i' with a value 0.
Step 3.1 ? Iterate the loop until ?i' is not equal to len.
Step 3.2 ? In the update condition, increment ?i' by one.
Step 3.3 ? Inside a body of for loop, assign a value of the i-th index of a NodeList in the i-th index of an array.
Example
In the below example, using document.querySelectorAll() the Document method, we get NodeList of the type selector ?div'. We are converting this NodeList into an array.
<html>
<body>
<h2> Convert JavaScript NodeList to Array </h2>
<div> <p> This is paragraph of first 'div' element </p> </div>
<div> <p> This is paragraph of second 'div' element </p> </div>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
output.innerHTML = " <p> This is paragraph of third 'div' element </p> "
output.innerHTML += " <b> Output of <i> NodeList </i> <b> <br> <br> ";
//get NodeList of 'div' elements
const nodeList = document.querySelectorAll('div');
//Display output of NodeList
output.innerHTML += nodeList + "<br> <br>";
output.innerHTML += "<b> Output of <i> Array </i> <b> <br> <br>";
//save length of NodeList
const len = nodeList.length;
//Declare array of size len
const arr = Array(len);
//This for loop will convert NodeList to Array
for (var i = 0 ; i != len ; i++) {
arr[i] = nodeList[i];
}
//Display output of Array
output.innerHTML += arr;
</script>
</body>
</html>
In the above code, users can see that we have used for loop to make an actual array from NodeList. We are using const to save the length of NodeList in ?len', and to declare array of size ?len'; it will make our operation faster.
We have 3 ?div' elements. So, we are getting an array of size 3, as seen in the output.
Using Array.from( ) function
This method can be used to create an Array instance of the iterable object or array-like object. We are converting NodeList, which has a similar structure to an array.
With ES6 (ECMAScript 6), we can get an Array from the NodeList very easily using Array.from() function. If we do not want to iterate over the NodeList and want to convert it only, then it will be the fastest way.
Syntax
const nodeList = document.querySelectorAll('p');
let arr = Array.from(nodeList);
Here, we have created a NodeList of the type selector ?p' using the document.querySelectorAll() the Document method. We are passing this NodeList as an argument in Array.from() function. This function returns an array. We need only one line of code to convert into array, which makes it easy to remember and understand.
Example
In the below example, we are creating a NodeList of the type selector ?p'. We are converting this NodeList into an array using Array.from() function.
<html>
<body>
<h2> Convert JavaScript NodeList to Array </h2>
<p> We are here to teach you various concepts of Computer Science through our articles.</p>
<p>Stay connected with us for such useful content.</p>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
output.innerHTML = " <b> Output of <i> NodeList </i> <b> <br> <br> ";
//get NodeList of 'p' elements
const nodeList = document.querySelectorAll('p');
//Display output of NodeList
output.innerHTML += nodeList + "<br> <br>";
output.innerHTML += " <b> Output of <i> Array </i> <b> <br> <br> ";
//This will convert NodeList to Array
let arr = Array.from(nodeList);
//Display output of Array
output.innerHTML += arr;
</script>
</body>
</html>
In the above output, users see that we are getting an array of 2 ?p' elements. So, our NodeList is successfully converted into an Array using only one function call.
Note ? The above method works very well in all modern browsers but may not work in older browsers properly.
We have learned to convert NodeList into an Array. The first method is using for loop by iterating over the NodeList. The second method is using Array.from() method. It is recommended to use Array.from the () method when the user wants to only convert the NodeList, and not to iterate over it.
1K+ Views
