Documento HTML DOM getElementsByClassName()
Exemplo
Obtenha todos os elementos com class="example":
const collection = document.getElementsByClassName("example");
Obtenha todos os elementos com as classes "example" e "color":
const collection = document.getElementsByClassName("example color");
Mais exemplos abaixo.
Definição e uso
O getElementsByClassName()
método retorna uma coleção de elementos com um(s) nome(s) de classe especificado(s).
O getElementsByClassName()
método retorna um HTMLCollection .
A getElementsByClassName()
propriedade é somente leitura.
HTMLCollection
Uma HTMLCollection é uma coleção de nós HTML.
Os nós em uma coleção podem ser acessados por números de índice. O índice começa em 0.
A propriedade length retorna o número de elementos na coleção.
Veja também:
O método document getElementById()
O método document getElementsByTagName()
O método do documento querySelector()
Sintaxe
document.getElementsByClassName(classname)
Parâmetros
Parameter | Description |
classname | Required. The class name of the elements. Search for multiple class names separated by spaces like "test demo". |
Valor de retorno
Modelo | Descrição |
Objeto. | Um objeto HTMLCollection . Uma coleção de elementos com o nome de classe especificado. Os elementos são classificados conforme aparecem no documento. |
Mais exemplos
Número de elementos com class="example":
let numb = document.getElementsByClassName("example").length;
Altere 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";
}
Páginas relacionadas
Tutorial CSS: Sintaxe CSS
Referência CSS: seletor CSS .class
Referência HTML DOM: elemento .getElementsByClassName()
Referência HTML DOM: propriedade className
Referência HTML DOM: propriedade classList
Referência HTML DOM: objeto de estilo
Suporte ao navegador
document.getElementsByClassName()
é um recurso DOM Nível 1 (1998).
É totalmente suportado em todos os navegadores:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |