O que é DOM? Descubra o Coração do Desenvolvimento Web

Você já se perguntou como um navegador representa uma página na web? Bem, um documento é criado pelos desenvolvedores, cheio de códigos e elementos.

Mas como isso se reflete na página de um site que visitamos? A resposta é simples: através do DOM.

Essa tecnologia já está integrada nos navegadores de internet, e é ela que ordena os elementos de uma página para que o conteúdo possa ser acessado e visualizado por todos os visitantes.

Neste artigo, vamos entender o que é a interface DOM e para o que ela é utilizada.

Baixar Glossário Completo de Desenvolvimento Web

O Que é DOM

A sigla DOM significa Document Object Model, que em português significa Modelo de Documento por Objetos. Trata-se de uma interface de programação que os navegadores utilizam para representar páginas na web.

O DOM oferece um modelo de representação e interação do documento HTML ou XML. Esse modelo se estrutura em formato de árvore, com vários galhos que indicam diferentes elementos da página. Quando esse modelo é alterado através da linguagem de script, se altera a página da web — seja sua estrutura, estilo ou elementos. 

Desse modo, o DOM possibilita a manipulação e modificação de elementos de um documento web ao conectar as linguagens de programação à página em questão. Ele é neutro em termos de linguagem, então pode ser executado com qualquer uma delas, ainda que seja mais popular utilizá-lo com o JavaScript.

Como toda página na web é um documento, os navegadores precisam fazer a leitura e a interpretação desses documentos para refletir seus conteúdos na tela do seu dispositivo num formato padrão. O DOM é a interface que representa a forma ou estrutura com que o documento será lido e exibido por todos os navegadores das redes.

É assim que o DOM define um padrão na internet. Essa interface permite que programas e scripts de sites sejam acessados de forma dinâmica para fazer adições, remoções ou atualizações do conteúdo, estrutura e estilo de um documento. 

O DOM define a estrutura lógica dos documentos em forma de árvore, a qual guia o navegador na representação e manipulação dos componentes da página. Assim sendo, abaixo indicamos como a “árvore DOM” é normalmente estruturada:

Qual a Relação Entre DOM e JavaScript?

Na maioria dos casos, a interface DOM está relacionada com JavaScript. Mas que relação é essa?

Vale começar pelo fato de que o JavaScript é uma linguagem de programação, ou seja, ela é utilizada para criar o script do site. Já o DOM, como vimos, é um modelo de representação por objetos.

Isto é, ele define a estrutura em que o documento construído através do JavaScript será lido pelo navegador. 

Sem o DOM, a linguagem de programação — que vale lembrar, pode ser qualquer uma, não apenas JavaScript — não teria um modelo para representar seus objetos. Afinal, ela não teria uma noção da página web e de seus componentes.

Assim, enquanto o DOM representa e estrutura e os componentes da página, o JavaScript acessa e manipula esses conteúdos. 

Quais os Usos e Vantagens do DOM

Uma das principais vantagens do DOM é possibilitar a criação de aplicações que alteram os dados de um site sem que seja necessário fazer uma atualização desta página.

Ainda é utilizado para criação de interfaces de usuário avançadas. Assim, o DOM também permite a construção de páginas que podem ser customizadas pelo próprio usuário. 

Com o modelo de documento por objeto, é possível modificar conteúdos e elementos de páginas, além de navegar por sua estrutura. Desse modo, qualquer componente de um documento HTML ou XML pode ser acessado e modificado através do DOM. E é mais fácil trabalhar com ele do que diretamente com os códigos HTML, por exemplo.

O DOM oferece a funcionalidade de mover os itens de uma página de forma simples e rápida, como se estivesse “arrastando” eles, por isso facilita os processos de desenvolvimento dos programadores.

Além de facilitar, ele também expande o universo de possibilidades inovadoras dos desenvolvedores web, que podem criar até mesmo efeitos CSS sem precisar recarregar a página. Como o DOM pode ser manipulado de diversas formas, seus usos são extensos e suas vantagens significativas. Basta usar e abusar da criatividade!

Como Usar o DOM

Não há necessidade de instalar um programa, ou realizar tarefas complexas para usar o DOM. Do lado dos navegadores, ele já vem incluído. E do lado do documento, ele é acessado diretamente através dos scripts (por exemplo, direto no JavaScript).

Ou seja, quando você cria um script, já pode começar a usar a API DOM. Assim vai poder manipular o próprio documento e seus componentes, que serão refletidos como elementos da página web.

Quando precisar atualizar algum componente da página, pode fazer utilizando o DOM. Assim, você não terá a necessidade de trabalhar direto com os códigos HTML ou CSS, pois o modelo de documento por objetos armazena a interpretação deste código no formato de árvore.

O desenvolvedor, portanto, pode movimentar e manipular os elementos de forma simples pelo documento, sem nem mesmo precisar atualizar ou recarregar a página.

Tipos de Dados Fundamentais

Como já vimos, toda página da web pode ser representada em estrutura de árvore. O topo dessa árvore é estruturado pelo modelo de documento por objetos e terá o documento e elemento raiz HTML.

A partir dele, se ramificam os “elementos-filhos”, como Head e Body. Estes, por sua vez, também podem ter elementos-filhos, e todos os elementos podem possuir atributos.

Agora vamos conferir alguns dos dados e objetos fundamentais do modelo de documento por objetos:

• Document: é o objeto raiz, representa o próprio documento HTML. 
• Node: é um nó, e representa uma nomenclatura mesmo:  todo objeto em um documento é algum tipo de nó.
• Element: o nó do tipo elemento representa as tags do documento HTML, isto é, o objeto de elemento pode ter “nós-filhos”, como de texto e de atributos.  
• Attribute: este tipo de objeto representa um atributo contido num elemento HTML.
• Text: é o texto, ele fica localizado entre os elementos e representa o conteúdo das tags, ou elementos. Por exemplo: <p>aqui está um texto</p>.

Todos estes dados da árvore DOM podem ser adicionados, removidos ou alterados pelo JavaScript. O DOM conta com diversos métodos que podem ser utilizados para fazer a ligação entre esses objetos.

Dois exemplos de métodos são o createElement(), que cria um novo elemento HTML, e o setAttribute(), utilizado para configurar novos atributos para os elementos HTML. 

Conclusão

O DOM cumpre o objetivo de padronizar a representação de um documento em uma página web. Ele faz isso oferecendo uma estrutura em árvore, que organiza os elementos. A forma com que faz essa representação de páginas permite que o documento, seu estilo e conteúdo, sejam facilmente manipulados pelas linguagens de programação. 

Os principais usos dessa interface de programação estão na criação de páginas inteligentes e de aplicações dinâmicas. E suas vantagens estão em não precisar atualizar e recarregar a página da web inteira para fazer alguma modificação em seu conteúdo ou estilo.

Apesar de ser um tópico complexo, você não precisa entender todos os detalhes do processo de funcionamento do DOM para poder utilizá-lo e aproveitar seus benefícios. Lembrando que modelo independe da linguagem de programação utilizada. Escolha a sua e aproveite as possibilidades de inovação que o Modelo de Documento por Objetos oferece!