Objeto HTMLCollection do JS DOM

Objeto HTMLCollection

O objeto HTMLCollection representa uma coleção genérica de elementos (objeto semelhante a array, semelhante a parâmetro) em ordem de documento e fornece métodos e propriedades para seleção da lista.

A HTMLCollection no HTML DOM é dinâmica; quando o documento básico é alterado, ela atualiza automaticamente.

Métodos como getElementsByTagName() retornarão HTMLCollection.

Propriedades e métodos HTMLCollection

A tabela a seguir lista as propriedades e métodos do objeto HTMLCollection:

Exemplo

Este exemplo retorna uma HTMLCollection:

//　Retorna a coleção de elementos de todos os <p> do documento de coleção.
var x = document.getElementsByTagName("p");

Alterar o conteúdo HTML do primeiro elemento <p> deste documento:

var x = document.getElementsByTagName("p");
x.item(0).innerHTML = "HELLO WORLD";

Descobrir quantos elementos <p> há no documento:

var len = document.getElementsByTagName("p").length;

Obter o conteúdo do elemento <p> com ID "demo":

var x = document.getElementsByTagName("p").namedItem("demo");
document.getElementById("output").innerHTML = x.innerHTML;

Também pode ser usado o método abreviado, que produzirá o mesmo resultado:

var x = document.getElementsByTagName("p")["demo"];
document.getElementById("output").innerHTML = x.innerHTML;