---
description: 🌐 O que é o DOM?
---

# 8.2 - O que é o DOM?

## 🌐 O que é o DOM?

> 📚 DOM significa **Document Object Model** (em português, Modelo de Objeto do Documento).

***

### 🏠 Imagine uma casa...

Pense no seu site como uma **casa** construída com blocos de LEGO. Cada peça representa uma parte da página:

* 🏷️ Um **título** (`<h1>`)
* ✉️ Um **parágrafo** (`<p>`)
* 🔘 Um **botão** (`<button>`)
* 🖼️ Uma **imagem** (`<img>`)

O **DOM é como o mapa dessa casa** que o navegador cria automaticamente para que o JavaScript consiga:

* Ver o que tem na casa (ler os elementos 🕵️)
* Mudar as coisas de lugar (editar os elementos ✍️)
* Criar novos cômodos (adicionar elementos ➕)
* Remover o que quiser (tirar elementos ❌)

***

### 💡 Em outras palavras...

O DOM é a **forma como o JavaScript enxerga a sua página HTML**.\
Ele transforma o código da página em uma **estrutura de objetos** que podem ser manipulados.

***

### 👀 Mas o que é isso na prática?

O **DOM é uma estrutura em forma de árvore** 🌳 que representa todos os elementos da sua página — como se fossem **caixinhas conectadas entre si**.

Veja um exemplo:

```html
<html>
  <body>
    <h1>Olá, mundo!</h1>
    <p>Seja bem-vindo à minha página 😊</p>
  </body>
</html>
```

Para o navegador, isso vira algo parecido com:

```
📦 html
 └── 📦 body
      ├── 📦 h1 → "Olá, mundo!"
      └── 📦 p → "Seja bem-vindo à minha página 😊"
```

Cada caixinha (ou "nó") é um **elemento do DOM** que o JavaScript pode encontrar e mudar.

***

### 💡 Por que o DOM é importante?

Porque ele é **a ponte entre o HTML e o JavaScript**. Com o DOM, conseguimos:

* Ler o conteúdo da página 🧐
* Mudar textos e estilos 🎨
* Adicionar ou remover elementos dinamicamente 🧩

Tudo isso **sem precisar recarregar a página**. Legal, né?

***

### 🔄 O DOM é como o cérebro da página

Quando a página é carregada no navegador, o HTML vira uma estrutura DOM — ou seja, uma **coleção de objetos** que o JavaScript consegue usar para **entender e interagir com a página**.

Esse processo acontece automaticamente, você não precisa criar o DOM — o navegador já faz isso por você!

***

### 🛠️ Um primeiro exemplo

```html
<!DOCTYPE html>
<html>
  <body>
    <h1 id="titulo">Olá!</h1>

    <script>
      // Acessa o título e muda seu conteúdo
      const titulo = document.getElementById("titulo");
      titulo.textContent = "Olá, DOM! 👋";
    </script>
  </body>
</html>
```

#### 🔍 O que aconteceu?

* O navegador transformou o HTML em DOM.
* O JavaScript procurou o elemento com `id="titulo"`.
* Ele mudou o texto de “Olá!” para “Olá, DOM! 👋”.

Simples assim! 😄

***

### 📌 Recapitulando

| Conceito   | Explicação rápida                                        |
| ---------- | -------------------------------------------------------- |
| DOM        | Estrutura que representa tudo o que está na página       |
| HTML       | A "matéria-prima" da página                              |
| JavaScript | A linguagem que usamos para mexer com o DOM              |
| Elementos  | Partes da página (títulos, botões, etc.)                 |
| Navegador  | O programa que transforma o HTML em DOM e exibe a página |

***

### ✨ Conclusão

O **DOM é a chave** para deixar suas páginas **interativas e dinâmicas**. Ele permite que o JavaScript veja e mexa em tudo o que está no HTML.

> 💬 Pense no DOM como um superpoder que te permite conversar com a página — e ela responde! 💥

Nas próximas seções, você vai aprender como **navegar pelo DOM**, **mudar coisas na tela** e até **reagir a ações dos usuários**!
