NodeLists vs Array
Contenido del curso
NodeLists vs Array
Contenido del curso
David Daniel Castillo Nava
La diferencia entre NodeList y Array, es que el NodeList carece de métodos que si están disponibles en los Arrays, pero podemos pasar esto fácilmente usando el operador de propagación.
// De esta forma pasamos todos los elementos en el NodeList a un arreglo al cual si podremos usar los métodos filter, map, reduce entre otros. const nodeList = document.querySelectorAll("selector css"); const elementList = [...nodeList];
Recomendación importante cada vez que obtengamos un NodeList pásemelo a Array ya que los motores de javascript como el motor V8 de google están mas optimizados para Arrays que para NodeList.
Andrés Felipe Lopez gomez
Muy buen resumen
Ian Vassallo
Buena implementación, la usaré 👌
Carlos Eduardo Gomez García
En clases anteriores les dije que devolvía un array y entre paréntesis le ponía que realmente era un NodeList, esto fue para que se hicieran una idea de qué era lo que devolvía, NodeList, aunque no es un array, se comporta muy similar, y es muy importante comprender la diferencia porque luego los empezamos a manejar como arrays y nos preguntamos por qué no funciona. . Una de las formas de convertirlos a array es la vista en la clase:
const nodeListArray = [...nodeList]
Sin embargo, a mi me gusta más está forma y es más legible:
const nodeListArray = Array.from(nodeList)
De esas formas podemos obtener un arreglo a partir de un NodeList (o cualquier objeto iterable) 👀
Beto Martinez
Me parece una forma mas legible también!
David Castillo
Y si combinamos :3
var listSelectors = Array.from(document.querySelectorAll('.py-2'));
Juan Esteban Galvis
Normalmente si es más cómodo trabajar con Array pero NodeList también tiene métodos (Por si les sirven y es algo simple pues trabajar de una vez con el NodeList y sus métodos):
Fuente: https://developer.mozilla.org/es/docs/Web/API/NodeList
Erick Fernando Guzmán Valerio
Son hash tablles¿
Rolando Mamani Salas
Muchas gracias por el aporte
Fernando Quinteros Gutierrez
📖 Artículos recomendados de Node List
Andrés D Amelio
Diferencias entre NodeList y Array
Un NodeList puede parecer mucho a un Array, pero la realidad es que son dos estructuras completamente distintas. Por un lado NodeList es una colección de nodos del DOM, extraidos del HTML y un Array es un tipo de dato especial en Javascript, donde podemos almacenar cualquier tipo de dato. Ambos tienen similitudes, como acceder a la longitud, a traves de length, acceder a los elementos a traves de su indice usando [indice]. Ahora, hay que aclara que en un NodeList no tenemos disponibles los principales metodos de Array que nos facilitan la vida, como map(), filter(), reduce(), some(). Un dato curioso y super interesante del NodeList es que es una especie de coleccion en vivo, ¿y que quiere decir esto? Que si se agrega o se elimina algun elemento del DOM los cambios son aplicados inmediatamente y de forma automatica al NodeList.
Es recomendable transformar los NodeList a Array, pues la mayoria de los motores de Javascript estan optimizados para trabajar con Arrays, en especial el motor V8 de google. Ahora veamos dos formas de transformar un NodeList en un array
// Forma 1: Spread Operator const inputs = document.querySelectorAll("input"); const inputsArray = [...inputs]; // Usando la clase Array y su método from const inputs = document.querySelectorAll("input"); const inputsArray = Array.from(inputs);
Charles Castillo Rosas
El método querySelectorAll devuelve un Node List estático. Es decir que que no se altera por algún cambio posterior en el DOM. La propiedad childNodes es una colección en vivo.
Armando Rivera
Si es más conveniente trabajar con arreglos y el motor v8 está optimizado para trabajar con éstos ¿Por qué la función querySelectorAll devuelve un nodeList y no un array directamente?
Sebastian Gonzalez
Cuando trabajamos con NodeList no estamos ocupando memoria porque estamos tomando nodos del DOM y esto permite a su vez que sea dinamico. Un ejemplo es que tenemos una pagina con 5 divs por defecto, tomamos ese nodeList y saldria que su tamaño es 5, ahora digamos que al hacer scroll se crea automaticamente otro div, esto quiere decir que ya son 6, y si miramos el nodeList este se va a actualizar. Mientras que un array no lo hara automaticamente, tendriamos que usar codigo para que aumente su tamaño.
Jonathan 🦑 Alvarez
ProfesorAdemás de los que dice @SGCifuentes: Para mantener compatibilidad con otros navegador y cumplir el estándar.
El motor V8 es usado en navegadores basados en Chrome y en NodeJS, pero hay muchos más.
Carlos Britto Cañas
Creo que la mejor forma de pasar NodeList a Array es usando :
Array.From()
Ya que cuando hay objetos dentro de los objetos, Spread no funciona tan bien
Andres Felipe Pinchao Ramirez
Nodelists 🆚 Array La principal diferencia es que el nodelist carece de metodos que el array si trae como lo son
Tiene algunas propiedades y metodos que el array si tiene como
Podremos convertir un nodeList en un array de esta forma
const nodeListArray = [...nodeList]
utilizamos el spread operator dentro de un array y en conjunto de la variable donde esta el nodelist
y así convertimos nodelist en un array, entonces podremos usar todas las funciones que tiene un array.
Siempre que tengamos un nodelist es recomendable pasarlo a array, para tener mas métodos y mejor optimización con la cual cuentan los array y los nodelist no.
Fernando Quinteros Gutierrez
🆚 NodeLists vs Array
Ideas/conceptos claves
Los objetos NodeList son colecciones de nodos como los devueltos por propiedades como Node.childNodes y el método document.querySelectorAll ()..
Recursos
NodeList
Apuntes
querySelectorAllconst nodeListAsArray = [...nodeList]
Siempre que tengas un Node List es recomendable pasarlo a array, para tener más métodos y para tener una mejor optimización la cual cuentan los arrays y no los nodeList
RESUMEN: Los NodeList son listas de elementos devueltas por el navegador, las cuales son diferentes de un array debido a que no cuentan con todos los métodos que tienen soporte los arrays como ser map o reduce. La recomendación sugiere usar siempre los nodeList como arrays
matias bravo
Todos los selectores vistos en la clase anterior arrojan un node list en vez de un array? Osea que siempre es recomendable pasarlos a array?
Nilson Diaz
Hey , Es correcto los selectores del DOM te arrojaran un Nodelist , Ahora depende de como estes trabajando , si simplemente estas manipulando un nodelist con pocos elementos y quieres modificar una de sus propiedades de vez en cuando pues podrias solucionarlo con el metodo .forEach que ya trae el node list y no complicarte un poco mas
pero como dice el profesor, si concurrentemente estas modificando lotes de nodos y en ocasiones lleguen a crecer bastante o tu no controles la cantidad de nodos, incluso que necesites algun metodo propio de un array, en alguno de estos casos si deberias pasarlo a un array aparte de que como menciona el profesor el motor de javascript esta optimizado para trabajar con Arrays
Espero te ayude !
matias bravo
muchasismas gracias nilson! saludos desde chile
Brandon Argel Verdeja Domínguez
La diferencia es que las listas de nodos carecen de los métodos que están disponibles en los arreglos, podemos arreglar esto fácilmente con el operador de propagación, o también con el método de JavaScript Array.from()
// Spread operator const elementList = [...document.querySelectorAll("div")]; // Array.from() const elementList = Array.from(document.querySelectorAll("div"));
Sebastian Gonzalez
NodeList VS Array
Basicamente un NodeList es una lista de elementos del DOM (p, div, nac, header, body, etc), la principal diferencia con un array es que carece de muchos metodos que hacen "utiles" a los array, ejemplo filter, map, reduce. Pero desde ECMAScript 6 se puede "parsear" un NodeList a un Array gracias al spread operator, esto en palabras mas palabras menos, hace que se "descomponga" ese NodeList en todos sus elemetnos los cuales van a ocupar un espacio en ese array y nos permite acceder a todos los metodos de los arrays. Para entender mejor el spread operator te recomiendo leer la documentacion de MDN
Carlos Muñoz
Buena definición de lo que hace el spread operator.
Juan Gui Arenas
Todavia no tengo claro para que se usan los NodeList ??
Francisco Montejo
JS los usa para almacenar todos los nodos cuando utilizas document.querySelectorAll y nodeChildNodes, pero es mejor que ese NodeList lo transformes a un array para que puedas usar los métodos de los arrays y manipular los datos a tu gusto.
Las NodeList también tienen sus propios métodos para trabajar con los datos, te dejo la doc por si lo quieres revisar
NodeList
Juan Gui Arenas
Gracias Francisco ahora me queda un poco mas claro este tema :)
Obed Paz
Tambien, si se pudieron percatar, existe una diferencia cuando usamos getElements o querySelectorAll, y es que los getElements nos devuelve una HTMLCollection y el querySelectorAll nos devuelve un NodeList.
. HTMLCollection vs NodeList: medium stackoverflow
Elvis Milan
nodeList != array
Ismael Grimaldo Vega
Los navegadores optimizan los arrays antes que los NodeLists
Joel Eduardo Sánchez Herrera
Cuando utilizamos el QuerySelectorAll JS nos devolvio un tipo que es: NodeList que es diferente a un Array. La diferencia es:
NodeList carece de operaciones que los Array Si tienen. NodeList si tiene Lenght, para forEach pero NO TIENE MAP, SOME, FILTER, REDUCE y otros metodos mas avanzados que los array si tienen.
Una forma facil de pasar un NODELIST a un Array de forma facil puede ser con:
const Arreglo = [ ...NodeList]
Y ya tendremos el arreglo con todas las funciones que queramos.
Se RECOMIENDA pasar todos los NodeList en Array porque los motores estan optimizados para los Arrays pero no para los NodeList.
Anfernee Valera
Si alguno aun pregunta o no sabe que es un nodo yo encontré esto:
Nodos
Gonzalo Vidal
Que buena, hace un par de semanas estaba sufriendo porque no podía usar el método filter en un nodeList, me botaba un error de que no se puede usar filter de undefined, ahora entiendo porqué
Luis Alejandro Vera Hernandez
NodeList carece de operaciones que los Arrays[] si tienen por ejemplo: map, some, filter, reduce . Sin embargo hay una forma de pasar un NodeList a un Array, por ejemplo: .
const nodeListAsArray = [...nodeList]
Podemos observar el uso de nodeList que es la variable donde almacenamos el nodo, convertido en un array, ademas del uso del spread operator de JS para hacer la transformacion. . Y ahora tendra cada uno de los otros metodos de los Arrays[] . Siempre que tengamos un nodeList pasarlo a un Array. .