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Ăł paichildNodes
â lista de filhosfirstChild
,lastChild
â primeiro/Ășltimo filhonextSibling
,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 deElement
)NodeList
(listas de nĂłs)Text
,Comment
,Attr
,Event
, etc.
Exemplos de objetos e interfaces que eles implementam:
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:
Clique com o botĂŁo direito na pĂĄgina
VĂĄ em "Inspecionar"
Clique na aba "Console"
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
ouclass
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
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 DOMStorage API
: salvar coisas no navegadorGeolocation 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