En Javascript, ¿cuál es la mejor manera de convertir una NodeList en una matriz?

El método DOM document.querySelectorAll()(y algunos otros) devuelve un NodeList.

Para operar en la lista, por ejemplo, usando forEach(), NodeListprimero debe convertirse a un Array.

¿Cuál es la mejor manera de convertir el NodeListen un Array?

Con ES6 simplemente puede hacer:

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

Con ES6 puedes usar Array.from(myNodeList). Luego usa tu método de matriz favorito.

var myNodeList = document.querySelectorAll('.my-selector');

// ALT 1
Array.from(myNodeList).forEach(function(el) {
  console.log(el);
});

Use una corrección ES6 para que esto funcione también en navegadores más antiguos.

Si está utilizando un transpilador (por ejemplo, Babel), hay dos alternativas más:

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);
});

Puede convertirlo en una matriz utilizando el slicemétodo del Arrayprototipo:

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

Por otra parte, si todo lo que necesita es forEach, puede invocar que desde el Arrayprototipo, sin coaccionar a una matriz en primer lugar:

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

En ES6, puede usar la nueva Array.fromfunción para convertirlo en una matriz:

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

Actualmente, esto solo se encuentra en los navegadores más avanzados, pero si está utilizando un servicio de polyfill , tendrá acceso a esta función en todos los ámbitos.

Si está usando un transpilador ES6 , incluso puede usar un for..ofbucle en su lugar:

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

¿Por qué convertir? - solo callfunciona con Array directamente en la colección de elementos;)

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

asumiendo que $ es su alias para querySelectorAll , por supuesto

editar: ES6 permite una sintaxis aún más corta [...$('a')]( funciona solo en Firefox, a partir de mayo de 2014 )

¿Tiene que ser así forEach? Simplemente podría usar un forbucle para iterar sobre la lista:

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

Actualización 2020: nodeList.forEach () ahora es un estándar oficial y es compatible con todos los navegadores actuales.

Los navegadores más antiguos pueden usar el polyfill a continuación.

Para operar en la lista en javascript, por ejemplo, usando forEach (), la NodeList debe convertirse en una matriz.

Eso no es cierto. .forEach()funciona en los navegadores actuales. Si falta, puede agregar .forEach () de Array a NodeList y funciona bien:

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

Ahora puede ejecutar:

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

Para iterar sobre NodeLists como Arrays.

Esto produce un código mucho más corto y limpio que .call () en todas partes.

ES6 permite formas geniales como, var nodeArray = Array.from(nodeList)pero mi favorita es el nuevo operador de propagación.

var nodeArray = Array(...nodeList);

Eso funcionó conmigo en ES6

supongamos que tienes una lista de nodos como esa

<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);

Utilizo lo siguiente porque creo que es más fácil de leer:

const elements = document.getElementsByClassName('element');
[...elements].forEach((element) => {
   // code
});

Bueno, esto también funciona para mí:

const elements = Object.values( document.querySelector(your selector here) )

Object.values()devoluciones Arrayde valores de un objeto dado. NodeListes objeto, como todo en JS.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values

Pero no es compatible con IE, así que supongo que Array.prototype.*array_method*.call(yourNodeList)es la mejor opción. Con esto puede invocar cualquier método de matriz en suNodeList

Suponiendo que elems es un nodeList:

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

luego se puede convertir en una matriz de la siguiente manera:

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

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