Método getElementsByClassName() do HTML DOM Element

Definição e uso

getElementsByClassName() O método retorna uma coleção de elementos filhos com o nome de classe dado, como um objeto NodeList.

Veja também:

Atributo classList

Atributo className

Método querySelector()

Método querySelectorAll()

Método getElementsByTagName()

Objeto Style do HTML DOM

Tutorial:

Sintaxe CSS

Seletor CSS

Manual de referência do seletor CSS

NodeList

NodeList É uma coleção de nós semelhante a uma array (lista).

Você pode acessar os nós na lista por índice (índice). O índice começa em 0.

Atributo lengthRetorna o número de nós na lista.

Exemplo

Exemplo 1

Mudar o texto do primeiro item da lista usando class="child":

const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

Experimente você mesmo

Exemplo 2

Número de elementos class="child" no "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

Experimente você mesmo

Exemplo 3

Mudar o tamanho do segundo elemento de class="child":

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

Experimente você mesmo

Exemplo 4

Use as classes "child" e "color" dentro do segundo elemento com class="example" para alterar o tamanho do primeiro elemento:

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

Experimente você mesmo

Exemplo 5

Mudar a cor de todos os elementos com class="child" dentro de "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

Experimente você mesmo

Sintaxe

element.getElementsByClassName(classname)

Parâmetro

Parâmetro Descrição
classname

Obrigatório. Nome da classe do elemento filho.

Seperar múltiplos nomes com espaços (por exemplo, "child color").

Retorno

Tipo Descrição
NodeList

Elementos filhos que contêm o nome da classe fornecido.

Os elementos são ordenados pela ordem em que aparecem no código-fonte.

Suporte do navegador

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

Todos os navegadores suportam completamente:

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