Recomendaciones de cursos:

NodeList

Manual de referencia de NodeList del DOM HTML

NodeList es una colección de objetos de nodos similar a un array (lista).

Propiedad lengthdevuelve el número de nodos en NodeList.

Los nodos en NodeList se pueden acceder mediante índices (comienza en 0).

NodeList vs. HTMLCollection HTMLCollection Casi lo mismo.

Vea las instrucciones a continuación.

¿Quién devuelve NodeList?

Atributo childNodes

Método querySelectorAll()

Método getElementsByName()

Atributos y métodos

Se pueden usar los siguientes atributos y métodos en NodeList:

Nombre Descripción
entries() devuelve un iterador con pares de clave/valor desde la lista.
forEach() ejecutar una función de devolución de llamada para cada nodo en la lista.
item() devuelve el nodo en la posición especificada.
keys() devolver un iterador utilizando las claves de la lista.
length devuelve el número de nodos en NodeList.
values() devolver un iterador utilizando los valores de la lista.

instancias

Elegir todos los <p> Nodo:

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

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

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

myNodeList[1]

Pruebe usted mismo

Nota:El índice comienza en 0.

Longitud de lista de nodos del DOM HTML

length El atributo define el número de nodos en la lista de nodos:

Ejemplo 1

myNodelist.length

Pruebe usted mismo

Cuando desee recorrer los nodos en la lista de nodos:length Atributo muy útil:

Ejemplo 2

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

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

Pruebe usted mismo

No es un array

¡NodeList no es un array!

NodeList puede parecerse a un array, pero no es así.

Puede recorrer NodeList y usar referencias de índice para sus nodos.

Pero no puede usar métodos de Array en NodeList, como push()、pop() o join().

Diferencias entre HTMLCollection y NodeList

NodeList con HTMLcollection Muy similares.

Ambos son conjuntos de nodos (elementos) extraídos del documento que forman una colección similar a un array (lista). Los nodos se pueden acceder mediante su número de índice. El índice comienza en 0.

Ambos tienen Propiedad lengthque devuelve la cantidad de elementos en la lista (conjunto).

HTMLCollection esElemento de documento HTMLun conjunto.

NodeList esNodo de documentoconjunto de (nodos de elemento, nodos de atributo y nodos de texto).

Los elementos de HTMLCollection se pueden acceder por su nombre, id o número de índice.

Los elementos de NodeList solo se pueden acceder a través de su número de índice.

HTMLCollection siempre es unEn tiempo realconjunto. Por ejemplo: si se agrega un elemento <li> a la lista en el DOM, la lista en HTMLCollection también cambiará.

NodeList generalmente es unEstáticaconjunto. Por ejemplo: si se agrega un elemento <li> a la lista en el DOM, la lista en NodeList no cambiará.

getElementsByClassName() y getElementsByTagName() El método devuelve una HTMLCollection en tiempo real.

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

childNodes La propiedad devuelve una NodeList en tiempo real.

lista de nodos en tiempo real

En ciertos casos, NodeList esEn tiempo real：Las modificaciones en el DOM actualizarán la NodeList.

childNodes El método devuelve una NodeList en tiempo real.