Colecciones DOM de JavaScript

Tabla de contenido

El objeto HTMLCollection

El método getElementsByTagName() devuelve un objeto HTMLCollection.

Un objeto HTMLCollection es una lista (colección) similar a una matriz de elementos HTML.

El siguiente código selecciona todos los elementos <p> 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]

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p id="demo"></p>

<script>
const myCollection = document.getElementsByTagName("p");

document.getElementById("demo").innerHTML = "The innerHTML of the second paragraph is: " + myCollection[1].innerHTML;

</script>

</body>
</html>

Nota: El índice comienza en 0.

HTML Longitud de la colección HTML

La propiedad longitud define el número de elementos en una HTMLCollection:

Ejemplo

myCollection.length

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p id="demo"></p>

<script>
const myCollection = document.getElementsByTagName("p");

document.getElementById("demo").innerHTML = "This document contains " + myCollection.length + " paragraphs.";

</script>

</body>
</html>

La propiedad longitud es útil cuando desea recorrer los elementos en un recopilación:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p>Click the button to change the color of all p elements.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  const myCollection = document.getElementsByTagName("p");
  for (let i = 0; i < myCollection.length; i++) {
    myCollection[i].style.color = "red";
  }
}
</script>

</body>
</html>

¡Una colección HTML NO es una matriz!

Una HTMLCollection puede parecer como una matriz, pero no lo es.

Puede recorrer la lista y consultar los elementos con un número (como una matriz).

Sin embargo, no puede utilizar métodos de matriz como valueOf(), pop(), push(), o join() en una HTMLCollection.