> For the complete documentation index, see [llms.txt](https://favelaware.gitbook.io/favelaware/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://favelaware.gitbook.io/favelaware/8-javascript-para-web/8.4-navegando-pelo-dom.md).
# 8.4 - Navegando pelo DOM
🔍 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
Bem-vindo!
```
#### 👉 Código JavaScript:
```javascript
const titulo = document.getElementById("titulo");
console.log(titulo); // Mostra o elemento 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
Título
Parágrafo 1
Parágrafo 2
```
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
Mensagem original
```
2. Em uma tag `