JavaScript HTML DOM Conjuntos

El objeto HTMLCollection

getElementsByTagName() El método devuelve HTMLCollection Objeto.

El objeto HTMLCollection es una lista de elementos HTML de tipo array (colección).

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

Ejemplo

var x = document.getElementsByTagName("p");

Los elementos de la colección pueden accederse mediante el número de índice.

Para acceder al segundo elemento <p>, puedes escribir así:

y = x[1];

Intente hacerlo usted mismo

Notas:El índice comienza en 0.

Longitud de HTMLCollection

length La propiedad define la cantidad de elementos en HTMLCollection:

Ejemplo

var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;

Intente hacerlo usted mismo

Explicación del ejemplo:

  • Crear una colección de todos los elementos <p>:
  • Mostrar la longitud de la colección

length La propiedad es útil cuando necesita recorrer los elementos de la colección:

Ejemplo

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

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

Intente hacerlo usted mismo

¡HTMLCollection no es un array!

HTMLCollection parece ser un array, pero no lo es.

Puede recorrer la lista y acceder a los elementos mediante referencias numéricas (como si fuera un array).

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