Hoje, no entanto, os navegadores melhoraram muito. Podemos usar confortavelmente todos os recursos fornecidos pelo ES5 (Ecmascript 5), e nós temos à nossa disposição APIs HTML 5 impressionantes que tornam o trabalho com o DOM muito mais fácil. Os desenvolvedores estão agora em uma posição onde eles podem optar por deixar de fora jQuery para alguns projetos, e ainda manter sua produtividade.

Não interpretem mal, jQuery ainda é uma biblioteca maravilhosa. No entanto, para pequenos projetos como páginas e interações simples, deveríamos utilizar JavaScript puro, assim economizando um pouco de recursos. Aqui estão 10 dicas que irão ajudá-lo com pequenos trechos de código.

Após ler estas 10 dicas de como escrever JavaScript sem jQuery você será capaz de capturar, alterar, inserir e remover conteúdos do HTML sem a necessidade de utilizar jQuery, como também utilizar os eventos, alterar classes e atributos.

 Este artigo é uma tradução de 10 Tips for Writing JavaScript without jQuery

1. Escutando pelo carregando da página

// Adicionar uma escuta ao carregamento da página, logo após
// chame uma função anonima e execute seu código JavaScript

document.addEventListener('DOMContentLoaded', function () {

    // Diga Olá para o Console :)
    console.log('Olá Console!');

});

2. Selecionando elementos

Antigamente só podemos selecionar elementos por id, classe e nome do elemento. jQuery foi um salva-vidas com os seus seletores estilo css inteligentes. Criadores de Browsers gostaram e introduziram duas APIs importantes – querySelector e querySelectorAll:

3. Adicionar e remover eventos de escuta

Ouvir eventos é uma parte fundamental da construção de uma aplicação web e hoje sua utilização foi simplificada com o addEventListener:

4. Manipulando classes e atributos

Manipular nomes de classes sem jQuery costumava ser muito inconveniente. Não mais, graças à propriedade classList. E se você precisa para manipular atributos, você tem setAttribute.

5. Obter e manipular classes e atributos

jQuery tem os métodos text() e html(). Opcional a isto, podemos usar as propriedades TextContent e innerHTML:

6. Inserindo e removendo elementos

Embora jQuery torna muito mais fácil a adição e remoção de elementos do DOM, hoje com JavaScript puro é relativamente simples. Veja como acrescentar, remover e substituir qualquer elemento:

7. Andando pelo DOM

Como todo verdadeiro ninja JS sabe, há uma grandes segredos escondidos no DOM. Em comparação com jQuery, APIs DOM oferecem funcionalidades limitadas para a seleção de elementos. No entanto, ainda existem muitos recursos que você poderá utilizar para percorrer todo o DOM.

8. Looping sobre matrizes

Alguns dos métodos que utilizamos em jQuery estão disponíveis com o padrão ES5. Para iteração, podemos usar forEach e map em vez de suas versões do jQuery – each() e do map(). Só tome cuidado para as diferenças de argumentos e padrão este valor nos retornos de chamada.

9. Animações

O método animate do jQuery é superior a qualquer coisa que você tentar com JavaScript puro, mas se você precisar de animações complexas , você ainda deve utilizar jQuery. Mas, graças a todas as maravilhas do CSS3, alguns dos casos mais simples podem ser tratadas com uma biblioteca leve como Animate.css, que permite acionar animações, adicionando ou removendo os nomes de classe de elementos.

10. AJAX

AJAX foi outra tecnologia que costumava ser uma bagunça quando se falava de cross-browser. A boa notícia é que agora podemos usar o mesmo código em todos os lugares. A má notícia, porém, é que ele ainda é complicado para instanciar e enviar solicitações de AJAX com XMLHttpRequest, por isso é melhor deixar para uma biblioteca. Mas você não precisa incluir jQuery só para isso. Você pode usar uma das inúmeras bibliotecas leves que estão disponíveis. Aqui está um exemplo a construção de uma solicitação AJAX diretamente, e usando a biblioteca reqwest:

// Este exemplo demonstra a maneira de criar uma requisição, neste exemplo é requisitado uma página e capturado seu conteúdo body e logado no console.

var request = new XMLHttpRequest();
request.open('GET', 'http://localhost', true);

request.onload = function (e) {
    if (request.readyState === 4) {

        // Verifique se a requisição foi efetuada com sucesso.

        if (request.status === 200) {
            console.log(request.responseText);
        } else {
            console.error(request.statusText);
        }
    }
};

// Resgata erros:

request.onerror = function (e) {
    console.error(request.statusText);
};

request.send(null);

// Outro metódo utilizando uma pequena biblioteca chamada Reqwest (1.5Kb), isto pode tornar seu trabalho mais fácil.

reqwest({
    url: 'http://localhost/',
    method: 'get',
    error: function (err) {},
    success: function (resp) {
        console.log(resp);
    }
});