Método getElementsByClassName() do Document HTML DOM

Definição e uso

getElementsByClassName() O método retorna uma coleção de elementos com o nome de classe especificado.

getElementsByClassName() O método retorna HTMLCollection.

getElementsByClassName() As propriedades são apenas leitura.

HTMLCollection

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

Os elementos na coleção podem ser acessados por índice (começando em 0).

length A propriedade retorna o número de elementos na coleção.

Veja também:

Método getElementById()

Método getElementsByTagName()

Método querySelector()

Método querySelectorAll()

Objeto HTMLCollection

Exemplo

Exemplo 1

Obter todos os elementos com a classe="example":

const collection = document.getElementsByClassName("example");

Experimente você mesmo

Exemplo 2

Obter todos os elementos que possuem as classes "example" e "color":

const collection = document.getElementsByClassName("example color");

Experimente você mesmo

Exemplo 3

Número de elementos com class="example":

let numb = document.getElementsByClassName("example").length;

Experimente você mesmo

Exemplo 4

Mudar a cor de fundo de todos os elementos com class="example":

const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Experimente você mesmo

Sintaxe

document.getElementsByClassName("classname)

Parâmetro

Parâmetro Descrição
classname

Obrigatório. Nome da classe do elemento.

Recuperável por espaços separados várias classes, por exemplo "test demo".

Retorna valor

Tipo Descrição
Objeto

Objeto HTMLCollection.

Conjunto de elementos com o nome de classe especificado.

Classifica os elementos de acordo com a ordem de aparecimento no documento.

Suporte do navegador

document.getElementsByClassName() É uma característica do DOM Level 1 (1998).

Todos os navegadores suportam:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte 9-11 Suporte Suporte Suporte Suporte

Páginas relacionadas

Tutorial do CSS:Sintaxe do CSS

Manual de referência do CSS:Seletor .class do CSS

Manual de referência do DOM HTML:element.getElementsByClassName()

Manual de referência do DOM HTML:Atributo className

Manual de referência do DOM HTML:Atributo classList

Manual de referência do DOM HTML:Objeto Style