cssQuery - substituto ao getElementsById e getElementsByTagName

Todo mundo que programa em javascript se cansa de ter que digitar "document.getElementById" ou "document.getElementsByTagName" (ufa, cansei) toooooooda vez que quer selecionar determinado elemento ou grupo de elementos. É ou não é?

Então, após 3 digitadas destes métodos, agente vai lá e programa uma funçãozinha pra simplificar isso. É ou não é?

Na net existem infindáveis funções pra substituir o 1 ou o 2 (não vou digitar tudo denovo não heahe). Todo mundo tem sua velha função $() ou gE() ou gEid(). É ou não é?

Mas as funções que fazem isso "mais mió de bão" estão dentro de frameworks. O que é uma pena pra quem não usa frameworks.
No meu pouco conhecimento, a melhor atualmente é a do jquery que guenta seletores CSS como parâmetro e outros seletores mó bizarros.

Se você não sabe as facilidades dos seletores CSS, dê uma estudada.

O objetivo deste post do mico é mostrar uma ótima solução pra você que não usar frameworks ou cujo framework ou função não suporte fazer a seleção usando seletores CSS:

cssQuery() do Dean Edwards.

"getElementsByTagName? Pah!"
É assim que o ultra-top-master de javascript começa a explicação (mico paga pau).

Sintaxe:

elements = cssQuery(selector [, from]);

Exemplos:

// retorna todos os parágrafos que são filhos diretos de body
var tags = cssQuery("body > p");

// retorna todos os elementos que tenham o atributo 'href'
var tags = cssQuery("[href]");

// retorna os elementos que o atributo 'href' é igual a '#'
var tags = cssQuery("a[href='#']");
// procura todas as imagens dentro dos links retornados acima
var images = cssQuery("img", tags);

// pega todas as listas
var tags = cssQuery("dl,ol,ul");

// até em xml externos
var tags = cssQuery("my|:root>my|link", myXMLDoc);

// você entende isso?
var complex = "p>a:first-child+input[type=text]~span";
var tags = cssQuery(complex);

Seletores suportados:

    *
    E
    E F
    E > F
    E + F
    E ~ F
    E.warning
    E#myid
    E:link
    E:first-child
    E:last-child
    E:nth-child(n)
    E:nth-last-child(n)
    E:only-child
    E:root
    E:lang(fr)
    E:target
    E:enabled
    E:disabled
    E:checked
    E:contains("foo")
    E:not(s)
    E[foo]
    E[foo="bar"]
    E[foo~="bar"]
    E[foo^="bar"]
    E[foo$="bar"]
    E[foo*="bar"]
    E[foo|="bar"]

Guentado no IE, FF, OP, Netscape e Safari.

E aí? Vai trocar suas velhas $() ??

//Há uma lenda aí dizendo que o próximo Firefox vai suportar o velho $() . Será? Procurei um link e não achei. More informations please.

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

Evento body onReady sem o uso de libs (DOM)

Aberta novamente a temporada de postagens heheh.
Um serviço que eu estava fazendo maneirou e acho que posso voltar a ser mais periódico aqui no blog.

Bora lá com o on ready. Leia até o final :)

Bom, grande parte da malandragem que lê este blog usa frameworks e, portanto, devem conhecer as facilidades de uma função/evento on ready. Quem não conhece, vai achar esta postagem muito útil.

Perceba que não estou falando do onreadystate do AJAX nem do onready de iframes e afins, mas de onready no javascript. Continue lendo que entenderá.

Vou copiar aqui algumas descrições do que é o 'on Ready' pra não ter que ficar definindo tudo novamente:

[...] Ready é semelhante ao onload do body, porém ele não espera carregar imagens e objects, ou seja, assim que estiver carregado todo o HTML ela é executada! Muito útil! [...] - jQuery Introdução - Felipe Diesel

