# 8.3 - Entendendo melhor o DOM

## 🧠 Entendendo Melhor o DOM

Agora que você já sabe **o que é o DOM**, vamos dar um passo além. Vamos entender **como ele funciona por dentro**, quais são seus **tipos**, como **acessar e manipular**, e quais são as **boas práticas** para usar esse superpoder com sabedoria! 💥

***

### 📚 Acessando o DOM na prática

Sempre que sua página é carregada, o navegador cria automaticamente o DOM e guarda isso dentro de um **objeto especial chamado `document`**.

Exemplos de como acessar elementos:

```javascript
document.getElementById("meuBotao")
document.querySelector(".meuParagrafo")
document.getElementsByTagName("p")
```

🧩 Cada um desses métodos **acessa um pedaço da árvore do DOM**.

***

### 🌳 A árvore DOM: pais, filhos e nós

O DOM é uma **árvore de objetos**. Cada parte da sua página (texto, botão, imagem, etc.) é um **nó**.

```plaintext
document
└── html
    └── body
        ├── h1
        ├── p
        └── button
```

* `parentNode` → nó pai
* `childNodes` → lista de filhos
* `firstChild`, `lastChild` → primeiro/último filho
* `nextSibling`, `previousSibling` → vizinhos

#### Exemplo:

```javascript
const paragrafo = document.querySelector("p"); // encontra o elemento <p>
console.log(paragrafo.parentNode); // mostra o pai do <p>
```

***

### 🔗 Nós x Elementos

* **Elementos (`Element`)** → partes visuais da página (ex: `<p>`, `<div>`)
* **Nós (`Node`)** → tudo que está na árvore (elementos, textos, comentários, espaços em branco...)

Todo **elemento é um nó**, mas **nem todo nó é um elemento**! 🧠

***

### 🧩 Interfaces e APIs do DOM

O DOM é composto por **várias interfaces** — tipos de objetos com ações possíveis.

Algumas interfaces comuns:

* `Document` (a raiz de tudo)
* `Element` (representa um elemento HTML)
* `HTMLElement` (um tipo especial de `Element`)
* `NodeList` (listas de nós)
* `Text`, `Comment`, `Attr`, `Event`, etc.

#### Exemplos de objetos e interfaces que eles implementam:

| Objeto     | Interfaces que implementa                      |
| ---------- | ---------------------------------------------- |
| `document` | `Document`, `Node`, `EventTarget`              |
| `div`      | `HTMLElement`, `Element`, `Node`               |
| `window`   | `Window`, `EventTarget`, `GlobalEventHandlers` |

***

### 📄 Tipos de DOM: HTML x XML

* **DOM HTML**: usado para sites; trabalha com elementos como `<h1>`, `<p>`, `<button>`, etc.
* **DOM XML**: usado para ler e manipular dados estruturados em XML (menos comum para iniciantes)

Ambos seguem as **mesmas regras básicas**, mas com algumas diferenças de sintaxe.

***

### 📐 Padrões do DOM

O DOM é padronizado pelo **W3C** e **WHATWG**, o que garante que ele funcione (quase) igual em todos os navegadores.

Mas...

⚠️ Cada navegador tem seu próprio motor (Chrome, Firefox, Safari, etc.) e **pode haver pequenas diferenças** no comportamento de algumas funções!

***

### 🔧 Testando a DOM API

Você pode testar o DOM direto no navegador!

#### Como abrir o console:

1. Clique com o botão direito na página
2. Vá em **"Inspecionar"**
3. Clique na aba **"Console"**
4. Digite:

```javascript
document.body.style.backgroundColor = "lightblue"
```

😱 Boom! A cor do fundo mudou. Você acabou de usar a DOM API!

***

### ✍️ Convenções e boas práticas

#### ✅ Boas práticas:

* Nomear elementos com `id` ou `class` claros (`id="btnEnviar"`)
* Evitar alterar muitos estilos via JS (use CSS sempre que possível)
* Manipular o DOM **depois que a página carregou** (`window.onload` ou `<script>` no fim)

#### 🚫 Más práticas:

* Usar muitos `document.write()` (🚫 antigo, desatualizado)
* Misturar lógica JS com HTML inline (`onclick="..."`)
* Usar IDs duplicados na página

***

### 💥 Exemplos com comportamento inesperado

#### ❌ Erro comum:

```javascript
document.getElementById("naoExiste").textContent = "Oi!"
// Erro: Cannot set property 'textContent' of null
```

💡 Solução: sempre verifique se o elemento existe!

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

***

### 🧠 Terminologias úteis

| Termo     | Significado                                     |
| --------- | ----------------------------------------------- |
| DOM       | Modelo de Objeto do Documento                   |
| Nó (Node) | Uma parte da árvore DOM                         |
| Element   | Elemento HTML (ex: `<div>`)                     |
| Atributo  | Propriedades de elementos (ex: `id`, `class`)   |
| Interface | Conjunto de comportamentos possíveis em objetos |
| Evento    | Ação do usuário que o JS pode reagir            |

***

### 🤖 Usando DOM + APIs

Você pode combinar a DOM API com outras APIs da Web, como:

* `Fetch API`: buscar dados e inserir no DOM
* `Storage API`: salvar coisas no navegador
* `Geolocation API`: mostrar localização na página

#### Exemplo:

```javascript
fetch("https://api.exemplo.com/usuarios")
  .then(res => res.json())
  .then(data => {
    document.querySelector("#nomeUsuario").textContent = data.nome;
  });
```

***

### ✅ Resumo final

* O DOM é a **estrutura viva** da sua página
* Tudo pode ser acessado como um **objeto**
* Você pode ler, criar, editar e apagar qualquer parte
* O DOM segue padrões e boas práticas
* Teste tudo no console, experimente, e **aprenda fazendo!** 💪