Outras maneiras de fazer queries no DOM - getElement...
Published: 2021-04-06 23:14:52

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

No post anterior, eu falei sobre [querySelector e querySelectorAll](https://dev.to/inando85/selecionando-elementos-no-dom-query-selector-e-query-selector-all-55g4), para selecionarmos elementos no DOM.

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

Para as explicações abaixo, levaremos em consideração o seguinte arquivo `HTML`:

```html
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Outras maneiras de fazer queries no DOM</title>
</head>
<body>
  <h1 id="title">Outras maneiras de fazer queries no DOM</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>

  <script src="./app.js"></script>
</body>
</html>
```

#### Seleção pelo ID - getElementById

Através do método `getElementById` é usado para buscarmos a referência de algum elemento pelo ID dele.

Como este método é específico para ID's, não precisamos usar a `#` na frente do nome do ID no argumento, pois ele já entendi que deverá buscar um elemento com o ID passado por argumento.

```js
const title = document.getElementById('title')

console.log(title) // <h1 id="title">Outras maneiras de fazer queries no DOM</h1>
```

#### Seleção pelo nome da classe CSS - getElementByClassName

Como este método é específico para nomes de classes, não precisamos usar o `.` na frente do nome da classe no argumento, pois ele já entendi que deverá buscar um elemento com a classe passada por argumento.

```js
const errors = document.getElementsByClassName('error')

console.log(errors) // HTMLCollection(2) [p.error, div.error]
```

Conforme observado acima, tivemos como retorno um `HTMLCollection`.

`HTMLCollection` representa uma lista genérica de elementos, é similar ao NodeList, mas não é idêntico. Também é possível acessar cada item através da anotação de colchetes `[]` ou através do métodos `item`.

```js
console.log(errors[0]) // <p class="error">
console.log(errors.item(1)) // <div class="error">
```

Mas não é possível iterar por um `HTMLCollection` com o forEach, já na `NodeList` isso é possível.

```js
errors.forEach(error => {
  console.log(error) // Uncaught TypeError: errors.forEach is not a function
})
```

Esse erro acima, acontece justamente pelo fato de um `HTMLCollection` não ser um `array` ou uma `NodeList`.


#### Seleção pelo nome da tag - getElementByTagName

Para esse tipo de seleção, basta informar por argumento o nome da tag que devemos buscar.

Abaixo irei obter as referências de **todas** as tags `p`.

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

console.log(paragraphs) // HTMLCollection { 0: p, 1: p, 2: p.error, length: 3 }
```

Chegamos ao fim de mais um post, espero que o conteúdo tenha ajudado.

Vou deixar links do MDN para cada item citado neste post:

[getElementById](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
[getElementByClassName](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName)
[getElementByTagName](https://developer.mozilla.org/en-US/docs/Web/API/document/getElementsByTagName)

________________________________________________________________

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)