[...]onReady é um método automaticamente chamado quando o DOM estiver completamente carregado, garantindo que todos os elementos referenciados na sua aplicação estarão disponíveis quando o script rodar. [...] ( Introdução à bibliteca EXTjs - Fábio Vedovelli )

Nós usamos constantemente o 'window.onload' ou o 'body.onload' pra dizer que devemos iniciar a execução do nosso script. Porém, o evento onload espera tooooooda a tonelada de imagens/objetos/etc serem carregados antes de ser disparado.
Carambola, na imensa maioria das vezes nós precisamos apenas que os elementos HTML estejam carregados. É isso que o on ready faz! Que legal, dãã!

Em muitas bibliotecas este evento já está incluso (EXTjs e jQuery por exemplo), porém quem não usa bibliotecas ou cujas bibliotecas não tem o onready ficam a ver navios.
Tadáaaa: o Mico tem a solução!

"Chega de papo mico, você nunca foi de papo. Mostra logo um exemplo e o maldito script pra onload pra quem não usa bibliotecas."

<script>
//vai funcionar rapidão pois não precisa esperar a imagem, só o carregamento do HTML
bodyOnReady(function(){
 alert('bodyOnReady ' + document.getElementById('teste').innerHTML)
})

//vai funcionar beleza, mas só depois que tooodos os elementos forem carregados
window.onload = function(){
 alert('onload ' + document.getElementById('teste').innerHTML)
}

//vai dar erro pois o elemento 'teste' ainda não foi criado
 alert('alert simples ' + document.getElementById('teste').innerHTML)
 
</script>
<body>
<img src='http://img119.imageshack.us/img119/4050/no20matinhoue1.jpg' alt='imagem (relativamente) grande' />
<div id='teste'>conteúdo da div</div>
</body>

Entenderam a parada aí? Pois é.

"Mas cadê a função bodyOnReady Mico? A parada aí não funcionou pois tá faltando a função bodyOnReady" - Calma, está abaixo. É só adicioná-la em seu script e usar conforme a sintaxe passada no exemplo acima.

function bodyOnReady(func){
 //call the function 'func' when DOM loaded
 //Version 3.0 - 15/10/2008 - based on Jquery bindReady
 //by Micox - www.elmicox.com - elmicox.blogspot.com - webly.com.br
 //http://www.elmicox.com/2007/evento-body-onready-sem-o-uso-de-libs/

    //flag global para indicar que já rodou e function que roda realmente
    done = false
    init = function(){ if(!done) { done=true; func() } }
    var d=document; //apelido para o document
    //pra quem tem o DOMContent (FF)
    if(document.addEventListener){ d.addEventListener("DOMContentLoaded", init, false );}
    
    if( /msie/i.test( navigator.userAgent ) ){ //IE
        (function () {
            try { // throws errors until after ondocumentready                
                d.documentElement.doScroll("left");
            } catch (e) {
                setTimeout(arguments.callee, 10); return;
            }
            // no errors, fire
            init();
        })();
    }
    if ( window.opera ){
        d.addEventListener( "DOMContentLoaded", function () {
            if (done) return;
            //no opera, os estilos só são habilitados no fim do DOMready
            for (var i = 0; i < d.styleSheets.length; i++){
                if (d.styleSheets[i].disabled)
                    setTimeout( arguments.callee, 10 ); return;
            }
            // fire
            init();
        }, false);
    }
    if (/webkit/i.test( navigator.userAgent )){ //safari's
        if(done) return;
        //testando o readyState igual a loaded ou complete
        if ( /loaded|complete/i.test(d.readyState)===false ) {
            setTimeout( arguments.callee, 10 );    return;
        }
        init();
    }
    //se nada funfou eu mando a velha window.onload lenta mesmo
    if(!done) window.onload = init
}

Várias tentativas de fazer o onready também estão disponíveis na net se quiserem testar. Esta aqui é só a minha versão (meio gambiarra pra variar).

