Conjuntos HTML DOM JavaScript

O objeto HTMLCollection

getElementsByTagName() O método retorna HTMLCollection Objeto.

O objeto HTMLCollection é uma lista de elementos HTML (coleção) do tipo array.

O código a seguir选取文档中的所有 <p> 元素：

Exemplo

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

Os elementos da coleção podem ser acessados através de índices.

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

y = x[1];

Experimente você mesmo

Notas:O índice começa em 0.

Tamanho da HTMLCollection

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

Exemplo

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

Experimente você mesmo

Explicação do exemplo:

  • Cria uma coleção de todos os elementos <p>
  • Exibe o comprimento da coleção

length A propriedade é útil quando você precisa percorrer os elementos da coleção:

Exemplo

Mudar a cor de fundo de todos os elementos <p>:

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

Experimente você mesmo

HTMLCollection não é uma array!

HTMLCollection pode parecer uma array, mas não é.

Você pode percorrer a lista e acessar os elementos por referência numérica (como um array).

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