Una NodeList es un objeto similar a una matriz que representa una colección de elementos DOM o, más específicamente, nodos. Es como una matriz, pero no puede usar los métodos de matriz comunes como map() , slice() y filter() en un NodeList objeto.
Echa un vistazo a esta guía para entender la diferencia entre un NodeList y una matriz.
En este artículo, veremos diferentes formas de convertir un NodeList objeto a una matriz en JavaScript.
Array.from() Método
En JavaScript moderno, la forma más simple y fácil de convertir un NodeList objeto a una matriz es usando el método Array.from():
// create a `NodeList` object
const divs = document.querySelectorAll('div');
// convert `NodeList` to an array
const divsArr = Array.from(divs);
La salida del código anterior es normal Array objeto que contiene todos los nodos devueltos por el querySelectorAll() método.
El Array.from() El método se introdujo en ES6 y crea un nuevo Array de copia superficial objeto del NodeList objeto. Desafortunadamente, solo funciona en navegadores modernos. Para admitir navegadores antiguos como IE, necesita un polyfill.
Operador de propagación
Otra forma de crear un Array objeto de un NodeList es mediante el uso de la sintaxis del operador de propagación ([...iterable] ):
// create a `NodeList` object
const divs = document.querySelectorAll('div');
// convert `NodeList` to an array
const divsArr = [...divs];
El operador de propagación de ES6 es una forma concisa y genial de convertir un NodeList a una matriz en JavaScript. Sin embargo, solo funciona en navegadores modernos.
Array.prototype.slice() Método
Finalmente, la última forma de convertir un NodeList a un Array el objeto es usando el call() método para ejecutar el Array.prototype.slice() método en el NodeList objeto como se muestra a continuación:
// create a `NodeList` object
const divs = document.querySelectorAll('div');
// convert `NodeList` to an array
const divsArr = Array.prototype.slice.call(divs);
También puede usar una forma concisa del método anterior:
const divsArr = [].slice.call(divs);
El Array.prototype.slice.call() funciona bien en todos los navegadores modernos y antiguos, incluido IE 6+. Debe utilizar este enfoque si desea admitir la mayor cantidad de navegadores.
Todos los métodos anteriores brindan una matriz de JavaScript real, que puede iterar usando forEach() y usar todos sus métodos de matriz favoritos para hacer cosas diferentes.