Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

NodeLists vs Array

5/28
Recursos

Aportes 53

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.

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) 馃憖

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

馃摉 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);

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.

馃啔 NodeLists vs Array

<h4>Ideas/conceptos claves</h4>

Los objetos NodeList son colecciones de nodos como los devueltos por propiedades como Node.childNodes y el m茅todo document.querySelectorAll ()鈥

Recursos

NodeList

<h4>Apuntes</h4>
  • 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

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

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 鈥渦tiles鈥 a los array, ejemplo filter, map, reduce.
Pero desde ECMAScript 6 se puede 鈥減arsear鈥 un NodeList a un Array gracias al spread operator, esto en palabras mas palabras menos, hace que se 鈥渄escomponga鈥 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

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

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

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

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

NodeLists vs Array

Cuando utilizamos el querySelectorAll nos devuelve un NodeList es diferente a un arreglo puesto que no puede utilizar las mismas propiedades que los arreglos, limitando su utilizaci贸n.

Por esto es importante pasar los NodeList a Arrays o arreglos, no solo para facilitar su uso si no que los navegadores est谩n optimizados para hacer uso de arrays y no NodeList.

Este conversi贸n la logramos de la siguiente manera :

const nodeList = document.querySelectorAll("selector valido en css");
const nodeListAsArray = [...nodeList];

Guardamos el NodeList como un array pero utilizamos un spread operation.

Otra forma de convertir un 鈥榥odeList鈥 a 鈥楢rray鈥 es con un m茅todo del objecto 鈥楢rray鈥 llamado 鈥榝rom鈥

const nodeList = document.querySelectorAll("input");
const nodeListAsArray = Array.from(nodeList);

document.getElementsByClassName("div-class") devuelve una instancia de HTMLCollection no de NodeList.

La diferencia que pude ver es que HTMLCollection es incluso m谩s limitado que NodeList al no poseer ni .forEarch ni spred operator.

convertir nodelist a array para poder usar los metodos de los array

NOTA: Siempre que tengas un NodeList pasalo a un array, no solo porque trabajar con arrays es m谩s conveniente, sino porque los navegadores y los motores de Javascript (en especial el motor V8), est谩 optimizado para trabajar con arrays y no con NodeList.

Para transformar un NodeList a un Array, y es englobandola con los corchetes y tres puntos seguidos al principio, para convertirla en un Array.

NodeList, no es como un Array, ya que NodeList carece de los m茅todos que un Array si tiene

Comparto el codigo generado mientras estoy viendo el curso, espero les sirva de ayuda鈥

https://github.com/fmbetancourt/course-platzi--dom/commit/fd74623cb031e7cb9e7e60a1d90322be37d0bea2

Diferencia entre NodeList y Array

muy buena explicacion

Que bien profe entendida la diferencia.

que clase m谩s interesante

NodeList es una Linked List, por eso no se pueden usar la mayoria de metodos para arreglos.

NodeList vs. Array
El document.querySelectorAll(鈥榠nput鈥) devuelve un NodeList 鈥
El NodeList parece un array , pero no es un array y hay m茅todos que tienen los arrays y los NodeLists no los tienen.
Lo mejor es convertirlo en un array con:
const nombredelNodeList = [鈥odeList]

En resumen si utilizamos .getElementByClassName() o .getElementByTagName() obtendremos un objeto HTMLCollection() que contiene objetocs DOM. Que de igual manera que como transformamos los Objetos NodeList a Objetos Array, tambien es practico transformar los HTMLCollection() a Objetos Array con la misma metodologia, es decir con Spreed Operator.

var domList = [...document.getElementByTagName("input")]

Otra forma de convertir un NodeList a un Array es Array,from(nodeList) .

Convert NodeList to Array

Esto es algo incre铆ble que no sab铆a

//**Convirtiendo un nodo en un array**
// 1.- Guardamos nuestro nodo en una variable
let listaNodos;
listaNodos = document.querySelectorAll('div')

