O Modelo Objeto de Documento (DOM, do inglês Document Object Model) é uma estrutura de dados que representa a estrutura e o conteúdo de um documento web. Técnicamente, o DOM é uma representação orientada a objetos de documentos HTML e XML, e fornece funções e métodos para que um programa possa interagir com eles.
O DOM é definido pelas especificações da W3C e da WHATWG, e implementado pelos navegadores. Muitos navegadores podem estender essa especificação e disponibilizar funcionalidades que não são adotadas por todos os navegadores, então é preciso cuidado e é sempre recomendado seguir o padrão das especificações.
Como dito, o DOM representa um documento web como uma API orientada a objetos. Todas as propriedades, métodos e eventos disponíveis para manipular e criar páginas web são organizadas em objetos. Uma página HTML, por exemplo, será representada pela classe Document. Já uma tabela, escrita com a tag <table>, será representada pela classe HTMLTableElement.
O DOM define métodos que servem para buscar elementos também. Um exemplo é o querySelectorAll, que recebe um seletor CSS em uma string e retornar elementos descendentes que casam com o seletor dado.
const paragraphs = document.querySelectorAll('p');
for (const paragraph of paragraphs) {
console.log(paragraph);
}O DOM e o JavaScript 🙝
No exemplo anterior, e em quase todos os exemplos que você vai encontrar quando pesquisar e trabalhar com DOM, você utilizará o JavaScript. No entanto, é importante entender e separar o DOM e o JavaScript. DOM não é uma linguagem de programação, mas sem o DOM o JavaScript não seria capaz de compreender páginas web e adicionar interação à elas.
No início da web, o JavaScript e o DOM eram muito interligados. Mas, com o desenvolvimento das especificações e da tecnologia web, eles se desenvolveram em duas entidades distintas. O DOM moderno é projetado para ser implementado em qualquer linguagem de programação. Veja um exemplo de utilização do DOM em Python usando a biblioteca minidom.
import xml.dom.minidom as dom
document = dom.parse('./index.html')
p_list = document.getElementsByTagName('p')
for p in p_list:
print(p)Acessando o DOM 🙝
Nos navegadores não é necessário adicionar uma biblioteca para utilizar o DOM, qualquer script JavaScript executado no ambiente dos navegadores tem acesso a ele. Veja um exemplo abaixo de um documento HTML que utiliza o DOM para construir um cabeçalho com a frase “Olá Mundo!”.
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<script>
window.addEventListener('load', function () {
const header = document.createElement('h1');
const text = document.createTextNode('Olá Mundo!');
header.appendChild(text);
document.body.appendChild(header);
});
</script>
</head>
<body></body>
</html>Grande parte do conteúdo do script utiliza o DOM nesse exemplo: o método addEventListener do window; os método createElement do document ou o appendChild do header. Todos esses métodos são definidos pelo DOM e disponibilizados pelo navegador.
Algumas interfaces fundamentais 🙝
Como já dito anteriormente, o DOM é uma API orientada a objetos que representa um documento web. Um documento HTML, por exemplo, é representado no DOM como um objeto que segue a interface Document e apresenta uma estrutura similar com uma árvore. Muitas vezes esse objeto é chamado de “Árvore DOM”. Nos navegadores você pode acessar a instância desse objeto pela variável document (como fizemos no exemplo anterior).
No entanto, a interface Document estende outra interface ainda mais genérica, a Node. Node é uma interface genérica que muitas outras APIs do DOM são baseadas. Qualquer “nó” no DOM implementa Node. Alguns exemplos incluem o já mencionado Document, mas temos também Element, interface que todas as tags HTML seguem; ou também a Text, interface implementada pelos nós de texto do documento; e até mesmo a Comment, que representa um comentário denotado pela marcação <!-- --> no HTML.
Outra interface importante é a EventTarget. Todos os nós DOM implementam essa interface, pois Node é uma extensão de EventTarget. A EventTarget permite a criação de objetos capazes de ouvir e disparar eventos. Por exemplo, se você tem a necessidade de executar um trecho de código quando um usuário clica em um elemento, você provavelmente utilizará um evento e o método addEventListener da interface EventTarget.
Conclusões 🙝
Você pode ver que quase todas as características de um documento HTML são representadas de alguma forma no DOM. Existem muitas classes e interfaces que contém diversos métodos e propriedades. É colossal o tamanho da especificação do DOM.
Você pode achar que isso é muito para aprender de uma vez e realmente é. No entanto, em um primeiro momento você não precisa entender tudo nos mínimos detalhes, o importante é você ter noção geral de como essa tecnologia web funciona. Eu acredito que, conforme você adquire experiência, você deve entender o funcionamento dessa API para que você seja um bom desenvolvedor de software para a web.