NodeLists vs Array
Clase 6 de 29 • Curso de Manipulación del DOM
Contenido del curso
David Daniel Castillo Nava
student•
hace 5 años
Andrés Felipe Lopez gomez
student•
hace 5 años
Ian Vassallo
student•
hace 5 años
Clase 6 de 29 • Curso de Manipulación del DOM
Contenido del curso
David Daniel Castillo Nava
Andrés Felipe Lopez gomez
Ian Vassallo
Carlos Eduardo Gomez García
Beto Martinez
David Castillo
Juan Esteban Galvis
Erick Fernando Guzmán Valerio
Rolando Mamani Salas
Fernando Quinteros Gutierrez
Andrés D Amelio
Charles Castillo Rosas
Armando Rivera
Sebastian Gonzalez
Jonathan 🦑 Alvarez
Carlos Britto Cañas
Andres Felipe Pinchao Ramirez
Fernando Quinteros Gutierrez
matias bravo
Nilson Diaz
matias bravo
Brandon Argel Verdeja Domínguez
Sebastian Gonzalez
Carlos Muñoz
Juan Gui Arenas
Francisco Montejo
Juan Gui Arenas
Obed Paz
Elvis Milan
Ismael Grimaldo Vega
Joel Eduardo Sánchez Herrera
Anfernee Valera
Gonzalo Vidal
Luis Alejandro Vera Hernandez
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.
Muy buen resumen
Buena implementación, la usaré 👌
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) 👀
Me parece una forma mas legible también!
Y si combinamos :3
var listSelectors = Array.from(document.querySelectorAll('.py-2'));
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
Son hash tablles¿
Muchas gracias por el aporte
📖 Artículos recomendados de Node List
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);
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.
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?
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.
Ademá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.
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
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.
🆚 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
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?
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 !
muchasismas gracias nilson! saludos desde chile
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"));
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
Buena definición de lo que hace el spread operator.
Todavia no tengo claro para que se usan los NodeList ??
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
Gracias Francisco ahora me queda un poco mas claro este tema :)
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
nodeList != array
Los navegadores optimizan los arrays antes que los NodeLists
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.
Si alguno aun pregunta o no sabe que es un nodo yo encontré esto:
Nodos
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é
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. .