Você não precisa de jQuery - Selecionando elementos sem jQuery
Quantas vezes você viu uma web app ou biblioteca que usa jQuery simplesmente para selecionar elementos? Quantas vezes você escreveu isto: $(#meuElemento')
? Ou isto: $('.meuElemento')
? Psst... Você não precisa de jQuery para selecionar elementos! Isto já é muito fácil simplesmente usando a DOM API.
- IDs
- Classes CSS
- Nome da Tag
- Atributos
- Pseudo-classes
- Filhos
- Descendentes
- Seletores de Exclusão
- Seletores Múltiplos
- Vê um padrão?
- Mas Eu Quero Mais
Por ID
jQuery
// retorna um objeto jQuery com 0-1 elementos
$('#meuElemento');
DOM API
// IE 5.5+
document.getElementById('meuElemento');
... ou ...
// IE 8+
document.querySelector('#meuElemento');
Ambos os métodos retornam um único elemento. Perceba que getElementById é mais eficiente do que usar querySelector.
Será que o jQuery proporciona alguma vantagem aqui? Eu não vejo nenhuma. Você vê?
Por classe CSS
jQuery
// retorna um objeto jQuery com todos elementos correspondentes
$('.meuElemento');
DOM API
// IE 9+
document.getElementsByClassName('meuElemento');
... ou ...
// IE 8+
document.querySelectorAll('.meuElemento');
O primeiro método retorna uma HTMLCollection e é o mais eficiente entre as duas escolhas. O método querySelectorAll sempre retorna uma NodeList.
Novamente nada complicado. Por que se preocupar com jQuery?
Por Nome da Tag
Para selecionar todas as <div>
de uma página, por exemplo:
jQuery
$('div');
DOM API
// IE 5.5+
document.getElementsByTagName('div');
... ou ...
// IE 8+
document.querySelectorAll('div');
Como esperado, querySelectorAll (que retorna uma NodeList) é menos eficiente que o getElementsByTagName (que retorna uma HTMLCollection).
Por Atributo
Seleciona todos os elementos com o atributo "data-foo-bar" que contém o valor de "qualquerValor":
jQuery
$('[data-foo-bar="qualquerValor"]');
DOM API
// IE 8+
document.querySelectorAll('[data-foo-bar="qualquerValor"]');
Novamente, as sintaxes da DOM API e do jQuery se mostram bastante similares.
Por Pseudo-classe
Seleciona de um form em específico, todos os campos que estão atualmente inválidos. Vamos assumir que o nosso form tem o ID "meuForm".
jQuery
$('#meuForm :invalid');
DOM API
// IE 10+
document.querySelectorAll('#meuForm :invalid');
Filhos
Seleciona todos os filhos de um elemento em específico, assumindo que ele possui o ID "divPai".
jQuery
$('#divPai').children();
DOM API
// IE 5.5+
// Observação: Este método incluirá comentários e nós de texto também.
document.getElementById('divPai').childNodes;
... ou ...
// IE 9+ (ignora comentários e nós de texto).
document.getElementById('divPai').children;
Mas e se quiséssemos selecionar somente alguns filhos em específico? Por exemplo, somente filhos com o atributo "ng-click"?
jQuery
$('#divPai').children('[ng-click]');
... ou ...
$('#divPai > [ng-click]');
DOM API
// IE 8+
document.querySelector('#divPai > [ng-click]');
Descendentes
Seleciona todos os elementos <a>
dentro da tag com ID #divPai.
jQuery
$('#divPai A');
DOM API
// IE 8+
document.querySelectorAll('#divPai A');
Excluindo elementos da seleção
Seleciona todas <div>
's, exceto aquelas com a classe "ignorar".
jQuery
$('DIV').not('.ignorar');
... ou ...
$('DIV:not(.ignorar)');
DOM API
// IE 9+
document.querySelectorAll('DIV:not(.ignorar)');
Selecionando múltiplos elementos
Seleciona todos os elementos <div>
's, <a>
's e <script>
's.
jQuery
$(DIV, A, SCRIPT');
DOM API
// IE 8+
document.querySelectorAll('DIV, A, SCRIPT');
Consegue ver um padrão?
Se nosso objetivo for exclusivamente selecionar elementos, e não precisamos dar suporte a nada mais antigo que o IE8, podemos substituir o jQuery de forma bem simples com:
window.$ = function(selector) {
var selectorType = 'querySelectorAll';
if (selector.indexOf('#') === 0) {
selectorType = 'getElementById';
selector = selector.substr(1, selector.length);
}
return document[selectorType](selector);
};
Mas Eu Quero Mais!
Para a maioria dos projetos, o suporte nativo da WEB API aos seletores é o suficiente. Mas e se vc for azarado o suficiente para ter que dar suporte ao IE7? Neste caso, você provavelmente precisará de uma pequena ajuda de uma dependência externa.
Claro, você poderia somente adicionar o jQuery ao projeto, Mas por quê usar uma biblioteca tão grande quando você, por enquanto, só precisa de suporte a seletores avançados? Ao invés disso, tente usar uma micro-biblioteca que foca exclusivamente na seleção de elementos. Considere o Sizzle, que por acaso é a biblioteca de seletores que o jQuery usa. Selectivizr é outra biblioteca de seletores bastante pequena, que traz o suporte a seletores CSS3 a browsers antigos.
Artigo original: Selecting Elements