O DOM (Document Object Model)
Quando o navegador carrega uma página HTML, ele não fica apenas com o texto: ele constrói na memória uma estrutura de objetos que representa cada etiqueta, atributo e texto. Essa estrutura é o DOM (Document Object Model).
O DOM é uma árvore: o documento contém <html>, que contém
<head> e <body>, que por sua vez contêm outros elementos. Cada nó da
árvore é um objeto com propriedades e métodos que o JavaScript pode ler e
modificar.
<body>
<h1>Olá</h1>
<p>Bem-vindo</p>
</body>
Esse HTML produz uma árvore assim:
document
└─ html
└─ body
├─ h1 → "Olá"
└─ p → "Bem-vindo"
O objeto document
O ponto de entrada para o DOM é a variável global document. A partir dela você
pode buscar elementos, criá-los ou modificá-los:
console.log(document.title); // título da aba
Nota sobre este ambiente de práticas: o editor inclui um
documentde prática (uma versão reduzida do real) com umdocument.bodyvazio. Ele suporta o essencial —createElement,textContent,classList,setAttribute,appendChild,querySelector/querySelectorAll(seletores#id,.classe,etiqueta),getElementById,addEventListenereclick()— então nos exercícios você manipulará o DOM de verdade, não apenas strings.
Exemplos
Percorrer o DOM (exemplo ilustrativo de navegador)
// Em um navegador real isto leria a página.
// Aqui apenas mostramos como ilustração do conceito:
const html = "<ul><li>um</li><li>dois</li></ul>";
console.log("Estrutura como texto:", html);