Coleções JavaScript DOM

Índice

O objeto HTMLCollection

O método getElementsByTagName() retorna um objeto HTMLCollection.

Um objeto HTMLCollection é uma lista (coleção) semelhante a um array de elementos HTML.

O código a seguir seleciona todos os elementos <p> em um documento:

Exemplo

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

Os elementos da coleção podem ser acessados por um número de índice.

Para acessar o segundo elemento <p> você pode escrever:

myCollection[1]

Experimente você mesmo →

<!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: O índice começa em 0.

Comprimento da coleção HTML HTML

A propriedade length define o número de elementos em uma HTMLCollection:

Exemplo

myCollection.length

Experimente você mesmo →

<!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>

A propriedade length é útil quando você deseja percorrer os elementos em um coleção:

Exemplo

Altere a cor do texto de todos os elementos <p>:

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

Experimente você mesmo →

<!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>

Uma HTMLCollection NÃO é um array!

Um HTMLCollection pode parecer como uma matriz, mas não é.

Você pode percorrer a lista e consultar os elementos com um número (assim como um array).

No entanto, você não pode usar métodos de array como valueOf(), pop(), push(), ou join() em uma HTMLCollection.