8.3 - Entendendo melhor o DOM

🧠 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:

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ó.

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

• parentNode → nó pai

• childNodes → lista de filhos

• firstChild, lastChild → primeiro/último filho

• nextSibling, previousSibling → vizinhos

Exemplo:

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:

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:

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

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

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:

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! 💪