Lista de nodos DOM de JavaScript

Tabla de contenido

El objeto HTML DOM NodeList

Un objeto NodeList es una lista (colección) de nodos extraídos de un documento.

Un objeto NodeList es casi lo mismo que un objeto HTMLCollection.

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 nodos <p> 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 propiedad longitud define el número de nodos en una lista de nodos:

Ejemplo

myNodelist.length

La propiedad longitud es útil cuando desea recorrer los nodos de un nodo. lista:

Ejemplo

Cambiar el color de todos los elementos <p> en un nodo lista:

const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.color = "red";
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p>Click the button to change the color of all p elements.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  const myNodelist = document.querySelectorAll("p");
  for (let i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.color = "red";
  }
}
</script>

</body>
</html>

La diferencia entre una HTMLCollection y una NodeList

Una NodeList y una HTMLcollection son prácticamente lo mismo.

Ambas son colecciones (listas) similares a matrices de nodos (elementos) extraídos de un documento. Se puede acceder a los nodos mediante números de índice. El índice comienza en 0.

Ambos tienen una propiedad longitud que devuelve el número de elementos de la lista (colección).

Una HTMLCollection es una colección de elementos de documento.

Una NodeList es una colección de nodos de documentos (nodos de elementos, nodos de atributos y nodos de texto).

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 mediante su número de índice.

Una HTMLCollection es siempre una colección activa. Ejemplo: si agrega un elemento

a una lista en el DOM, la lista en HTMLCollection también cambiará.

Una NodeList suele ser una colección estática. Ejemplo: si agrega un elemento

a una lista en el DOM, la lista en NodeList no cambiará.

getElementsByClassName() y getElementsByTagName() Los métodos devuelven una HTMLCollection en vivo.

El método querySelectorAll() devuelve una NodeList estática.

La propiedad childNodes devuelve una NodeList activa.

¡No es una matriz!

Una NodeList puede parecer una matriz, pero no lo es.

Puede recorrer una NodeList y hacer referencia a sus nodos por índice.

Pero no puede utilizar métodos de matriz como push(), pop() o join() en una NodeList.