Colección (Collection) de HTML DOM de JavaScript

Este capítulo explica el uso de las colecciones del DOM.

Objeto HTMLCollection

El método getElementsByTagName() devuelveHTMLCollectionun objeto.

El objeto HTMLCollection es similar a un array que contiene elementos HTML.

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

Ejemplo

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

Se puede acceder a los elementos de la colección mediante un índice (a partir de 0).

Para acceder al segundo elemento <p> se puede utilizar el siguiente código:

y = x[1];

Pruébalo »

Propiedad length del objeto HTMLCollection

La propiedad length del objeto HTMLCollection define el número de elementos de la colección.

Ejemplo

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

Pruébalo »

Análisis del ejemplo

Obtener la colección de elementos <p>:

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

Mostrar el número de elementos de la colección:

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

La propiedad length de la colección se usa a menudo para recorrer los elementos de la colección.

Ejemplo

Modificar 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"; }

Pruébalo »

Nota

¡HTMLCollection no es un array!

HTMLCollection puede parecer un array, pero en realidad no lo es.

Puedes usar índices para obtener elementos, como en un array.

HTMLCollection no puede usar los métodos de los arrays: valueOf(), pop(), push(), o join().

Otras extensiones