Colecciones JavaScript H TML DOM
El objeto HTMLCollection
El getElementsByTagName()
método devuelve un HTMLCollection
objeto.
Un HTMLCollection
objeto es una lista similar a una matriz (colección) de elementos HTML.
El siguiente código selecciona todos los <p>
elementos en un documento:
Ejemplo
const myCollection = document.getElementsByTagName("p");
Se puede acceder a los elementos de la colección mediante un número de índice.
Para acceder al segundo elemento <p> puedes escribir:
myCollection[1]
Nota: El índice comienza en 0.
HTML HTMLCollection Longitud
La length
propiedad define el número de elementos en un HTMLCollection
:
Ejemplo
myCollection.length
La length
propiedad es útil cuando desea recorrer los elementos de una colección:
Ejemplo
Cambia el color del texto de todos los elementos <p>:
const myCollection = document.getElementsByTagName("p");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].style.color = "red";
}
¡Una HTMLCollection NO es una matriz!
Una HTMLCollection puede parecer una matriz, pero no lo es.
Puede recorrer la lista y hacer referencia a los elementos con un número (como una matriz).
Sin embargo, no puede usar métodos de matriz como valueOf(), pop(), push() o join() en una HTMLCollection.