Exemplo
Obter todos os elementos com o nome da classe especificado:
var x =
document.getElementsByClassName("example");
Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
O getElementsByClassName() método devolve um conjunto de todos os elementos no documento 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 elementos com um nome de classe especificado, então você pode percorrer todos os elementos 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
document.getElementsByClassName( classname )Os valores dos parâmetros
| Parâmetro | Tipo | Descrição |
|---|---|---|
| classname | String | Requeridos. O nome da classe dos elementos que você deseja obter. Para procurar vários nomes de classes, separe-os com espaços, como "test demo" . |
Detalhes técnicos
| DOM Versão: | Núcleo Nível Objeto 1 Documento |
|---|---|
| Valor de retorno: | Um objecto NodeList, representando um conjunto de elementos com o nome de classe especificada. Os elementos na coleção retornada são classificadas como eles aparecem no código-fonte. |
mais Exemplos
Exemplo
Pega todos os elementos tanto com o "example" e "color" classes:
var x =
document.getElementsByClassName("example color"); Tente você mesmo " Exemplo
Descubra como muitos elementos com class = "exemplo" existem no documento (usando a propriedade comprimento do objeto NodeList):
var x =
document.getElementsByClassName("example").length; Tente você mesmo " Exemplo
Alterar a cor de todos os elementos com class = "exemplo" background:
var x = document.getElementsByClassName("example");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Tente você mesmo " Páginas relacionadas
Tutorial CSS: CSS Seletores
Referência CSS: CSS .class Selector
HTML DOM Referência: elemento. getElementsByClassName()
HTML DOM Referência: className Property
HTML DOM Referência: classList Property
HTML DOM Referência: Objeto Estilo