document.getElementsByClassName

Resumo

Retorna um conjunto de elementos com o nome de classe fornecido. Quando chamado no objeto document, todo o documento é pesquisado incluindo o nó raiz. Você pode chamar também getElementsByClassName em qualquer elemento; isso retornará apenas elementos sob o elemento raiz especificado com o nome de classe fornecido.

Sintaxe

elementos = document.getElementsByClassName(nome) // ou:elementos = elementoRaiz.getElementsByClassName(nome)

• elementos é um NodeList vivo de elementos encontrados na ordem que aparecem na árvore.
• nome é uma string representando um nome de classe dos elementos.
• getElementsByClassName pode ser chamado em qualquer elemento, não apenas no document. O elemento em que é chamado será usado como a raiz da pesquisa.

Exemplos

Pega todos os elementos que têm a classe 'teste':

 document.getElementsByClassName('teste')

Pega todos os elementos que têm as classes 'vermelho' e 'teste':

 document.getElementsByClassName('vermelho teste')

Pega todos os elementos que têm a classe 'teste', dentro de um elemento que tem o ID 'principal':

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

E se formos adiante e adicionarmos extras do Array do JavaScript 1.6, podemos fazer algumas combinações realmente boas.

Encontre todos os elementos div que têm a classe 'teste'

 Array.filter( document.getElementsByClassName('teste'), function(elem){
   return elem.nodeName == 'DIV';
 });

Encontre todos os elementos que têm a classe 'teste' (como faz seu elemento pai)

 var teste = document.getElementsByClassName('teste');
 Array.filter( teste, function(elem){
   return Array.indexOf( teste, elem.parentNode ) > -1;
 });

XXX escreva-me == Notas == Um método similar existe em <code>Element</code>

Especificação

WHATWG Web Applications 1.0: getElementsByClassName

Categorias

Interwiki Language Links