Modelo de Objeto de Documentos

O Modelo de Documento por Objetos (do inglês Document Object Model), mais conhecido pela abreviação DOM, é uma API multiplataforma baseada em eventos padronizada pela entidade W3C usada para interagir com os elementos de páginas web HTML, XML e, XHTML (DHTML).^{[1][2][3][4][5]} Onde os elementos do arquivo são organizados na forma de árvore e nós, chamada de Árvore DOM, que endereça e manipula via uso de funções/métodos (interface pública) sobre os objetos, especificada de acordo com a interface de programação de aplicações (API) utilizada, que oferece uma maneira padrão de se acessar cada elemento de um documento, criando páginas altamente dinâmicas.

Hierarquia dos objetos num exemplo HTML DOM - Document Object Model

Histórico

A história do Modelo de Documento por Objetos se confunde com a história da "guerra dos navegadores" do final da década de 1990 entre o Netscape Navigator e o Microsoft Internet Explorer, bem como com a do JavaScript e do JScript, as primeiras linguagens de script a serem implementadas amplamente nos mecanismos de layout dos navegadores web.

A linguagem de programação JavaScript foi lançada pela empresa Netscape Communications em 1995 junto com o navegador Natscape Navigator versão 2.0 e, como concorrente, a Microsoft lançou no ano seguinte o Internet Explorer versão 3.0 com uma adaptação do JavaScript chamada JScript. Ambas permitiram aos desenvolvedores web criar páginas online que permitiam a interação com o usuário (interatividade). As facilidades para detecção de eventos gerados pelo usuário e modificação de documento HTML na primeira geração destas linguagens eventualmente tornaram-se conhecidas como "DOM nível 0" ou "DOM Legado". Nenhum padrão independente foi desenvolvido para o DOM nível 0, mas foi parcialmente descrito na especificação HTML 4.

DOM Legado

O DOM Legado era limitado nos tipos de elementos que poderiam ser acessados. O formulário, ligação e os elementos de imagem poderiam ser referenciados com um nome de hierarquia que iniciava com o objeto de documento raiz. Um nome hierárquico poderia fazer uso dos nomes ou do índice sequencial dos elementos percorridos. Por exemplo, um elemento de entrada de um formulário poderia ser acessado como "document.nomeDoFormulario.nomeDaEntrada" ou "document.forms[0].elements[0]".

O DOM Legado permitiu a validação de formulário do lado cliente e o efeito popular de "rollover".

DOM Intermediário

Em 1997, a Netscape e a Microsoft lançaram respectivamente a versão 4.0 do Netscape Navigator e do Internet Explorer, respectivamente, adicionando suporte para Dynamic HTML (DHTML), funcionalidade que permite alterações na página web HTML carregado. A DHTML necessitava de extensões ao objeto de documento rudimentar que estava disponível nas implementações do DOM Legado. Apesar de que as implementações do DOM Legado fossem amplamente compatíveis, uma vez que o JScript era baseado no JavaScript, as extensões DOM DHTML eram desenvolvidas em paralelo por cada fabricante de navegador e permaneciam incompatíveis. Estas versões do DOM tornaram-se conhecidas como "DOM Intermediário".

Padronização

WHATWG DOM

O World Wide Web Consortium (W3C), fundado em 1994 para promover padrões abertos para a World Wide Web, persuadiu a Netscape Communications e a Microsoft, juntamente com outras companhias, a desenvolverem um padrão para as linguagens de script de navegador, chamada "ECMAScript". A primeira versão do padrão foi publicada em 1997. Lançamentos subsequentes de JavaScript e JScript implementariam o padrão ECMAScript para maior compatibilidade entre navegadores.

Após o lançamento do ECMAScript, o W3C começou a trabalhar em um DOM padronizado. O padrão DOM inicial, conhecido como "DOM Nível 1", foi recomendado pela W3C no início de 1998. Cerca da mesma época, o Internet Explorer 5.0 navegava com suporte limitado para DOM Nível 1. O DOM Nível 1 fornecia um modelo completo para um documento HTML ou XML inteiro, incluindo meios de alterar qualquer porção do documento. Navegadores sem conformidade como o Internet Explorer 4.x e Netscape 4.x ainda foram amplamente utilizados até 2000.

O DOM Nível 2 foi publicado no início de 2000. Ele introduziu a função "getElementById" bem como um modelo de evento e suporte para espaços de nomes XML e CSS.

O DOM Nível 3, a versão atual da especificação DOM, publicada em abril de 2004, adicionou suporte a XPath e manipulação de evento pelo teclado, bem como uma interface para serialização de documentos como XML.

O DOM Nível 4 atualmente está sendo desenvolvido. A Última Chamada de Projeto de Trabalho (Last Call Working Draft) foi lançada em julho de 2014.^[6]

Em 2005, muitas partes do DOM W3C foram bem suportadas pelos navegadores populares habilitados com o ECMAScript, incluindo o Microsoft Internet Explorer versão 6 (de 2001), Opera, Safari e navegadores baseados no Gecko (como Mozilla, Firefox, SeaMonkey e Camino).

