O Document Object Model (DOM) é uma interface de programação para documentos web, fornecendo uma representação estruturada que permite a manipulação dinâmica da página. Ele modela o documento como uma árvore de nós e objetos, possibilitando a interação com linguagens de script como JavaScript.
Em termos práticos, o DOM abstrai o conteúdo HTML ou XML em uma estrutura acessível programaticamente. Por exemplo, para recuperar todos os elementos de parágrafo em uma página, pode-se usar o método querySelectorAll:
const todosParagrafos = document.querySelectorAll("p");
// todosParagrafos[0] refere-se ao primeiro elemento <p>
// todosParagrafos[1] é o segundo, e assim por diante
console.log(todosParagrafos[0].nodeName);
Todas as propriedades, métodos e eventos relaciondaos à manipulação de páginas são encapsulados em objetos. Instâncias como o objeto document (representando o documanto inteiro) ou objetos específicos como HTMLTableElement (para tabelas) são exemplos disso. O DOM é construído sobre múltiplas APIs que operam em conjunto; a API central define entidades genéricas para qualquer documento, enquanto extensões como a API HTML DOM adicionam suporte a documentos HTML, e a API SVG atende a gráficos vetoriais.
A relação entre DOM e JavaScript é de complementaridade: o DOM não faz parte da linguagem JavaScript em si, mas é uma Web API essencial que fornece o modelo para interagir com páginas web. Sem o DOM, o JavaScript não teria noção da estrutura de documentos HTML ou SVG. Vale destacar que o DOM é independente de linguagem; por exemplo, em Python, pode-se acessar funcionalidades similares usando bibliotecas como xml.dom.minidom:
# Exemplo de manipulação de DOM em Python
import xml.dom.minidom as analisadorXML
documento = analisadorXML.parse(r"C:\MeusProjetos\Py\capitulo1.xml")
documento.nodeName # Propriedade DOM do objeto documento
elementosParagrafo = documento.getElementsByTagName("para")
Para acessar o DOM em um navegader, basta utilizar as APIs JavaScript disponíveis em scripts. Por exemplo, ao carregar uma página, é possível executar código diretamente:
<body onload="console.log('Bem-vindo ao meu site!');">
...
</body>
No entanto, é uma boa prática separar a estrutura HTML da lógica JavaScript. Considere um script que cria dinamicamente um elemento de cabeçalho:
<html lang="pt-BR">
<head>
<script>
window.addEventListener('load', () => {
const cabecalho = document.createElement("h1");
const textoCabecalho = document.createTextNode("Título Importante!");
cabecalho.appendChild(textoCabecalho);
document.body.appendChild(cabecalho);
});
</script>
</head>
<body></body>
</html>
Nesse cenário, o JavaScript interage com o DOM para modificar o documento, mas note que o DOM em si não está limitado a ambientes de navegador; ferramentas como Node.js oferecem JavaScript no lado do servidor com um conjunto distinto de APIs, onde o DOM não está incluído por padrão.