Só testei no IE6, FF2 e OP9 e em poucas situações. Em caso de bug, não esqueçam de me avisar. Em caso de melhorias, manda ae.

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

Javascript DOM Inspector para IE - colaboradores

Javascript DOM Inspector para IE - em busca de colaboradores.

Comecei a brincar de fazer um DOM explorer usando javascript.
Motivo? Fazer um dom explorer pra ajudar agente a resolver os boró no Internet Explorer e Opera (afinal já temos o ótimo firebug no FF que não precisa de substitutos).

Tentando desenvolver um aqui. Ajude também se vc sacar de javascript.

Eu dei os começo mas vou dar uma parada pra ir agilizando meus serviços.

Acredito que será útil pra quem desenvolve muito com javascript.

Té

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

InnerHTML em Select Option

Opa.

Seguindo uma postagem do Julio Greff sobre o velho problema (bug) do IE ao trabalhar com innerHTML e a tag select, vou mostrar aqui minha solução que eu já tinha feito na época da minha função simples pra ajax.

Edit 28/08/2007: Segunda versão corrigindo bugs pra ativar o selected, classes e styles no IE também

Pequena explicação do problema: às vezes, é necessário agente preencher uma tag select com options através de innerHTML. Pra variar, o IE dá problema com isso. Tá certo que innerHTML não é uma propriedade DOM padrão, mas se o Internet Explorer decidiu implementar ela, deveria, pelo menos, ter implementado direito hehe. Bah, deixa de reclamação mico.

Exemplo:

document.getElementById("meu_select").innerHTML = "<option value='1'>não</option> <option value='2'>funfa</option>"; 

O script acima deveria colocar dentro da select chamada "meu_select" duas opções ("não" e "funfa"). Só que isso não funfa no IE. O jeito certo então é adicionar através de appendChild!!!

Mas, calma, não se desespere, não será necessário você ficar quebrando a cabeça com infinitos appendChild. O Mico resolveu o problema pra você. Basta adicionar minha função abaixo no seu script e chamá-la passando 2 parâmetros: o ID do select que você quer preencher e o innerHTML que você quer colocar dentro deste select.

A função vai cuidar de tudo, como se você estivesse setando através da propriedade innerHTML mesmo, inclusive os atributos do option.

Exemplo de uso (baseado no exemplo anterior que não funfava):

var inner = "<option value='1'>Agora</option> <option value='2'>funfa</option>"; 

select_innerHTML(document.getElementById("meu_select"),inner);

A função mágica que faz isso. Adicione copie no seu script:

function select_innerHTML(objeto,innerHTML){
/******
* select_innerHTML - corrige o bug do InnerHTML em selects no IE
* Veja o problema em: http://support.microsoft.com/default.aspx?scid=kb;en-us;276228
* Versão: 2.1 - 04/09/2007
* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br
* @objeto(tipo HTMLobject): o select a ser alterado
* @innerHTML(tipo string): o novo valor do innerHTML
*******/
    objeto.innerHTML = ""
    var selTemp = document.createElement("micoxselect")
    var opt;
    selTemp.id="micoxselect1"
    document.body.appendChild(selTemp)
    selTemp = document.getElementById("micoxselect1")
    selTemp.style.display="none"
    if(innerHTML.toLowerCase().indexOf("<option")<0){//se não é option eu converto
        innerHTML = "<option>" + innerHTML + "</option>"
    }
    innerHTML = innerHTML.toLowerCase().replace(/<option/g,"<span").replace(/<\/option/g,"</span")
    selTemp.innerHTML = innerHTML
      
    
    for(var i=0;i<selTemp.childNodes.length;i++){
  var spantemp = selTemp.childNodes[i];
  
        if(spantemp.tagName){     
            opt = document.createElement("OPTION")
    
   if(document.all){ //IE
    objeto.add(opt)
   }else{
    objeto.appendChild(opt)
   }       
    
   //getting attributes
   for(var j=0; j<spantemp.attributes.length ; j++){
    var attrName = spantemp.attributes[j].nodeName;
    var attrVal = spantemp.attributes[j].nodeValue;
    if(attrVal){
     try{
      opt.setAttribute(attrName,attrVal);
      opt.setAttributeNode(spantemp.attributes[j].cloneNode(true));
     }catch(e){}
    }
   }
   //getting styles
   if(spantemp.style){
    for(var y in spantemp.style){
     try{opt.style[y] = spantemp.style[y];}catch(e){}
    }
   }
   //value and text
   opt.value = spantemp.getAttribute("value")
   opt.text = spantemp.innerHTML
   //IE
   opt.selected = spantemp.getAttribute('selected');
   opt.className = spantemp.className;
  } 
 }    
 document.body.removeChild(selTemp)
 selTemp = null
}

