NodeLists vs Array

Clase 6 de 29 • Curso de Manipulación del DOM

David Daniel Castillo Nava

student•

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

student•

Muy buen resumen

Ian Vassallo

student•

Buena implementación, la usaré 👌

Carlos Eduardo Gomez García

teacher•

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

student•

Me parece una forma mas legible también!

David Castillo

student•

Y si combinamos :3

var listSelectors = Array.from(document.querySelectorAll('.py-2'));

Juan Esteban Galvis

student•

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

student•

Son hash tablles¿

Rolando Mamani Salas

student•

Muchas gracias por el aporte

Fernando Quinteros Gutierrez

student•

📖 Artículos recomendados de Node List

¿A qué te refieres cuando hablas de NodeList?
En este se habla de otras formas de manejar un Node List - NodeList object is finally an Iterable

Andrés D Amelio

student•

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

student•

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

student•

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

student•

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

teacher•

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.

Carlos Britto Cañas

student•

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

student•

Nodelists 🆚 Array La principal diferencia es que el nodelist carece de metodos que el array si trae como lo son

filter, map y reduce

Tiene algunas propiedades y metodos que el array si tiene como

Length
ForEach

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

student•

🆚 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

El nodeList es diferente de un Array
Cuando usamos lista de selectores como ser querySelectorAll
NodeList tiene propiedades y métodos de arrays
- Length
- ForEach
Pero no cuenta con métodos más complejos como ser
- Map
- Some
- Filter
- Reduce
Podemos pasar un nodeList como un arreglo con ES6
- Obteniendo todas las ventajas de los arrays

const 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

student•

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

student•

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

student•

muchasismas gracias nilson! saludos desde chile

Brandon Argel Verdeja Domínguez

student•

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

student•

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

student•

Buena definición de lo que hace el spread operator.

Juan Gui Arenas

student•

Todavia no tengo claro para que se usan los NodeList ??

Francisco Montejo

student•

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

student•

Gracias Francisco ahora me queda un poco mas claro este tema :)

Obed Paz

student•

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

student•

nodeList != array

Ismael Grimaldo Vega

student•

Los navegadores optimizan los arrays antes que los NodeLists

Joel Eduardo Sánchez Herrera

student•

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

student•

Si alguno aun pregunta o no sabe que es un nodo yo encontré esto:

Nodos

Un nodo es un punto de intersección, conexión o unión de varios elementos que confluyen en el mismo lugar.
En estructuras de datos dinámicas un nodo es un registro que contiene un dato de interés y al menos un puntero para referenciar a otro nodo.

Gonzalo Vidal

student•

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

student•

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. .

// 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];

// 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);

NodeLists vs Array

DOM y Web API

Y entonces nació internet...

Accede a la versión más actualizada de este contenido

¿Qué es el DOM?

Web APIs modernas

Operaciones básicas

Leer nodos

NodeLists vs Array

Crear y agregar

Otras formas de agregar

Atributos y propiedades

Eliminar nodos

Operaciones en lote

Workshop 1: Fetch

Presentación del proyecto

Descargando información y creando nodos

Enriqueciendo la información

Usando la API de internacionalización del browser

Comparte el resultado

Eventos

Reaccionar a lo que sucede en el DOM

Event propagation

Event delegation

Workshop 2: Lazy loading

Presentación del proyecto

Nuestro propio plugin Lazy Loading

Creando las imagenes con JavaScript

Intersection Observer

Aplicando Lazy loading

Comparte el resultado

Workshop 3

Proyectos propuestos

Librerías relacionadas

¿Y jQuery?

¿Y JSX?

Conclusiones

Conclusiones