Quem acompanha O Desenvolvedor já deve ter percebido que eu sou um grande fã do framework jQuery, utilizo-o diariamente no trabalho e nos projetos pessoais.

Desenvolver utilizando jQuery é extremamente produtivo e fácil, visto o sucesso deste framework a W3C resolveu documentar oficialmente seletores no DOM de forma mais fácil: o  querySelector e querySelectorAll.

querySelector e querySelectorAll

O querySelector é uma API de seleção de elementos do DOM que está disponível diretamente no document, isso facilita os seletores tornando-os muito próximos da seleção do jQuery (a W3C assumiu que os seletores vieram da idéia do jQuery, que na verdade é uma biblioteca separada, chamada Sizzle).

A função é bastante simples e o seletor pode ser de classe (exatamente como no jQuery .nome-da-classe ou de elemento, por exemplo p). O resultado do querySelectAll é uma lista com os elementos que casam com o seu seletor e o do querySelector é apenas o primeiro elemento que casar com a seleção passada.

Exemplo

<style>
.zebraon{background:silver}
</style>
<script>
function zebrado(selector){
var zebrar=document.querySelectorAll(selector);
for(var i=0;i<zebrar.length;i+=2)
zebrar[i].className="zebraon"
}

window.onload=function(){
zebrado("p");
zebrado(".zebra tbody tr");
}
</script>

Fiz um teste criando uma função para "zebrar" qualquer elemento da página (tabelas, por exemplo), no exemplo abaixo zebrei todos os parágrafos da página e as linhas da tabela com a classe zebrado. Para isso criei uma função que recebe como parâmetro a seleção, faz a busca usando o querySelectorAll e adiciona a classe "zebraon" que criei.

 

Um exemplo simples mas que mostra um bom amadurecimento na parte de seletores DOM! Antes de levantar qualquer debate – acho que isso não vai acabar com o uso de frameworks, mas provavelmente vai melhorar a performance das bibliotecas como jQuery já que a seleção será nativa, reduzindo parte da magia negra usada atualmente para isso.

E aí, o que acharam?