Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 several ways to convert NodeList to Array, but this task can be done faster using these approaches:
Using Array.from() function (Recommended)
Using spread operator (...)
By iterating with for loop
Using Array.from() (Recommended)
The Array.from() method creates a new Array instance from an iterable or array-like object like NodeList. This is the most readable and performant approach for modern browsers.
Syntax
const nodeList = document.querySelectorAll('selector');
const arr = Array.from(nodeList);
Example
<html>
<body>
<h2>Convert JavaScript NodeList to Array</h2>
<p>First paragraph</p>
<p>Second paragraph</p>
<div id="output"></div>
<script>
// Get NodeList of all p elements
const nodeList = document.querySelectorAll('p');
console.log('NodeList:', nodeList);
console.log('Is NodeList an array?', Array.isArray(nodeList));
// Convert to array using Array.from()
const arr = Array.from(nodeList);
console.log('Converted Array:', arr);
console.log('Is converted result an array?', Array.isArray(arr));
// Now we can use array methods
const textContent = arr.map(p => p.textContent);
console.log('Text content:', textContent);
document.getElementById('output').innerHTML =
`<p>Array length: ${arr.length}</p>
<p>Text content: ${textContent.join(', ')}</p>`;
</script>
</body>
</html>
Using Spread Operator (...)
The spread operator provides a concise syntax to convert NodeList to Array. This is the shortest approach available in ES6+.
Syntax
const nodeList = document.querySelectorAll('selector');
const arr = [...nodeList];
Example
<html>
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div id="output"></div>
<script>
const nodeList = document.querySelectorAll('.item');
// Convert using spread operator
const arr = [...nodeList];
console.log('Original NodeList:', nodeList);
console.log('Converted Array:', arr);
// Use array methods
const filtered = arr.filter(div => div.textContent.includes('2'));
console.log('Filtered result:', filtered);
document.getElementById('output').innerHTML =
`<p>Found ${arr.length} elements</p>
<p>Filtered: ${filtered[0].textContent}</p>`;
</script>
</body>
</html>
Using For Loop (Traditional)
While not the fastest, the for loop method works in all browsers including older ones. Use this when you need maximum compatibility.
Syntax
const len = nodeList.length;
const arr = new Array(len);
for (let i = 0; i < len; i++) {
arr[i] = nodeList[i];
}
Example
<html>
<body>
<span>Span 1</span>
<span>Span 2</span>
<div id="output"></div>
<script>
const nodeList = document.querySelectorAll('span');
// Traditional for loop conversion
const len = nodeList.length;
const arr = new Array(len);
for (let i = 0; i < len; i++) {
arr[i] = nodeList[i];
}
console.log('NodeList length:', nodeList.length);
console.log('Array length:', arr.length);
console.log('Array:', arr);
document.getElementById('output').innerHTML =
`<p>Converted ${arr.length} elements using for loop</p>`;
</script>
</body>
</html>
Performance Comparison
| Method | Performance | Browser Support | Readability |
|---|---|---|---|
Array.from() |
Fast | ES6+ (IE not supported) | Excellent |
[...nodeList] |
Fastest | ES6+ (IE not supported) | Excellent |
for loop |
Good | All browsers | Good |
Common Use Cases
Converting NodeList to Array is useful when you need to:
Use array methods like
map(),filter(),reduce()Combine multiple NodeLists using
concat()Sort DOM elements using
sort()Remove duplicates or manipulate the collection
Conclusion
For modern applications, use the spread operator [...nodeList] for its conciseness and performance. Use Array.from() when you need additional transformation. The for loop method remains useful for legacy browser support.
2K+ Views