Bugs? Grita nos comments ae. Dúvidas? Joga no fórum e me avisa.
Não se esqueça de conferir também a solução do Julio para este problema.

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

Include em JavaScript

Olá povo.

Uma coisa de JavaScript um pouco incomum, que aparentemente ninguém possa ter precisado, mas que deve fazer muita falta para programadores que vêm de outras linguagens: um include em JavaScript.

"Bah, que isso mico, é só eu escrever a tag script e dizer o arquivo que quero chamar no head do HTML".

Sim, malandro, mas se você tiver vários arquivos javascript e não quiser incluir todos de uma vez?
Se você precisar incluir algum só se alguma determinada condição for feita?

Por exemplo

if(sou_bonito==true)  {
 include("chama_mulher.js");
} else if(tenho_grana==true) {
 include("chama_mais_mulher.js");
}else if(sou_inteligente==true){
 include("vai_trabalhar_vagabundo.js");
}

"Perae macaco doido. Comé que você vai fazer isso com JavaScript?"

Elementer meu caro leitor:

function include(arquivo){
//By Fabrício Magri e Micox
//http://elmicox.blogspot.com/2006/12/include-em-javascript.html
 var novo = document.createElement('script');
 novo.setAttribute('type', 'text/javascript');
 novo.setAttribute('src', arquivo);
 document.getElementsByTagName('head')[0].appendChild(novo);
 //apos a linha acima o navegador inicia o carregamento do arquivo
 //portanto aguarde um pouco até o navegador baixá-lo. :)
}

Infelizmente, pra variar, o meu Opera 8.5 não gostou deste script. Mas é a vida... No IE 6.0 e no FF 2.0 deu tudo beleza.
Graças ao comentário de um anônimo Fabrício Magri o script funfou no Opera 8.5 (vejam os comentários), muito obrigado :). Agora funciona corretamente no FF, IE e OP.

Bugs, dúvidas, sugestões é só comentar aí. Comenta pra eu escrever mais.

Amanhã tem mais postagem. Agora tô com pressa. Até lá.

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

Trabalhar com XML usando JavaScript

Olá pessoal,

Hoje vou mostrar como trabalhar com XML usando apenas JavaScript (através de DOM).
Agente vê muito tutorial de XML com PHP, ASP, Java, etc, porém quase nenhum sobre JavaSript.

Ao final deste tutorial, você saberá manipular os dados de seu XML pra fazer um menu por exemplo, ou uma tabela, ou uma lista, puxar RSS, etc.

Um lembrete antes de iniciar: diferente das linguagens server-side (php, asp, etc), por motivo de segurança, o navegador não permite que você carregue qualquer arquivo que esteja fora de seu domínio, ou seja, nem adianta tentar carregar XML's ou RSS's de outros sites.

Editado em 19/12/06: Olha só outra forma interessante que eu achei no site da IBM (via MDC)

Postado também no fórum iEvolution.

Chega de papo, bora lá.

1. Fazendo um XML pro teste

(Se você já tem algum arquivo xml pode pular esta etapa)
Abra seu bloco de notas e coloque o seguinte conteúdo:

