Latest web development tutorials

HTML DOM getElementsByClassName () Método

Document Object Reference Document Object

Exemplos

Pega todos os elementos por nome de classe:

var x = document.getElementsByClassName ( "exemplo" );

tente »

Definições e uso

getElementsByClassName () retorna todos os elementos no documento especifique o nome de classe da coleção, como NodeList objeto.

objeto NodeList representa uma ordem de lista de nós. Nodelist objeto que pode acessar a lista de nós (número de índice a partir de 0) através da lista de nós do número-índice do nó.

Dica: Você pode usar o objeto NodeList comprimento propriedade para determinar o número de elementos por nome da classe, e os vários elementos do ciclo para obter os elementos que você precisa.


Suporte a navegadores

Números na tabela representam o primeiro navegador a suportar o número da versão do método.

caminho
getElementsByClassName () 4.0 9 3.0 3.1 9.5

gramática

document.getElementsByClassName (classname)

parâmetros

parâmetros tipo descrição
classname corda Obrigação. classes de elemento que você precisa para obter o nome.

nomes de classe múltiplas separadas por espaços, como "demonstração de teste".

Descrição técnico

versão DOM: Núcleo Nível Objeto 1 Documento
retorna: NodeList objeto que representa o elemento especifica o nome da classe da coleção. A ordem dos elementos na coleção da sua espécie em ordem de aparição no código.

Exemplos

mais exemplos

Exemplos

Obtém o "exemplo" e "cor" o nome da classe de todos os elementos:

var x = document.getElementsByClassName( "example color" );

tente »

Exemplos

Quantas estilo class = "exemplo" elementos (utilizando a propriedade comprimento da NodeList) para ver o documento são:

var x = document.getElementsByClassName( "example" ).length;

tente »

Exemplos

Alterar a cor de todos os estilos class = elementos "exemplo" background:

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

tente »

Páginas relacionadas

tutorial CSS: seletores CSS

CSS Referência: seletores CSS .class

Manual HTML DOM Referência: Elemento .getElementsByClassName ()

HTML DOM Referência: atributo className

Manual HTML DOM Referência: atributos HTML DOM classList

Manual HTML DOM Referência: HTML DOM estilo de objeto


Document Object Reference Document Object