Fastest way to convert JavaScript NodeList to Array
There are many ways to convert a NodeList to a JavaScript array but the fastest of all is a new method from ES6. In ES6, we can now simply create an Array from a NodeList using the Array.from() method.
Approach
The JavaScript Array.from() method is used to create a new array instance from a given array. In the case of a string, every alphabet of the string is converted to an element of the new array instance, and in the case of integer values, a new array instance simply takes the elements of the given array.
Syntax:
let my_arr = Array.from( given_nodelist );
Example: This example shows the use of the above-explained approach.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > </ head > < body > < h1 style = "color: green" > w3wiki </ h1 > < div class = "content primary" > < p > A Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles, quizzes and placement guides. </ p > </ div > < div class = "content secondary" > < p >This example demonstrates the fastest way to convert from a NodeList to an array. </ p > </ div > < script > // This will act select all div DOM elements in the page let nodelist = document.querySelectorAll('div'); // This will convert the DOM NodeList // to a JavaScript Array Object let my_arr = Array.from(nodelist); // Display the array in the console console.log(my_arr); // Display all the values of the // array in the console for (let val of my_arr) { console.log(val); } </ script > </ body > </ html > |
Output:
Contact Us