Método HTML DOM getElementsByClassName()

Exemplo

Altere o texto do primeiro item da lista com class="child" (índice 0) em uma lista com class="example":

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

Mais exemplos de "Experimente você mesmo" abaixo.

Definição e uso

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

O objeto NodeList representa uma coleção de nós. Os nós podem ser acessados por números de índice. O índice começa em 0.

Dica: Você pode usar a propriedade length do objeto NodeList para determinar o número de nós filho com o nome de classe especificado, então você pode percorrer todos os nós e extrair as informações desejadas.

Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao método.

Method
getElementsByClassName()	4.0	9.0	3.0	3.1	9.5

Sintaxe

element.getElementsByClassName(classname)

Valores de parâmetro

Parameter	Type	Description
classname	String	Required. The class name of the child elements you want to get. To search for multiple class names, separate them with spaces, like "child color".

Detalhes técnicos

Versão DOM:	Objeto de elemento de nível 1 principal
Valor de retorno:	Um objeto NodeList, representando uma coleção de elementos filho dos elementos com o nome de classe especificado. Os elementos na coleção retornada são classificados conforme aparecem no código-fonte.

Mais exemplos

Exemplo

Altere a cor de fundo do segundo elemento com class="child" dentro de um elemento <div>:

var x = document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";

Exemplo

Descubra quantos elementos com class="child" existem dentro de um elemento <div> (usando a propriedade length do objeto NodeList):

var x = document.getElementById("myDIV").getElementsByClassName("child").length;

Exemplo

Altere a cor de fundo do primeiro elemento com as classes "child" e "color" dentro de um elemento com class="example":

var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";

Exemplo

Altere a cor de fundo de todos os elementos com class="child" dentro de um elemento <div>:

var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}