Aplicações

Navegadores web

Para apresentar um documento como uma página HTML, a maioria dos navegadores utilizam um modelo internacional similar ao DOM. Os nós de cada documento são organizados em uma estrutura de árvore, chamada de árvore DOM, com o nó superior denominado "Document object" (objeto Documento). Quando uma página HTML é apresentada nos navegadores, o navegador baixa o HTML na memória local e automaticamente analisa-o para mostrar a página na tela. O DOM é também a maneira que o JavaScript transmite o estado do navegador em páginas HTML.

Implementações

Navegadores

Inicialmente, quando cada navegador suportava exclusivamente o seu próprio interpretador DOM, eram inúmeros os problemas de operatividade. De forma a ser cross-browser compatível, isto é, suportando vários navegadores, uma grande parte do código DHTML teve de ser rescrito para cada navegador ser suportado. A promessa da especificação era de simplificar substancialmente o desenvolvimento de aplicações Web complexas.

O Level 1 do DOM tem sido uma recomendação desde 1 de Outubro de 1998. O esforço de normalização não trouxe uma mudança imediata por que navegadores poucos flexíveis como Internet Explorer 4.x e Netscape 4.x ainda eram mundialmente usados em 2000. Em 2005, uma grande parte da especificação DOM já era muito bem suportada pelos mais comuns navegadores que tinham suporte ao JavaScript, incluindo o Internet Explorer (versão 5 e 6), navegadores baseados no Gecko (como Mozilla, Firefox e Camino), Konqueror, Opera e Safari.

Uso

O HTML-DOM ou XML-DOM define o modo como os elementos estão relacionados entre si no navegador e na página web; é possível atribuir uma identificação aos elementos (id) para poder manipula-lo. Como por exemplo, uma DIV com uma lista de idiomas, e para interagir com o elemento DIV em HTML, use a função GetElementById e InnerHTML com o JavaScript. Assim pode-se adicionar um novo valor a lista (adiciona um novo idioma):

<!- O elemento DIV no documento HTML, uma lista de idiomas -->
<div id="IdiomasWiki">
	<li>Deutsch</li>
	<li>English</li>
	<li>Français</li>
</div>

// Função getElementById em JavaScript trabalha como o elemento DIV IdiomasWiki
document.getElementById("IdiomasWiki")

// O innerHTML adiciona um novo idioma na DIV
document.getElementById("IdiomasWiki").innerHTML += "<li>Português</li>"

Para manipular a interação do usuário (eventos) com elementos do DOM use a função AddEventListener, como por exemplo o usuário ao clicar em um botão adiciona um novo valor (adiciona um novo idioma):^[7]

document.addEventListener("click", minhaFunção);

function minhaFunção() {
  document.getElementById("IdiomasWiki").innerHTML = "<li>Holandes</li>";
}

A função AddEventListener trabalha com vários tipos de eventos:^[7]

document.addEventListener("mouseover", minhaFunção);
document.addEventListener("click", minhaFunção2);
document.addEventListener("mouseout", minhaFunção3);

A função AddEventListener reconhece quando o usuário clica no botão; quando o usuário realiza um evento, quando o usuário realiza uma interação:

//Botão HTML com o texto "Clique em mim"
<button id="meuBotao">Clique em mim</button>

// 1. Seleciona o botão
const meuBotao = document.getElementById("meuBotao");

// A função que será executada no evento de "click" no botão
function mostrarMensagem() {
  alert("Obrigado por clicar!");
}

// Listener de evento "click" no botão, executa a função mostrarMensagem quando o botão é clicado
meuBotao.addEventListener("click", mostrarMensagem);

Referências

1. «Document Object Model (DOM)». W3C. Consultado em 25 de outubro de 2014. O Modelo de Documento por Objetos é uma interface neutra em relação a plataforma e linguagem que permitirá aos programas e scripts para acessar dinamicamente e atualizar o conteúdo, estrutura e estilo de documentos.
2. «XML DOM Tutorial». W3Schools. Consultado em 25 de outubro de 2014. Arquivado do original em 14 de agosto de 2006
3. «O que é o DOM?». Tableless. Consultado em 25 de outubro de 2014
4. Duarte, Otto Carlos Muniz Bandeira; Miguel Benedito, Furtado Júnior. «Tutorial XML - Padrões da estrutura do XML». CENTRO DE TECNOLOGIA DA UNIVERSIDADE FEDERAL DO RIO DE JANEIRO. Consultado em 30 de setembro de 2025. Cópia arquivada em 6 de maio de 2021. Resumo divulgativo
5. «Digital Guide: Document Object Model (DOM)». IONOS Digital Guide (em inglês). 11 de julho de 2023. Consultado em 30 de setembro de 2025
7. «HTML DOM Document addEventListener() Method». www.w3schools.com (em inglês). Consultado em 30 de setembro de 2025