---
description: 🔍 Navegando pelo DOM
---

# 8.4 - Navegando pelo DOM

## 🔍 Navegando pelo DOM

Agora que você já sabe o que é o DOM e por que ele é importante, vamos aprender **como navegar por ele usando JavaScript**.

> Lembra que o DOM é como uma árvore com caixinhas dentro de caixinhas? 📦🌳\
> Pois é, agora você vai aprender a **encontrar** essas caixinhas!

***

### 🗺️ O navegador como guia

Quando você escreve um código HTML, o navegador transforma isso em DOM.\
O **objeto principal que representa a página é o `document`**.

> O `document` é o ponto de partida para acessar tudo no DOM!

***

### 🆔 Acessando elementos com `getElementById`

Uma das formas mais simples de encontrar um elemento na página é pelo **`id`**.

#### 👇 Exemplo HTML:

```html
<h1 id="titulo">Bem-vindo!</h1>
```

#### 👉 Código JavaScript:

```javascript
const titulo = document.getElementById("titulo");
console.log(titulo); // Mostra o elemento <h1> no console
```

🧠 **Explicando:**

* `document` → o DOM da página
* `getElementById("titulo")` → procura o elemento com `id="titulo"`
* `const titulo` → guarda esse elemento numa variável

***

### 🧪 Testando no navegador

Você pode abrir o navegador, ir até uma página com HTML e:

1. Clicar com o botão direito → **Inspecionar**
2. Ir até a aba **Console**
3. Escrever:

```javascript
document.getElementById("titulo");
```

Se o elemento existir, ele aparece ali! 🎉

***

### 🗃️ Lembrando da estrutura em árvore

Vamos imaginar o HTML abaixo:

```html
<body>
  <h1 id="cabecalho">Título</h1>
  <p>Parágrafo 1</p>
  <p>Parágrafo 2</p>
</body>
```

Esse código vira uma árvore DOM assim:

```
📦 body
 ├── 📦 h1 (id="cabecalho")
 ├── 📦 p (Parágrafo 1)
 └── 📦 p (Parágrafo 2)
```

O navegador sabe onde está cada caixinha, e você pode pedir:

```javascript
const cabecalho = document.getElementById("cabecalho");
```

***

### ⚠️ Importante

* O `id` precisa ser **único** na página!
* Se não existir um elemento com o `id` que você escreveu, o resultado será `null` (ou seja, nada).

***

### ✅ Resumo até aqui

| Comando                  | O que faz                                  |
| ------------------------ | ------------------------------------------ |
| `document`               | Representa toda a página                   |
| `getElementById("nome")` | Acessa o elemento com o `id` especificado  |
| `console.log()`          | Mostra o resultado no console do navegador |

***

### 🧠 Desafio rápido!

1. Crie um arquivo HTML com o seguinte conteúdo:

```html
<h2 id="mensagem">Mensagem original</h2>
```

2. Em uma tag `<script>`, adicione:

```javascript
const mensagem = document.getElementById("mensagem");
mensagem.textContent = "Mensagem atualizada com JavaScript! 🚀";
```

3. Abra o arquivo no navegador e veja a mágica acontecer! ✨

***

Na próxima seção, vamos aprender a **alterar conteúdos da página**, como textos e estilos, usando o poder do DOM e do JavaScript! 😄
