Lista de Nodos del HTML DOM

Objeto NodeList del DOM HTML

NodeList El objeto es una lista de nodos (conjunto) extraídos del documento.

Los objetos NodeList y HTMLCollection son casi idénticos.

Si se utiliza getElementsByClassName() El método, ciertos (navegadores antiguos) devuelven NodeList en lugar de HTMLCollection.

Todos los navegadores devuelven childNodes La propiedad devuelve un objeto NodeList.

La mayoría de los navegadores devuelven querySelectorAll() El método devuelve un objeto NodeList.

El siguiente código selecciona todos los nodos <p> del documento:

Ejemplo

var myNodeList = document.querySelectorAll("p");

}

Los elementos de NodeList se pueden acceder mediante números de índice.

Para acceder al segundo nodo <p>, puede escribir así:

y = myNodeList[1];

Notas:El índice comienza en 0.

Longitud de NodeList del DOM HTML

length La propiedad define el número de nodos en la lista de nodos:

Ejemplo

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

}

Explicación del ejemplo:

  • Crear una lista de todos los elementos <p>
  • Mostrar la longitud de la lista

length La propiedad es muy útil cuando desea recorrer los nodos de la lista de nodos:

Ejemplo

Cambiar el color de fondo de todos los elementos <p> de la lista de nodos:

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

}

Pruebe usted mismo

La diferencia entre HTMLCollection y NodeList

HTMLCollection (capítulo anterior) es una colección de elementos HTML.

NodeList es una colección de nodos de documento.

Los objetos HTMLCollection y NodeList son listas (conjuntos) de objetos de tipo array.

Tienen un número definido de elementos en la lista (conjunto). length Atributo.

Ambos pueden acceder a cada elemento a través de un índice (0, 1, 2, 3, 4, ...), de la misma manera que un array.

Para acceder a los elementos de HTMLCollection, puede hacerlo por su nombre, id o número de índice.

Para acceder a los elementos de NodeList, debe hacerlo a través de su número de índice.

Sólo los objetos NodeList pueden contener nodos de atributo y nodos de texto.

La lista de nodos no es un array!

La lista de nodos parece ser un array, pero no lo es.

Puede recorrer la lista de nodos e identificar sus nodos de la misma manera que un array.

Sin embargo, no puede usar métodos de array en listas de nodos, como valueOf()、push()、pop() o join().