<?xml version="1.0" ?>
<pessoa>
   <identificacao id="1">
    <nome>Joao</nome>
    <email>joao@mail.com</email>
   </identificacao>
   <identificacao id="2">
    <nome familia="ze" data="2">Maria</nome>
    <email>maria@mail.com
    </email>
   </identificacao>
</pessoa>

Salve este arquivo com o nome de nomes.xml, por exemplo. Na mesma pasta deste arquivo xml, iremos criar nosso HTML que irá carregá-lo.

2) Carregando o XML

Os navegadores carregam um arquivo xml de formas diferentes. O IE usa ActiveX. Para o Firefox e Opera, iremos usar o XMLHttpRequest (o mesmo que se usa em ajax).

O código que irá retornar um objeto xml para os três navegadores citados é:

function xmlMicoxLoader(url){
  //by Micox: micoxjcg@yahoo.com.br.
    if(window.XMLHttpRequest){
        var Loader = new XMLHttpRequest();
        Loader.open("GET", url ,false);
        Loader.send(null);
        return Loader.responseXML;
    }else if(window.ActiveXObject){
        var Loader = new ActiveXObject("Msxml2.DOMDocument.3.0");
        Loader.async = false;
        Loader.load(url);
        return Loader;
    }
}

Perceba que tivemos que deixar o carregamento síncrono para que ao chegar na linha do "return" o carregamento já ter sido concluído.
Se você não sabe o que é modo síncrono ou assíncrono, no modo síncrono o script aguarda o carregamento antes de executar a próxima instrução. No modo assíncrono, o carregamento é feito em segundo plano e a execução das linhas continua indepentende de já ter chegado algum dado pelo open.
Para ler mais sobre estes modos (e suas consequências) veja esta parte do tutorial de ajax do Elcio do Tableless.com.br.

Se quiser mais informações sobre o responseXML, dê uma lida neste texto do Newton (blog Viche): a propriedade responseXML.

Pronto. Agora que agente já tem o objeto XML pra ser trabalhado, mãos à obra com o DOM.

3) Manipulando o XML

XML pode ser manipulado como se fosse um esquema de árvore através das rotinas do DOM, ou seja, pra trabalhar com o XML nós apenas manipularemos propriedades como childNodes, nodeType, nodeValue, firstChild e outras expressões bem comuns pra quem já mexeu com XML ou Javascript.

Na rotina que eu coloco abaixo, apenas faço um laço for que percorre todos os filhos do objeto XML retornado pela função xmlMicoxLoader.
A cada filho percorrido, eu pego o valor dele através de nodeValue, e os atributos através do array attributes[]. O nome dos elementos pode ser recuperado através de nodeName. Se determinado nó tem outros filhos, eu percorro estes filhos também e faço o mesmo. Bah, vá estudar DOM hehehe

Uma observação: o IE ignora os espaços em branco e não os interpreta como filhos. Eu acho isso bom. Porém o FF e o Opera, seguem os padrões e interpretam estes espaços em branco e Enter's como se fossem um elemento do tipo #text. Daí precisamos filtrar estes elementos testando o nodeType (elementos tem nodeType=1, textos tem nodeType=3).

Este exemplo apenas printa na tela o esquema XML feião mesmo. Mas já dá uma base pra você entender e trabalhar com o XML. Leia e entenda, isto é uma ordem:

