O DOM — a árvore do documento

HTML é texto; DOM é uma árvore de objetos

Quando o browser recebe o HTML, ele não o exibe diretamente — ele o parseia e constrói uma árvore de objetos em memória chamada DOM (Document Object Model). Cada tag HTML vira um Node. Tags viram Element. Textos viram Text. Comentários viram Comment.

Essa árvore é o que o JavaScript manipula. Quando você escreve document.querySelector("h1").textContent = "Novo título", você está mudando um nodo na árvore DOM — e o browser re-renderiza apenas o que mudou.

Explore a árvore DOM

Edite o HTML à esquerda e veja a árvore DOM atualizar em tempo real. Clique nos nodos para inspecionar atributos.

Manipulando o DOM com JavaScript

// Acessar e manipular o DOM com JavaScript

// Seleção — encontrar elementos
document.getElementById("btn")          // por id (único)
document.querySelector(".intro")        // primeiro elemento que bate com o seletor CSS
document.querySelectorAll("li")         // NodeList com todos os <li>

// Leitura e escrita de conteúdo
const el = document.querySelector("h1");
el.textContent          // texto puro (sem HTML)
el.innerHTML            // HTML interno (XSS risco — sanitize inputs!)
el.setAttribute("id", "novo")         // define atributo
el.classList.add("ativo")            // adiciona classe CSS
el.style.color = "red"               // estilo inline (evite — prefira classList)

// Criar e inserir elementos
const li = document.createElement("li");
li.textContent = "Novo item";
document.querySelector("ul").appendChild(li);

// Remover
el.remove();                              // remove o próprio elemento

Eventos e interatividade

// Eventos — reagir a ações do usuário

document.querySelector("#btn").addEventListener("click", (e) => {
  console.log("Clicou!", e.target);     // e.target = elemento clicado
});

// Event delegation — um listener para vários filhos
document.querySelector("ul").addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log("Li clicado:", e.target.textContent);
  }
});

// Event bubbling: click em filho sobe até o document
// stopPropagation() para parar

Construa um DOM Inspector

Mini projeto: escreva uma função printTree(el, depth) que imprime no console a árvore DOM a partir de um elemento, com indentação por nível. Use recursão e el.children.

Projeto principal: crie uma extensão de browser simples (manifest.json + content script) que ao clicar em qualquer elemento da página mostra um tooltip com o seletor CSS único daquele elemento (el.tagName + "#" + el.id + "." + el.className).

Desafio extra: implemente o algoritmo de diff do Virtual DOM: dadas duas árvores (objetos JS), produza uma lista de operações mínimas (insert, remove, update) para transformar uma na outra. É assim que React e Vue funcionam internamente.

Teste sua intuição

Onde você encontra isso