En un artículo anterior, vimos el forEach() del ES6 método para iterar a través de los elementos de una NodeList, así como matrices en JavaScript. En esta guía rápida, hablaré sobre la diferencia entre un NodeList y una matriz, para entender cómo funcionan bajo el capó.
Un NodeList puede parecer una matriz, pero en realidad, ambos son dos cosas completamente diferentes. Un NodeList El objeto es básicamente una colección de nodos DOM extraídos del documento HTML. Una matriz es un tipo de datos especial en JavaScript, que puede almacenar una colección de elementos arbitrarios.
Para crear un NodeList objeto, puedes usar el querySelectorAll método. El siguiente ejemplo selecciona todos <p> elementos en el documento:
const paragraphs = document.querySelectorAll('p');
Se puede crear una matriz de JavaScript utilizando la sintaxis literal de la matriz o el Array constructor:
const foods = ['Pizza', 'Pasta', 'Burger', 'Cake'];
// OR
const foods = new Array('Pizza', 'Pasta', 'Burger', 'Cake');
Tanto las matrices como las listas de nodos proporcionan el length propiedad para obtener el número total de elementos almacenado:
console.log(`NodeList items: ${paragraphs.length}`);
console.log(`Array items: ${foods.length}`);
Se puede acceder a los elementos de NodeLists y matrices por un índice numérico:
const p = paragraphs[2]; // 3rd node
const f = foods[1]; // 2nd food name
Aunque puedes acceder al NodeList elementos como una matriz y usan el mismo length propiedad, todavía hay ciertas diferencias . Puedes no use los métodos de matriz comunes como push() , pop() , slice() y join() directamente en un NodeList . Primero tienes que convertir un NodeList a una matriz normal usando el Array.from() método.
Otra diferencia entre un NodeList y una matriz es que un NodeList puede ser una colección en vivo. Esto significa que si se agrega o elimina algún elemento del DOM, los cambios se aplican automáticamente a la colección.
Ambos querySelector() y querySelectorAll() métodos devuelven un estático list, que no se actualiza si realiza algún cambio en el DOM. Sin embargo, las propiedades como Node.childNodes están en vivo listas, que se actualizarán tan pronto como modifique el DOM.
Finalmente, lo último que diferencia a un NodeList de una matriz es el hecho de que querySelectorAll() no es una API de JavaScript , sino una API de navegador. Esto es un poco confuso porque estamos usando estas API en JavaScript para manipular el DOM. Resulta que, según MDN, otros idiomas también pueden acceder a estas API para interactuar con el DOM.
Aquí hay un ejemplo de manipulación de Python DOM (copiado de MDN):
# Python DOM example
import xml.dom.minidom as m
doc = m.parse(r"C:\Projects\Py\chap1.xml")
doc.nodeName # DOM property of document object
p_list = doc.getElementsByTagName("para")
La mayor compra para llevar de NodeList vs. una discusión de matriz:a NodeList es una colección de nodos que se pueden usar para acceder y manipular elementos DOM, mientras que una matriz es un objeto de JavaScript que puede contener más de un valor a la vez.
Tanto NodeLists como las matrices tienen sus propios prototipos, métodos y propiedades. Puede convertir fácilmente un NodeList a una matriz si lo desea, pero no al revés.