É uma interface padronizada que permite que navegadores e scripts possam manipular o conteúdo de uma página web sem a necessidade de realizar atualizações e upgrades. É ele, ainda, que põe ordem na navegação web para que o conteúdo fique acessível a todos.

Esse é um assunto que certamente é de interesse de quem deseja ou já trabalha com:

• Front-End;
• JavaScript;
• CSS;
• HTML;
• PWA;
• Web App;
• Frameworks modernos, como Vue.js, Angular e React.

Se esse é o seu caso, continue a leitura e conheça mais sobre o DOM!

O que é DOM?

Ele é utilizado pelo navegador para representar a sua página Web. É ele que fornece uma representação estruturada do documento como se fosse uma espécie de árvore com galhos, definindo métodos para que possam ser alterados estrutura, estilo e conteúdo do documento.

Usa-se o DOM principalmente quando se deseja atualizar um website ou construir uma interface de usuário avançada. Com ele, é possível mover itens dentro de uma página ou criar efeitos CSS – sem nem mesmo precisar recarregar o site.

Mas quem define como o DOM deve funcionar nos navegadores e motores web? Quem coloca ordem não apenas nele, mas em muitos outros padrões na internet, é a W3C, ou seja, Word Wide Web Consortium.

Trata-se de uma entidade internacional, criada em 1994 por Tim Berners-Lee, o pai da internet, que desenvolve padrões abertos, assegurando o crescimento da web.

Dentro da entidade existe um grupo chamado Web Platform Working Group, responsável pelo DOM. A W3C é responsável por diversos outros padrões, protocolos e linguagens, como:

• CSS;
• HTML;
• XML;
• SVJ.

Qual a origem do DOM?

A história do DOM se mistura com a da internet. A W3C precisou convencer a Netscape e a Microsoft, entre outras companhias, a desenvolverem uma linguagem de Script padronizada.

Foi daí que surgiu o ECMAScript, conhecido popularmente como JavaScript e publicado oficialmente em 1997. Com essa compatibilidade entre os navegadores, foi possível deixar a W3C trabalhar em um DOM padronizado, que ficou conhecido como DOM Nível 1, no início de 1998.

Claro que essa versão inicial deixou algumas brechas, precisando ser aperfeiçoado com o tempo. O Internet Explorer 5.0, por exemplo, que era o utilizado na época, tinha um suporte, mas era limitado.

Com isso, a “gambiarra” era grande nas aplicações web, visto que as funcionalidades eram restritas. Era preciso verificar o tempo todo qual o navegador e versão estava rodando o código para que ele pudesse funcionar.

Muitas pessoas, inclusive, utilizavam um pequeno banner no rodapé do site informando em qual navegador e até a resolução que aquele site rodava melhor. Assim, o usuário poderia optar por alterar o navegador para obter mais velocidade e qualidade.

Desde o seu lançamento foram criadas várias versões, onde foram acrescentadas muitas das funcionalidades que utilizamos hoje, como:

• GetElementByid;
• Manipulação de eventos;
• Serialização.

Desde 2014 vem sendo desenvolvido o DOM Nível 4.

Quais as vantagens dessa interface?

Com o DOM, o programador ganha infinitas possibilidades. Ele permite, por exemplo, que sejam criadas aplicações que alteram os dados da página, sem a necessidade de efetuar atualização.

É possível também criar aplicações possíveis de serem customizáveis pelo usuário e mudar o layout da página – também sem precisar da atualização. Ele literalmente permite arrastar, mover e excluir elementos facilmente. Exigindo do profissional, apenas, criatividade para inovar.

É possível utilizar apenas o DOM no desenvolvimento de sites?

Apesar de toda a especificação da W3C, o DOM sozinho não resolve todos os problemas de programação. Na verdade, ele possui algumas brechas, sendo disponibilizado para os programadores com margem para serem feitas algumas besteiras.

Por isso, são utilizados Libraries e Frameworks Front-End como uma camada extra para que o trabalho seja sempre melhor do ponto de vista de performance.

O JQuery, por exemplo, fez um ótimo trabalho nesse sentido, assim como o Vanilla JS, que nada mais é do que utilizar o JavaScript puro.

A ECMA International, associação que surgiu em 1961 e que se dedica à padronização dos sistemas de comunicação e informação, é responsável pelo ECMA Script, mais conhecido como JavaScript, e por qualquer outra linguagem autorizada a ser utilizada pelos navegadores.

Inclusive, a linguagem Dart, criada pelo Google, foi padronizada pela ECMA em 2014. Ou seja, já seria possível rodar Dart nos navegadores nativamente. Além dela, o C-Sharp também está nessa lista.

Quer saber mais sobre o assunto e ver outros exemplos do DOM? Acesse o canal Código Fonte TV e confira o vídeo que a galera publicou sobre esse tema.