El Micox

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.

This entry was posted on Quinta-feira, Janeiro 17th, 2008 at 09:42 and is filed under Links. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.