NodeLists vs Array

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

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

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

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

Recursos

NodeList

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

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 ‘nodeList’ a ‘Array’ es con un método del objecto ‘Array’ llamado ‘from’

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.

Mis apuntes en Notion💚

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(‘input’) 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 = […nodeList]

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?

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