Convitiendo una Node List a un Array.
El método querySelectorAll
devuelve un array similar a un objeto, llamado una lista de nodos. Estas estructuras de datos se denominan como “Array-like”, porque aparecen como un array, pero no se pueden utilizar con los métodos de matriz como map
y forEach
. Aquí está una manera rápida, segura y reutilizable para convertir una lista de nodos en un Array de elementos del DOM:
const nodelist = document.querySelectorAll('div');
const nodelistToArray = Array.apply(null, nodelist);
//later on ..
nodelistToArray.forEach(...);
nodelistToArray.map(...);
nodelistToArray.slice(...);
//etc...
El método apply
se utiliza para pasar una serie de argumentos a una función con un determinado valor de this
.MDN afirma que apply
tendrá un objeto de tipo vector, que es exactamente lo que querySelectorAll
retorna. Dado que no es necesario especificar un valor para this
en el contexto de la función, se pasa en null
o 0
. El resultado es una matriz real de los elementos DOM que contiene todos los métodos de arreglos disponibles.
O si esta utilizando ES2015 puede usar esto spread operator ...
const nodelist = [...document.querySelectorAll('div')]; // returns a real array
//later on ..
nodelist.forEach(...);
nodelist.map(...);
nodelist.slice(...);
//etc...
Use the 100 answers in this short book to boost your confidence and skills to ace the interviews at your favorite companies like Twitter, Google and Netflix.
GET THE BOOK NOWA short book with 100 answers designed to boost your knowledge and help you ace the technical interview within a few days.
GET THE BOOK NOW