/* 2.- Creamos una nueva variable y ponemos el
nodo que ya teniamos guardado en nuestra variable
muy importante debe ponerse entre []*/

const arrOfNodo = [...listaNodos]

Diferencia entre NodeListd y Array

Jesucristo esta clase es oro puro. 馃槂 Genial.

Interesante conocer la principal diferencia entre un NodeList y un Arrays, y es que el primero carece de los m茅todos avanzados que posee el segundo. Por lo tanto, cada vez que se trabaje con NodeLists se deben convertir en arrays debido a que los navegadores y en especial motores de JavaScript como el V8 est谩n optimizados para trabajar con arrays y no con NodeLists.

convertir el nodelist a array
para usar las propiedades de los arrays
se usa spread operator

ArraynodeList  = [...nodeList]
  • La principal diferencia entre un array y un NodeList, es que carece de operaciones que normalmente tienen los arrays como filter o map.
  • Se recomiendo pasar los NodeList a arrays, ya que los navegadores est谩n optimizados en arrays.
const nodeList = document.querySelectorAll("CCS Selector");
const NodeListasArray = [...nodeList];

Una vez Hice un NodeList al que le iba a agregar un evento a cada uno, me tarde mucho entendi茅ndolo, y lo que encontr茅 es que hay muchas maneras de convertir tu NodeList a un Array.

const newArray= Array.from(nodeList);
const otherArray = Array.prototype.slice.call(nodeList)

Como nota:
Solamente podemos hacer la transformaci贸n de nodelist a array cuando usamos queryselectorAll

Tambie茅n podemos hacer una transformaci贸n de esta manera:

const **variable** = Array.from(document.querySelector(鈥榑selectorCSS_鈥);

No conoc铆a esa funci贸n para convertir NodeLists a Arrays, super 煤til!

Genial?

<h4>NodeLists vs Array</h4>

La principal diferencia entre entre ambos es que Nodelist carece de los m茅todos de array.

Podemos convertir un nodelist a un array muy f谩cilmente:

const nodeList = document.querySelectorAll('div'); //Regresa 50 elementos, por ejemplo
const nodeListAsArray = [...nodeList] //Con esto ya convertimos la lista de nodos en un array :D

Protip: SIEMPRE que puedas, usa arrays en vez de nodelists, los navegadores est谩n mejor optimizados para esta estructura de datos.

Wow, no tenia ni idea de este tema. Me agrada cuando hay algo nuevo por aprender 馃槃

馃憣

Fantastico!, Este tema realmente me encanta. Y el tutor explica super bien!.
Dejo mis apuntes!
Bye Coder!

Los metodos como queryselctorAll nos devuelven nodeList que no son los mismo que arrays pues estos carecen de muchos metodos de los arrays y el motor de js no esta optimizado para trabajar con estos sino con arrays.

Algo que el profesor no menciono, pero me parece bien que lo sepan es que hay metodos que no nos devuelven NodeList ni tampoco arrays sino HTMLCollections como por el ejemplo getElementByClassName estos tambi茅n carecen de este muchos de los metodos de los arrays por lo que tambi茅n debemos comvertirlos a arrays.

**Otra forma de usar los metodos de los arrays con html colections o NodeList es: ** usamos los metodos directamente del objecto Array y luego llamamos al html collection ejemplo: Array.prototype.filter.call(NodeList, function) es function es la funci贸n del metodo filter.

Nunca entender茅 porque nos empe帽amos en repetir la informaci贸n en el 谩rea de aportes, en vez de ir sumando conocimiento a los comentarios. 馃檮

De alguna manera tendremos que comenzar a agregar valor a los comentarios en lugar de solo publicar una y otra vez lo mismo. 馃

Igual se agradece que todos compartan todo lo que saben con la comunidad 馃挌馃挌馃挌