Listas de nodos JavaScript HTML DOM
El objeto HTML DOM NodeList
Un NodeListobjeto es una lista (colección) de nodos extraídos de un documento.
Un NodeListobjeto es casi lo mismo que un HTMLCollectionobjeto.
Algunos navegadores (más antiguos) devuelven un objeto NodeList en lugar de HTMLCollection para métodos como getElementsByClassName().
Todos los navegadores devuelven un objeto NodeList para la propiedad childNodes.
La mayoría de los navegadores devuelven un objeto NodeList para el método querySelectorAll().
El siguiente código selecciona todos los <p>nodos en un documento:
Ejemplo
const myNodeList = document.querySelectorAll("p");
Se puede acceder a los elementos de NodeList mediante un número de índice.
Para acceder al segundo nodo <p> puedes escribir:
myNodeList[1]
Nota: El índice comienza en 0.
Longitud de la lista de nodos HTML DOM
La lengthpropiedad define el número de nodos en una lista de nodos:
Ejemplo
myNodelist.length
La lengthpropiedad es útil cuando desea recorrer los nodos en una lista de nodos:
Ejemplo
Cambia el color de todos los elementos <p> en una lista de nodos:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
La diferencia entre una HTMLCollection y una NodeList
Un HTMLCollection(capítulo anterior) es una colección de elementos HTML.
A NodeListes una colección de nodos de documentos.
Una lista de nodos y una colección de HTML son prácticamente lo mismo.
Tanto un objeto HTMLCollection como un objeto NodeList son una lista (colección) de objetos similar a una matriz.
Ambos tienen una propiedad de longitud que define el número de elementos en la lista (colección).
Ambos proporcionan un índice (0, 1, 2, 3, 4, ...) para acceder a cada elemento como una matriz.
Se puede acceder a los elementos de HTMLCollection por su nombre, identificación o número de índice.
Solo se puede acceder a los elementos de NodeList por su número de índice.
Solo el objeto NodeList puede contener nodos de atributos y nodos de texto.
¡Una lista de nodos no es una matriz!
Una lista de nodos puede parecer una matriz, pero no lo es.
Puede recorrer la lista de nodos y hacer referencia a sus nodos como una matriz.
Sin embargo, no puede usar métodos de matriz, como valueOf(), push(), pop() o join() en una lista de nodos.