Cuando usamos una misma clase para múltiples elementos de HTML, podemos acceder a todos estos nodos mediante la propiedad document.querySelectorAll('.class-name'). Esto nos mostrará un tipo de dato llamado NodeList el cual, a su vez, pese a mostrar todos los elementos que coinciden con la clase enviado a querySelectorAll como un array, no es lo mismo que un array “tradicional” como el que conocemos de toda la vida…

Esta diferencia se basa en que NodeList aunque podría iterarse sobre él usando forEach, no es compatible con todos los métodos con los que podría usarse en un array común. Por ejemplo, con NodeList no podríamos usar métodos como reduce, map, filter, some, etc.

Siempre que usemos querySelectorAll para iterar sobre varios nodos que manejan una clase en común, podemos convertir a NodeList en un array tradicional usando la propiedad Spread Operator que ofrece ES6. De hecho, siempre que se trabaje con NodeList es recomendable pasarlo a un array tradicional. Esto se debe a que los motores de JS en el navegador, principalmente V8 de Chrome, están optimizados para trabajar con arrays.

Accediendo a múltiples nodos con querySelectorAll:

const nodeList = document.querySelectorAll('div') 

Resultado de ejemplo:

> NodeList(5) [div.container, div.input-group, div.form, div.invalid, div.feedback] 

Convertir NodeList a un array tradicional:

const nodeListAsArray = [...nodeList] 

Si te gustó el post o tienes algún comentario, cuéntame en Twitter. 😀