Fastest way to convert JavaScript NodeList to Array?
With ES6, we now have a simple way to create an Array from a NodeList: the Array.from()
function.
// nl is a NodeList
let myArray = Array.from(nl)
2021 update: nodeList.forEach() is now standard and supported in all current browsers (around 95% on both desktop & mobile).
So you can simply do:
document.querySelectorAll('img').forEach(highlight);
Other cases
If you for some reason want to convert it to an array, not just iterate over it - which is a completely relevant use-case - you can use [...destructuring]
or Array.from
since ES6
let array1 = [...mySetOfElements];
// or
let array2 = Array.from(mySetOfElements);
This also works for other array-like structures that aren't NodeLists
HTMLCollection
returned by e.g.document.getElementsByTagName
- objects with a length property and indexed elements
- iterable objects (objects such as
Map
andSet
)
Outdated 2010 Answer
The second one tends to be faster in some browsers, but the main point is that you have to use it because the first one is just not cross-browser. Even though The Times They Are a-Changin'
@kangax (IE 9 preview)
Array.prototype.slice can now convert certain host objects (e.g. NodeList’s) to arrays — something that majority of modern browsers have been able to do for quite a while.
Example:
Array.prototype.slice.call(document.childNodes);