HTML DOM getElementsByClassName() Method

<Elemento de objeto

Exemplo

Alterar o texto do primeiro item da lista com class = "criança" (index 0) em uma lista com class = "exemplo":

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

Antes de alterar o texto:

Coffee
Tea

Depois de mudar o texto:

Milk
Tea

Tente você mesmo "

Mais "Try it Yourself" exemplos abaixo.

Definição e Uso

O getElementsByClassName() método devolve um conjunto de elementos filho de um elemento com o nome de classe especificada, como um objecto NodeList.

O objecto NodeList representa um conjunto de nodos. Os nódulos podem ser acedidos por números de índice. O índice começa em 0.

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

Suporte navegador

Os números na tabela especifica a primeira versão do navegador que suporta totalmente o método.

Método
getElementsByClassName()	4.0	9	3,0	3.1	9,5

Sintaxe

element .getElementsByClassName( classname )

Os valores dos parâmetros

Parâmetro	Tipo	Descrição
classname	String	Requeridos. O nome da classe dos elementos filhos que você deseja obter. Para procurar vários nomes de classes, separe-os com espaços, como "child color" .

Detalhes técnicos

DOM Versão:	Núcleo Nível 1 elemento de objeto
Valor de retorno:	Um objeto NodeList, o que representa uma coleção de elementos filhos dos elementos com o nome da classe especificada. Os elementos na coleção retornada são classificadas como eles aparecem no código-fonte.

mais Exemplos

Exemplo

Alterar a cor do segundo elemento de fundo com class = "criança" dentro de um <div> elemento:

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

Tente você mesmo "

Exemplo

Descubra como muitos elementos com class = "criança" existem dentro de um <div> elemento (usando a propriedade comprimento do objeto NodeList):

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

O resultado x será:

Tente você mesmo "

Exemplo

Alterar a cor do primeiro elemento tanto com o fundo "child" e "color" de classe dentro de um elemento com class = "exemplo":

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

Tente você mesmo "

Exemplo

Alterar a cor de todos os elementos com class = "criança" dentro de um fundo <div> elemento:

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

Tente você mesmo "