Coleções JavaScript H TML DOM
O objeto HTMLCollection
O getElementsByTagName()
método retorna um HTMLCollection
objeto.
Um HTMLCollection
objeto é uma lista semelhante a um array (coleção) de elementos HTML.
O código a seguir seleciona todos os <p>
elementos 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]
Nota: O índice começa em 0.
HTML HTML Tamanho da coleção
A length
propriedade define o número de elementos em um HTMLCollection
:
Exemplo
myCollection.length
A length
propriedade é útil quando você deseja percorrer os elementos em uma 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";
}
Um HTMLCollection NÃO é um array!
Um HTMLCollection pode parecer um array, mas não é.
Você pode percorrer a lista e se referir aos elementos com um número (como um array).
No entanto, você não pode usar métodos de matriz como valueOf(), pop(), push() ou join() em um HTMLCollection.