Page cover

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

Previous8.2 - O que é o DOM?Next8.4 - Navegando pelo DOM

Last updated