🎯 Document Object Model
Em poucas palavras
O Document Object Model (DOM) é uma Interface de Programação de Aplicações (API) para documentos 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.
📝 Notas e Desenvolvimento
- O DOM, ou Document Object Model, é uma forma conveniente de visualizar como os elementos HTML se relacionam entre si usando uma estrutura em árvore.
🔗 Conexões e Contexto
- Atlas: MdC - Tecnologia, MdC - Programação
- Notas Relacionadas:
📚 Referências e Fontes
Links Externos
Citações Diretas
📂 Outros Conteúdos Preservados
Document Object Model (Complemento)
:: 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 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 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.”)