# 8.5 - Aprofundando na navegação pelo DOM

## 🧭 Aprofundando na navegação pelo DOM

Se o **DOM é um mapa da sua página**, então navegar por ele é como explorar os cômodos de uma casa. 🏠✨

Vamos aprender a **andar por essa casa**, descobrir **quem são os pais, filhos e vizinhos**, e como **encontrar qualquer parte da sua página com JavaScript**.

***

### 🧼 Selecionando elementos no DOM

Antes de navegar, precisamos saber **como encontrar o ponto de partida**. Isso se chama **selecionar um elemento**.

#### 🔹 1. Por ID

```html
<p id="meuTexto">Olá, mundo!</p>
```

```javascript
const el = document.getElementById("meuTexto");
```

✅ Rápido e eficiente\
⚠️ IDs devem ser únicos!

***

#### 🔹 2. Por tag (nome da tag)

```html
<p>Primeiro</p>
<p>Segundo</p>
```

```javascript
const paragrafos = document.getElementsByTagName("p");
```

🔁 Retorna uma **coleção** de todos os `<p>` da página!

***

#### 🔹 3. Por class

```html
<p class="mensagem">Oi</p>
```

```javascript
const mensagens = document.getElementsByClassName("mensagem");
```

***

#### 🔹 4. Por name

Útil em formulários:

```html
<input name="email" />
```

```javascript
const email = document.getElementsByName("email");
```

***

#### 🔹 5. Por seletor CSS (mais flexível)

```javascript
const titulo = document.querySelector("h1");
const botoes = document.querySelectorAll(".btn");
```

💡 `querySelector` → retorna o primeiro\
💡 `querySelectorAll` → retorna todos

***

### 🧭 Navegando pela estrutura do DOM

#### 🔼 Subindo

```javascript
elemento.parentNode
```

Retorna o pai do elemento.

#### 🔽 Descendo

```javascript
elemento.children
elemento.firstElementChild
elemento.lastElementChild
```

Pega os filhos diretos de um elemento.

#### 🔁 Lateral (irmãos)

```javascript
elemento.nextElementSibling
elemento.previousElementSibling
```

***

### 🧩 Navegando pelos nós (textos, espaços e comentários)

```javascript
elemento.childNodes
elemento.firstChild
elemento.lastChild
```

⚠️ Diferente de `.children` — esses incluem **textos e espaços em branco!**

***

### 💡 Exemplo real

```html
<div id="caixa">
  <p class="mensagem">Olá</p>
  <p class="mensagem">Mundo</p>
</div>
```

```javascript
const caixa = document.getElementById("caixa");
const primeiroParagrafo = caixa.children[0];
console.log(primeiroParagrafo.textContent); // "Olá"
```

***

### 🧨 Comportamento inesperado

```javascript
const filhos = document.getElementById("caixa").childNodes;
console.log(filhos[0]); // 😳 Pode ser um espaço em branco!
```

🧠 Solução: use `.children` se quiser só os elementos HTML.

***

### ✅ Boas práticas

* Use `querySelector` sempre que possível: simples e moderno.
* Use `.children` ao invés de `.childNodes` se quiser apenas elementos.
* Teste se o elemento existe antes de usá-lo:

```javascript
const el = document.getElementById("naoExiste");
if (el) {
  el.textContent = "Oi!";
}
```

***

### 🚫 Más práticas

* Usar seletores genéricos demais (`document.getElementsByTagName("*")`)
* Usar `innerHTML` para navegar (não é para isso!)
* Contar com `childNodes` sem verificar se é um texto ou espaço
* Usar `for` direto em `HTMLCollection` sem transformar em array

***

### 🤖 Dica: transforme coleções em arrays

```javascript
const filhos = Array.from(document.body.children);
filhos.forEach(el => console.log(el.tagName));
```

***

### 🧠 Resumo

| Ação                  | Método                                         |
| --------------------- | ---------------------------------------------- |
| Selecionar por ID     | `getElementById("id")`                         |
| Selecionar por classe | `getElementsByClassName("classe")`             |
| Selecionar por tag    | `getElementsByTagName("tag")`                  |
| Seletor moderno CSS   | `querySelector("seletor")`                     |
| Ir para pai           | `parentNode`                                   |
| Ir para filhos        | `children`, `firstElementChild`                |
| Ir para irmãos        | `nextElementSibling`, `previousElementSibling` |
| Incluir nós de texto  | `childNodes`                                   |

***

### 🧪 Exercício rápido

Tente usar o console do navegador para rodar isso em qualquer site:

```javascript
console.log(document.body.children[0].tagName);
```

***

### 🌐 Curiosidade

Muitos recursos modernos do DOM são baseados no CSS. Ou seja, **saber CSS ajuda você a navegar melhor no DOM!** 😉