# Conhecimentos essenciais de JavaScript para quem já usa jQuery

> Descubra conhecimentos essenciais de JavaScript para quem usa jQuery. Aprenda querySelector, classList e manipulação DOM com vanilla JS moderno. Evolua!

URL: https://dpw.dev/javascript/conhecimentos-essenciais-javascript-para-quem-ja-usa-jquery/  
Publicado em: 2014-01-20  
Categoria: javascript  
Tags: performance  
Autor: Tárcio Zemel

Já foi publicado aqui no **desenvolvimento para web** um artigo com [equivalentes nativos de JavaScript para funções jQuery](/jquery/javascript-jquery-equivalentes-funcoes-nativos/), com dicas sobre manipulação de DOM, classes CSS e modificação de propriedades com JavaScript nativo.

Tal como um complemento àquele, este artigo também aborda algumas soluções com "vanilla JS" (como também é chamado o JavaScript nativo ou puro, sem o uso de bibliotecas) que, certamente, são de grande ajuda e fazem muitos projetos dispensarem o uso de **jQuery** em detrimento a uma solução nativa mais rápida e igualmente eficiente.

> Artigo baseado em [Is it time to drop jQuery? Essentials to learning JavaScript from a jQuery background](http://toddmotto.com/is-it-time-to-drop-jquery-essentials-to-learning-javascript-from-a-jquery-background/).

**jQuery** tem sido uma dádiva para, praticamente, todos nós desenvolvedores front-end desde seu lançamento, com seus métodos intuitivos e funções fáceis. **JavaScript** é difícil, é difícil de "entrar" e é muito mais difícil do que jQuery. Mas o tempo não pára e "ser nativo" pode ser o futuro de front-end: HTML5.

HTML5 não significa apenas alguns elementos HTML extras; HTML5 abrange uma grande "massa" de tecnologia e, também, junto com ele vem ECMAScript 5, o futuro do JavaScript. Combinando APIs HTML5 que necessitam de JavaScript, em sua maioria, precisamos adotar uma estrutura mais nativa de trabalhar a cada dia em que jQuery e afins se tornam menos importantes.

Este artigo apresenta o amante de jQuery a alguns dos mais duros e mais incompreendidos métodos JavaScript, funções e muito mais para mostrar como a _tecnologia nativa_ não é tão difícil quanto parece e que o **JavaScript nativo** provavelmente vai bater em você como um tijolo no rosto muito em breve - se isso já não aconteceu. Este artigo serve para mostrar a qualquer um que é possível mergulhar em desenvolvimento nativo de JavaScript em detrimento a jQuery e, quem sabe, abrir algumas portas para o futuro da (sua) codificação.

## Seletores

Seletores são o grande vendedor de jQuery. Não é preciso, sequer, pensar nisso: a seleção de elementos com jQuery é feita sem pensar, é super simples. jQuery usa **Sizzle**, um motor também criado pela Fundação jQuery ([mas disponível standalone](http://sizzlejs.com/)) para usar como motor de seleção. O poderoso código por trás do Sizzle vai fazer você pensar duas vezes antes de complicar seus seletores e a alternativa JavaScript crua vai fazer você pensar duas vezes sobre jQuery completamente!

### Seletores de classe

JavaScript não tinha método nativo `className` para pegar elementos com classes até recentemente, o que dificultou sua popularidade desde o início. [Classes são as melhores para o desenvolvimento HTML/CSS](/css/nao-use-ids-como-seletores-css/ "Não use IDs como seletores em CSS"), mas não foram bem suportadas com JavaScript nativo. Até agora.

Dê uma olhada nas opções:

```javascript
// jQuery
$('.myClass');

// JavaScript
document.getElementsByClassName('myClass');

```

Isso retorna um **NodeList**. Um Nó é um termo JavaScript para o elemento `Object` e um `NodeList` é uma lista ordenada de Nós.

A diferença entre jQuery e JavaScript nativo quando usando seletores como esses, é que eles retornam um `NodeList` e, então, você tem que lidar com ele. jQuery cuida de tudo isso para você, encobrindo o que realmente está acontecendo; mas é muito importante saber o que está acontecendo.

### Seletores de ID

O mais fácil do pacote:

```javascript
// jQuery
$('#myID');

// JavaScript
document.getElementById('myID');

```

Retorna um Nó simples.

### Tags

Tão fácil quanto o seletor de ID, o seletor de tag também retorna um `NodeList`:

```javascript
// jQuery
$('div');

// JavaScript
document.getElementsByTagName('div');

```

### `querySelector`/`querySelectorAll`

Quando entramos em **querySelector**, as coisas começam a esquentar. Se não fosse pela jQuery, `querySelector` poderia hoje não existir em JavaScript e ser tão rápido e/ou tão eficiente quanto o é e, por isso, temos muito o que agradecer à jQuery!

A mágica por trás de **querySelector** é impressionante, é uma ferramenta nativa multiuso que pode ser usada em vários casos - e isso é JavaScript puro. Existem dois tipos de querySelector: o primeiro que é `document.querySelector()` retorna o primeiro Nó do `NodeList`, independentemente de quantos Objetos-Nó possam ser encontrados; o segundo é `document.querySelectorAll()`, que retorna um `NodeList` toda vez.

Veja alguns exemplos (leia os comentários para entender melhor):

```javascript
/*
 * Classes
 */
// Pega o primeiro nome de classe .myClass
document.querySelector('.myClass');

// Retorna um NodeList com todas instâncias de .myClass
document.querySelectorAll('.myClass');

/*
 * ID
 */
// Pega o ID myID
document.querySelector('#myID');

/*
 * Tags
 */
// Retorna um NodeList com todas instâncias de 'div'
document.querySelectorAll('div');

```

`querySelectorAll` é poderoso, e, definitivamente, o futuro. Ele também suporta seletores mais complicados:

```javascript
// Pega o último Nó de lista de .someList
document.querySelector('ul.someList li:last-child');

// Pega algum atributo data-*
document.querySelectorAll('[data-toggle]');

```

Também é possível criar uma função wrapper inteligente para isso, para evitar de ficar digitando `document.querySelectorAll()` toda vez:

```javascript
var _ = function( elem ) {
    return document.querySelectorAll( elem );
}
// Uso
var myClass = _('.myClass');

```

Também é possível usar o símbolo `$` em vez de um sublinhado, isso é com você. Não é o ideal começar uma expressão de função com um sublinhado, mas isso foi para mostrar que também é possível e aceito.

IE8 suporta seletores CSS2 para `querySelector`, mas, idealmente, você deve usar nomes de classes eficientes e seletores mínimos.

## Manipulação de classe

É possível estender JavaScript usando um método de **herança por prototipagem**, que é o que jQuery faz nos bastidores. HTML5, porém, é o futuro, e está crescendo enquanto navegadores antigos estão rapidamente diminuindo. É hora de começar a usar **métodos nativos de JavaScript para classes**, como o novo recurso de HTML5 `classList`. Vamos a algumas comparações com jQuery.

### Adicionar classe

Adicionar uma classe é fácil com jQuery, ela faz tudo para você, cuidando do array de `NodeList` também.

```javascript
// jQuery
$('div').addClass('myClass');

// JavaScript
var div = document.querySelector('div');
div.classList.add('myClass');

```

### Remover classe

Assim como o exemplo anterior, super simples:

```javascript
// jQuery
$('div').removeClass('myClass');

// JavaScript
var div = document.querySelector('div');
div.classList.remove('myClass');

```

### Alternar classe

Alternar é algo realmente importante para a linguagem e, muitas vezes, difícil de fazer através de métodos _prototype_. Felizmente, aqui está:

```javascript
// jQuery
$('div').toggleClass('myClass');

// JavaScript
var div = document.querySelector('div');
div.classList.toggle('myClass');

```

## Arrays

Agora vamos entrar num dos aspectos mais avançados de JavaScript: **Arrays**. Arrays são usados

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml