In Javascript, what is the best way to convert a NodeList to an array

Question

The DOM method document.querySelectorAll() (and several others) returns a NodeList .

To work on a list, for example. using forEach() , the NodeList must first be converted to Array .

What is the best way to convert NodeList to Array ?

Answer 1

With ES6, you can simply do:

 const spanList = [...document.querySelectorAll("span")]; 

Answer 2

With ES6, you can use Array.from(myNodeList) . Then use your favorite array method.

 var myNodeList = document.querySelectorAll('.my-selector'); // ALT 1 Array.from(myNodeList).forEach(function(el) { console.log(el); }); 

Use the ES6 slot to make this work in older browsers.

---

If you are using a transpiler (e.g. Babel), there are two more alternatives:

 var myNodeList = document.querySelectorAll('.my-selector'); // ALT 2 for (var el of myNodeList) { el.classList.add('active'); // or some other action } // ALT 3 [...myNodeList].forEach((el) => { console.log(el); }); 

Answer 3

You can convert it to an array using the slice method from the Array prototype:

 var elList = document.querySelectorAll('.viewcount'); elList = Array.prototype.slice.call(elList, 0); 

---

Also, if all you need is forEach , you can call this from an Array prototype without first having to resort to an array:

 var elList = document.querySelectorAll('.viewcount'); Array.prototype.forEach.call(elList, function(el) { console.log(el); }); 

---

In ES6, you can use the new Array.from function to convert it to an array:

 Array.from(elList).forEach(function(el) { console.log(el); }); 

Currently, this is only in short-term browsers, but if you are using the polyfill service , you will have access to this function through the board.

---

If you are using the ES6 transporter , you can even use for..of instead:

 for (var element of document.querySelectorAll('.some .elements')) { // use element here } 

Answer 4

Why convert? - just call the array function directly in the collection of elements;)

 [].forEach.call( $('a'), function( v, i) { // do something }); 

Assuming $ is your alias for querySelectorAll of course

---

edit: ES6 allows for even shorter syntax [...$('a')] (only works in Firefox since May 2014)

Answer 5

Should there be forEach ? You can simply use the for loop to iterate over the list:

 for (var i = 0; i < elementList.length; i++) { doSomethingWith(elementlist.item(i)); } 

Answer 6

To work with a list in javascript, for example. using forEach (), the NodeList should be converted to an array.

This is not necessarily true. You can add .forEach () from Array to NodeList and it works fine:

 if ( ! NodeList.prototype.forEach ) { NodeList.prototype.forEach = Array.prototype.forEach; } 

Now you can run:

 myNodeList.forEach(function(node){...}) 

Iterate over NodeLists just like arrays.

This gives much shorter and cleaner code than .call () everywhere.

Answer 7

ES6 allows cool methods like var nodeArray = Array.from(nodeList) , but my favorite is the new spread operator.

 var nodeArray = Array(...nodeList); 

Answer 8

It worked with me in ES6

suggests that you have such a nodelist

 <ul> <li data-time="5:17">Flexbox video</li> <li data-time="8:22">Flexbox video</li> <li data-time="3:24">Redux video</li> <li data-time="5:17">Flexbox video</li> <li data-time="7:17">Flexbox video</li> <li data-time="4:17">Flexbox video</li> <li data-time="2:17">Redux video</li> <li data-time="7:17">Flexbox video</li> <li data-time="9:54">Flexbox video</li> <li data-time="5:53">Flexbox video</li> <li data-time="7:32">Flexbox video</li> <li data-time="2:47">Redux video</li> <li data-time="9:17">Flexbox video</li> </ul> const items = Array.from(document.querySelectorAll('[data-time]')); console.log(items); 

Answer 9

Assuming elems is a nodeList:

 var elems = document.querySelectorAll('select option:checked'); 

then it can be converted to an array as follows:

 var values = [].map.call(elems, function(obj) { return obj.value; }); 

Link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Example:_using_map_generically_querySelectorAll