# Document Object Model
> [!NOTE] Document Object Model
> O **Document Object Model (DOM)** é uma [[Interface de Programação de Aplicações]] ([[Interface de Programação de Aplicações|API]]) para documentos [[Linguagem de Marcação de Hipertexto|HTML]] e XML. Ele representa a estrutura de um documento como uma árvore de objetos, onde cada objeto corresponde a uma parte do documento (como elementos, atributos e texto). Essencialmente, o DOM é a ponte que conecta o conteúdo de uma página web a linguagens de script, como o [[JavaScript]], permitindo que elas manipulem a estrutura, o conteúdo e o estilo da página de forma dinâmica.
**:: Referência ::**
## A Estrutura em Árvore
A principal metáfora para entender o DOM é a de uma árvore genealógica. Cada parte do documento é um "nó" (node) na árvore.
- **Nó Raiz (Root Node):** O nó principal é o próprio `document`.
- **Nós de Elemento (Element Nodes):** Cada tag [[Linguagem de Marcação de Hipertexto|HTML]] (como `<body>`, `<h1>`, `<p>`, `<div>`) se torna um nó de elemento.
- **Nós de Texto (Text Nodes):** O conteúdo textual dentro de um elemento é um nó de texto.
- **Relações:** Os nós têm relações de "pai", "filho" e "irmão", o que permite navegar pela estrutura do documento.
Por exemplo, o seguinte código [[Linguagem de Marcação de Hipertexto|HTML]]:
```html
<!DOCTYPE html>
<html>
<head>
<title>Minha Página</title>
</head>
<body>
<h1>Título Principal</h1>
<p>Um parágrafo de exemplo.</p>
</body>
</html>
```
Seria representado no DOM por uma estrutura em árvore semelhante a esta:
- `document`
- `<html>`
- `<head>`
- `<title>`
- (Nó de texto: "Minha Página")
- `<body>`
- `<h1>`
- (Nó de texto: "Título Principal")
- `<p>`
- (Nó de texto: "Um parágrafo de exemplo.")
# Notas
O DOM, ou Document Object Model, é uma forma conveniente de visualizar como os elementos [[Linguagem de Marcação de Hipertexto|HTML]] se relacionam entre si usando uma estrutura em árvore.