Você não precisa de jQuery - Selecionando elementos sem jQuery

Imagem de capa 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.

  1. IDs
  2. Classes CSS
  3. Nome da Tag
  4. Atributos
  5. Pseudo-classes
  6. Filhos
  7. Descendentes
  8. Seletores de Exclusão
  9. Seletores Múltiplos
  10. Vê um padrão?
  11. 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