search

Home >Web Front-end >JS Tutorial >Fastest way to convert JavaScript NodeList to Array

Fastest way to convert JavaScript NodeList to Array

WBOY
WBOYforward
2023-08-31 21:01:22934browse

将 JavaScript NodeList 转换为数组的最快方法

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

By iterating through for loop

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.

grammar

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.

algorithm

  • 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.

Example

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.

Use Array.from() function

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.

grammar

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.

Example

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!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：A comprehensive guide to customizing jQuery UI widget themesNext article：A comprehensive guide to customizing jQuery UI widget themes

Related articles

See more