function xmlMicoxArvore(xmlNode,identacao){
  //by Micox: micoxjcg@yahoo.com.br
    var arvoreTxt=""; //esta var armazenara o conteudo
    for(var i=0;i<xmlNode.childNodes.length;i++){//percorrendo os filhos do nó
  if(xmlNode.childNodes[i].nodeType == 1){//ignorar espaços em branco
   //pegando o nome do nó
   arvoreTxt = arvoreTxt + identacao + xmlNode.childNodes[i].nodeName + ": "
   if(xmlNode.childNodes[i].childNodes.length==0){
    //se não tiver filhos eu já pego o nodevalue
    arvoreTxt = arvoreTxt + xmlNode.childNodes[i].nodeValue 
    for(var z=0;z<xmlNode.childNodes[i].attributes.length;z++){
     var atrib = xmlNode.childNodes[i].attributes[z];
     arvoreTxt = arvoreTxt + " (" + atrib.nodeName + " = " + atrib.nodeValue + ")";
    }
    arvoreTxt = arvoreTxt + "<br />\n";
   }else if(xmlNode.childNodes[i].childNodes.length>0){
    //se tiver filhos eu tenho que pegar o valor pegando o valor do primeiro filho
    arvoreTxt = arvoreTxt + xmlNode.childNodes[i].firstChild.nodeValue;
    for(var z=0;z<xmlNode.childNodes[i].attributes.length;z++){
     var atrib = xmlNode.childNodes[i].attributes[z];
     arvoreTxt = arvoreTxt + " (" + atrib.nodeName + " = " + atrib.nodeValue + ")";
    }
    //recursividade para carregas os filhos dos filhos
    arvoreTxt = arvoreTxt + "<br />\n" + xmlMicoxArvore(xmlNode.childNodes[i],identacao + "> > ");
   }
      }
    }
    return arvoreTxt;
}

Agora é só chamar as funções:

xml = xmlMicoxLoader("nomes.xml"); //carrega o xml
document.write(xmlMicoxArvore(xml,"")); //printa a árvore na tela 

4) Carregando um RSS

Bom, o exemplo anterior não é muito útil não né? Serve só pra você aprender.
Vamo mostrar um exemplo mais útil: uma função que carrega um RSS de seu próprio site.

function xmlMicoxRSS(xmlNode){
 //by Micox: http://elmicox.blogspot.com
 var retorno = "";
 var objNodeList = xmlNode.getElementsByTagName("item")
 for(var i=0;i<objNodeList.length;i++){
  var strTitulo = ""
  var strURL = ""
  var strDescr = ""
  var objNode = objNodeList[i];
  if(objNode.nodeType == 1){//ignorar espaços em branco
   for(var j=0;j<objNode.childNodes.length;j++){
    var objNode2 = objNode.childNodes[j];
    if(objNode2.nodeType == 1){//ignorar espaços em branco
     switch (objNode2.nodeName) {
      case "title": 
       //alert(objNode.childNodes[j].firstChild.nodevalue);
       strTitulo = objNode2.firstChild.nodeValue; 
       break;
      case "link": 
       strURL = objNode2.firstChild.nodeValue; 
       break;
      case "description": 
       strDescr = objNode2.firstChild.nodeValue; 
       break;
     }
    }
   }
   retorno += " <li><a href='" + strURL + "'>" + strTitulo + "</a><br />" + strDescr + "</li>\n";
  }
 }
 retorno = "<ul>\n" + retorno + "</ul>";
 return retorno;
}

Agora é só jogar o resultado na sua div:

xml = xmlMicoxLoader("rss.xml"); //carrega o xml
document.getElementById(div_alvo).innerHTML = xmlMicoxRSS(xml); //lista o rss

Editado 12/12/06: O Bernardo Rufino fez outro ótimo exemplo de como se trabalhar com XML e Javascript: Criando Gráficos Dinamicamente com Ajax e XML

5) Conclusão

Pronto. Agora acho que você já tem uma base para trabalhar com XML no JavaScript da mesma forma que faz com outras linguagens.
Pra ficar bão mermo, repito, estude DOM, nem venha me fazer perguntas básicas sobre isso. :-)
Dúvidas ou se tiver algum bug aí é só me falar.

Ó, tô desestimulado de ficar escrevendo estes tutoriais gigantescos, postando notícias no blog, etc. Ninguém comenta nessa bagaça. Então comenta aí caramba.

Té a próxima.

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

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.