In this tutorial, we will learn the fastest way to convert JavaScript NodeList to Array. NodeList is an array-like structure; 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 many ways to convert a NodeList to an Array, but this task can be accomplished faster using these two methods -
By iterating through for loop
Use Array.from( ) function
In JavaScript, we can use a for loop to iterate over a NodeList to get all elements to perform a specific task. So, by iterating over the NodeList, we copy all the elements of the NodeList in the array.
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 an array of that size. When we know the array size, it is better to declare a fixed size array. Then we use a for loop to assign values in the array.
Step 1 - Store the length of nodeList in the len variable.
Step 2 - Declare an array of size len.
Step 3 - In the for loop, initialize the counter variable "i" with the value 0.
Step 3.1 - Iterate the loop until "i" is not equal to len.
Step 3.2 - In the update condition, increase "i" by 1.
Step 3.3 - In the for loop body, assign the value of the i-th index of NodeList to the i-th index of the array.
< /里>In the following example, using the Document method document.querySelectorAll(), we get a NodeList of type selector "div". We are converting this NodeList to 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 use a for loop to create an actual array from the NodeList. We use const to save the length of the NodeList in ‘len’ and declare an array of size ‘len’; this will make our operation faster.
We have 3 "div" elements. Hence, we get an array of size 3 as shown in the output.
This method can be used to create an Array instance of an iterable object or an array-like object. We are converting a NodeList, which has a similar structure to an array.
Using ES6 (ECMAScript 6), we can get an array from a NodeList very easily using the Array.from() function. If we don't want to iterate over the NodeList and just want to convert it, then this will be the fastest way.
const nodeList = document.querySelectorAll('p'); let arr = Array.from(nodeList);
Here, we create a NodeList of type selector "p" using document.querySelectorAll() of Document method. We pass this NodeList as a parameter into the Array.from() function. This function returns an array. We only need one line of code to convert it to an array, which makes it easy to remember and understand.
In the following example, we create a NodeList of type selector "p". We convert this NodeList to an array using the 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, the user sees that we got an array containing 2 "p" elements. Therefore, our NodeList is successfully converted to an array using only one function call.
Note - The above method works well in all modern browsers but may not work properly in older browsers.
We have learned to convert NodeList to Array. The first way is to use a for loop by iterating over the NodeList. The second way is to use the Array.from() method. When the user only wants to convert the NodeList, rather than iterate over it, it is recommended to use the Array.from() method.
The above is the detailed content of Fastest way to convert JavaScript NodeList to Array. For more information, please follow other related articles on the PHP Chinese website!