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! đŸ’Ș

Atualizado