MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Document.getElementsByClassName()

Retorna um vetor de objetos com todos os elementos filhos que possuem o nome da classe dada.  Quando invocado no objeto document, o documento é examinado por completo, incluindo o nó raiz. Você também pode invocar getElementsByClassName() em qualquer elemento; isso retornaria somente elementos que são descendentes do nó raiz especificado com o nome da classe.

Sintaxe

var elementos = document.getElementsByClassName(nomes); // ou:
var elementos = rootElement.getElementsByClassName(nomes);
  • elementos é uma lista viva do HTMLCollection de elementos encontrados.
  • nomes é um texto que representa uma lista dos nomes das classes que são separados por espaço em branco.
  • getElementsByClassName pode ser invocado por qualquer elemento, não somente pelo nó raiz document. O elemento no qual ele é chamado será usado como a raiz para a busca.

Exemplos

Retorna todos os elementos que possuem a classe 'teste'

document.getElementsByClassName('teste');

Retorna todos os elementos que possuem as classes 'vermelho' e 'teste'

document.getElementsByClassName('vermelho teste');

Retorna todos os elementos que possuem a classe 'teste' dentro do elemento que possui o ID 'principal'

document.getElementById('principal').getElementsByClassName('teste');

Nós podemos também usar os métodos do Array.prototype em qualquer dos elementos HTMLCollection passando o HTMLCollection como valor deste método. Aqui podemos encontrar todos os elementos do tipo div que possuem a classe 'teste':

var elementosTeste = document.getElementsByClassName('teste');
var divsTeste = Array.prototype.filter.call(elementosTeste, function(elementoTeste) {
    return elementoTeste.nodeName === 'DIV';
});

Compatibilidade com navegadores

Características Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico (Yes) 3.0 9.0 (Yes) (Yes)
Características Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico ? ? ? ? ?

Especificação

Etiquetas do documento e colaboradores

 Colaboradores desta página: fcard, lucasbento, marcelo.bastos
 Última atualização por: fcard,