DOM
A árvore de elementos que o navegador monta a partir do HTML. É o painel de camadas da página.
Também aparece como "Document Object Model", "árvore", "elemento", "inspecionar", "devtools".
No mundo do Design
O Figma chama isso de Painel de camadas
O navegador lê o HTML e monta uma estrutura em árvore na memória: página dentro de body, body dentro de html, cada elemento com seus filhos. Essa árvore é o DOM.
É o painel de camadas do Figma, com aninhamento e ordem. Quando você abre o inspetor do navegador (F12) e vê aquela lista com setinhas pra expandir, está olhando pro DOM.
Por que o nome aparece toda hora
Porque tudo que acontece depois que a página carrega acontece no DOM, não no HTML original:
- JavaScript adiciona, remove e muda elementos do DOM
- React existe basicamente pra atualizar o DOM por você
- "manipular o DOM" quer dizer mexer na árvore pelo código
O exercício de cinco minutos
Abra qualquer site, aperte F12, clique na setinha de selecionar elemento e passe o mouse pela página. Cada bloco acende com a tag e o tamanho, do jeito que o Figma acende a camada. É a forma mais rápida de descobrir que a web inteira é feita de caixas empilhadas.
Outros termos de HTML
Quer o assunto inteiro e não só a definição? Os guias pegam cada tema do começo ao fim.