Script - getElementsByClassName DOM

Olá povo.

Tive meio sem postar, meio sem tempo, mas tô de volta.

Hoje vou postar algo que considero bastante útil: Uma função que pega todos os elementos que possuam determinada classe e joga estes elementos em um array.

Conhecem a função getElementsByTagName ? Pois é. O funcionamento é similar.

Apresento abaixo a getElementsByClassName. Versão em JavaScript:

<edit date="31/08/2006">Editado. Coloquei com expressões regulares pra poder encontrar também elementos que tenham mais de uma classe. Ainda não fiz isto na versão em PHP, só nesta em JavaScript.</edit>

function DOMgetElementsByClassName($node,$className){
/* Description: retorna um array com todos os elementos dentro
                de $node que possuam a classe indicada em $className
   Versão: 1.0 - 30/08/2006
   Author: Micox - Náiron J.C.G - micoxjcg@yahoo.com.br
   Site:   http://elmicox.blogspot.com 
   Não retire estas informações pra não infringir direitos autorais!
*/
var $node, $atual, $className, $retorno = new Array(), $novos = new Array();
$retorno = new Array();
for (var $i=0;$i<$node.childNodes.length;$i++){
            $atual = $node.childNodes[$i];
            if($atual.nodeType==1){// 1 = XML_ELEMENT_NODE
                        $classeAtual = $atual.className;                               
                        if(new RegExp("\\b"+$className+"\\b").test($classeAtual)){
                                   //testando se tem a classe
                                   $retorno[$retorno.length] = $atual;
                        }
                        if($atual.childNodes.length>0){
                                   $novos = DOMgetElementsByClassName($atual,$className);
                                   if($novos.length>0){
                                               $retorno = $retorno.concat($novos);
                                   }
                        }
            }
}
return $retorno;
}

Exemplos de uso:
Lembram o clássico script pra buscar determinada classe?

destaques = document.getElementsByTagName("div");
for(var i=0; i<destaques.length ; i++ ){
            if(destaques[i].className == "destaques"){
                        //instruções para quem tiver a classe destaque.
            }
}

Que tal eliminar um monte de if e substituir por:

destaques = DOMgetElementsByClassName(document.body,"destaques");

E você ainda terá a vantagem de que a função procurará a classe em TODOS os elementos e não apenas em uma tag específica como uma div no exemplo anterior.

Desenvolvi esta idéia enquanto estava fazendo um script em PHP, ou seja, originalmente esta função foi feita para as DOM Functions do PHP.
Abaixo, a versão em PHP pra quem se interessar:

function DOMgetElementsByClassName($node,$className){
/* Description: retorna um array com todos os elementos dentro
                de $node que possuam a classe indicada em $className
   Versão: 1.0 - 30/08/2006
   Author: Micox - Náiron J.C.G - micoxjcg@yahoo.com.br
   Site:   http://elmicox.blogspot.com 
   Não retire estas informações pra não infringir direitos autorais!
*/
$retorno = array();
for ($i=0;$i<$node->childNodes->length;$i++){
            $atual = $node->childNodes->item($i);
            if($atual->nodeType==XML_ELEMENT_NODE){
                        $classeAtual = $atual->getAttribute("class");
                        if($classeAtual==$className){
                                   array_push($retorno,$atual);
                        }
                        if($atual->childNodes->length>0){
                                   $novos = DOMgetElementsByClassName($atual,$className);
                                   if(sizeof($novos)>0){
                                               $retorno = array_merge($retorno,$novos);
                                   }
                        }
            }
}
return $retorno;
}

Palavras chave: get elements by class name, pega retorna elementos pelo nome da classe, dom, xml.
Testado em: Op 8.5; FF 1.5; IE 6.0.

Postado também na seção de tutoriais JavaScript do fórum iEvolution.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.