Entendendo a Árvore DOM
07/08/2025
O DOM (Document Object Model) é a representação estruturada de um documento HTML ou XML na memória do navegador. Ele organiza os elementos da página em uma árvore hierárquica, onde cada nó corresponde a uma parte do documento — como tags HTML, atributos e trechos de texto.
Estrutura da Árvore DOM
A árvore DOM é formada por diferentes tipos de nós (nodes), interligados de forma hierárquica. A raiz dessa árvore é o document, que representa todo o conteúdo carregado no navegador.
Tipos principais de nós:
- Elemento (Element Node)
- Representa tags HTML como
<div>,<p>,<img>. Cada elemento pode conter outros elementos ou nós de texto. - Atributo (Attribute Node)
- Representa atributos dos elementos, como
id,class,src. No DOM, atributos estão associados aos elementos, e não aparecem como filhos na árvore. - Texto (Text Node)
- Contém o texto presente dentro de um elemento, sem incluir marcação HTML.
- Comentários (Comment Node)
- Representa comentários no código, iniciados por
<!--e finalizados por-->.
Exemplo de Árvore DOM
Considere o HTML:
html
<!DOCTYPE html>
<html>
<head>
<title>Exemplo</title>
</head>
<body>
<h1>Título</h1>
<p>Parágrafo</p>
</body>
</html>
A árvore DOM correspondente pode ser representada assim:
bash
Document
└── html
├── head
│ └── title
│ └── "Exemplo"
└── body
├── h1
│ └── "Título"
└── p
└── "Parágrafo"
Cada indentação representa um nível na hierarquia. Um elemento pode conter outros elementos, que por sua vez podem conter nós de texto.
Relações entre nós
No DOM, os nós possuem relações que ajudam na navegação e manipulação:
- Pai (parentNode): Nó que contém outro nó diretamente.
- Filho (childNode): Nó contido diretamente dentro de outro.
- Irmão (sibling): Nós que compartilham o mesmo pai.
- Raiz (root): O
document, que contém todo o conteúdo.
Por exemplo, no código acima:
<body>é pai de<h1>e<p>.<h1>e<p>são irmãos."Título"é filho de<h1>.
Manipulação do DOM
O DOM pode ser manipulado por linguagens como JavaScript, permitindo adicionar, modificar ou remover elementos e conteúdo. Exemplos:
javascript
// Seleciona um elemento
const titulo = document.querySelector('h1');
// Altera o texto
titulo.textContent = 'Novo título';
// Cria um novo parágrafo
const novoParagrafo = document.createElement('p');
novoParagrafo.textContent = 'Parágrafo adicionado via JavaScript';
// Adiciona ao body
document.body.appendChild(novoParagrafo);
Importância do DOM
A compreensão da estrutura da árvore DOM é fundamental para:
- Criar e manipular elementos dinamicamente.
- Entender o impacto de alterações no desempenho.
- Trabalhar com eventos e interatividade de forma eficiente.
- Depurar e otimizar páginas complexas.
Essa estrutura de árvore permite que o JavaScript (e frameworks como o Angular) acesse, manipule e interaja com qualquer elemento da página. Quando o Angular destrói um componente, como mencionamos no Canvas, ele remove o nó correspondente e todos os seus filhos dessa árvore, liberando a memória e limpando a tela.
