Selecionando elementos no DOM - Query Selector e Query Selector All
Published: 2021-04-05 22:38:10

Chegamos a mais um post da minha [saga de estudos](https://dev.to/inando85/bem-vindo-de-novo-javascript-1b48) em JavaScript.

No post de hoje irei falar sobre formas de selecionarmos elementos através do DOM, com o intuito de manipularmos eles.

Quando trabalhamos com o `DOM`, podemos adicionar, remover e alterar elementos do nosso HTML, mas para isso, existem alguns passos a serem seguidos.

O primeiro (que será abordado neste post) é decidir qual elemento dá página queremos manipular e após isso, buscarmos sua referência no `DOM`.

Essa ação de buscar o elemento no `DOM`, chamamos de Quering the DOM, traduzindo ficaria algo como buscando no `DOM`.

Imaginem o seguinte documento HTML:

```html
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Query Selector e Query Selector All</title>
</head>
<body>
  <h1>Query Selector e Query Selector All</h1>

  <div>
    <p>Hello World!</p>
    <p>Oi</p>
    <p class="error">Essa é uma mensagem de erro</p>
  </div>

  <div class="error">Outra mensagem de erro</div>
</body>
</html>
```

Vamos iniciar a realização das buscas pelas referência dos elementos no `DOM`.

#### Query Selector (querySelector)

No método `querySelector`, iremos buscar o elemento pelo seletor CSS passado por argumento, entre `''`.

Este método irá retornar o primeiro elemento que tenha o seletor informado.

Abaixo irei obter a referência do primeiro parágrafo

```js
const firstParagraph = document.querySelector('p')
```

Isso faz com que o `DOM` seja consultado (de cima para baixo), a referência da primeira tag `p`, será obtida e atribuída a variável `firstParagraph`, e as demais tags `p` serão ignoradas.

```js
console.log(firstParagraph) // <p>Hello World!</p>
```

Agora irei buscar no `DOM` a referência da última tag `p`, que possui a classe error e irei atribuir a sua referência a uma variável.

```js
const paragraphError = document.querySelector('.error')
```

No caso acima, foi informado o nome da classe CSS para obter a referência do parágrafo que eu queria.

```js
console.log(paragraphError) // <p class="error">Essa é uma mensagem de erro</p>
```

Mas conforme pode ser observado, usamos o nome da classe CSS como argumento `error`, mas, também existe uma `div` com essa mesma classe.

Porém, conforme informado acima, esse método pega a referência apenas do primeiro item encontrado.

Como isso, para selecionar a `div` com a classe `error`, devemos especificar isso como argumento do método `querySelector`.

```js
const divError = document.querySelector('div.error')

console.log(divError) // <div class="error">Outra mensagem de erro</div>
```

#### Query Selector All (querySelectorAll)

Existe a possibilidades de obtermos a referência de múltiplos elementos, para isso iremos usar o métodos `querySelectorAll`.

Este método também irá receber como argumento o seletor CSS que deve ser encontrado.

Fazendo mais uma vez com que o `DOM` seja lido (de cima para baixo), mas desta vez, buscando **TODOS** os elementos que possuam o seletor informado como argumento.

Abaixo irei buscar todos os parágrafos do documento.

```js
const paragraphs = document.querySelectorAll('p')

console.log(paragraphs) // NodeList(3) [p, p, p.error]
```

Como pode ser observado, obtivemos uma `NodeList` com a referência de todos os elementos `p` do documento HTML.

Uma `NodeList` é uma lista de nós, é similar a um `array`, mas **não é um array**, o que significa dizer que não é possível utilizar todos os métodos de array nelas.

Mas podemos realizar algumas ações nessas listas, como por exemplo, utilizarmos a anotação de colchetes `[]` para obtermos o item em uma posição específica da lista.

Buscando o segundo parágrafo da `NodeList`:

```js
console.log(paragraphs[1]) // <p>Oi</p>
```

E também é possível percorrer uma `NodeList` utilizando o método `forEach`.

```js
paragraphs.forEach(paragraph => {
 console.log(paragraph)
})

// Output

/*
<p>Hello World!</p>
<p>Oi</p>
<p class="error">Essa é uma mensagem de erro</p>
*/
```

Também podemos obter todos os elementos que possuam a mesma classe:

```js
const allElementsWithClassError = document.querySelectorAll('.error')

console.log(allElementsWithClassError) // NodeList(2) [p.error, div.error]
```

Vou deixar um link da MDN para mais detalhes sobre o [querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) e [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)

________________________________________________________________

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

[LinkedIn](https://linkedin.com/in/inando85)
[GIthub](https://github.com/inando85)
[Twitter](https://twitter.com/inando85)