24 de Outubro de 2023

4 minutos de leitura

No mundo do desenvolvimento web, uma peça fundamental é o DOM. Ele desempenha um papel crucial na forma como as páginas da web são criadas e interagem com os usuários. Para que você compreenda o funcionamento do DOM, vamos abordar os seguintes tópicos neste artigo:

  • O que é o DOM?
  • Como o DOM surgiu?
  • Qual é a relação entre o DOM e o JavaScript?
  • O DOM é como uma árvore?
  • Propriedades do DOM
  • Conclusão sobre o DOM

O que é o DOM?

O DOM (Document Object Model em inglês, ou Modelo de Documento por Objetos em português) é a representação de dados dos objetos que compõem a estrutura e o conteúdo de um documento na Web.

É uma interface que permite que programas de computador acessem e atualizem o conteúdo, a estrutura e o estilo de um documento, como um arquivo HTML.

Imagem explicativa sobre como funciona o DOM.

O DOM permite que desenvolvedores web interajam com os elementos e componentes de seus sites usando linguagens de programação como o JavaScript.

Como o DOM surgiu?

O DOM foi criado pelo W3C, um consórcio que regulamenta os padrões da web formado por grandes empresas como a Microsoft, Google e Apple. Ele surgiu a partir da necessidade de uma linguagem de script que fosse padrão para todos os desenvolvedores.

Dessa forma, surgiu o primeiro DOM em 1997. Desde então, são anos facilitando a vida de desenvolvedores por meio da sua estrutura pré-estabelecida. 

Qual é a relação entre o DOM e o JavaScript?

O DOM é um modelo aplicável a praticamente todas as linguagens de programação, no entanto, ele é especialmente popular entre os desenvolvedores que utilizam o JavaScript como sua linguagem principal.

 “Mas por qual fundamento?”, você deve estar se perguntando. Ótimo, a resposta é entendível.

O JavaScript é uma linguagem que serve para adicionar comportamentos às páginas web, enquanto o DOM é um modelo de representação do HTML em formato de objeto utilizado para estruturar as páginas.

Se você utilizar um arquivo HTML puro e tentar fazer com que o JavaScript leia esse código, perceberá que ele não conseguirá realizar essa tarefa.Porém, quando o HTML está em DOM o JavaScript consegue acessar, interpretar e modificar os objetos com facilidade. 

💡Neste link, você consegue entender um pouco mais sobre o funcionamento do Javascript 

O DOM é como uma árvore? 

Sim, o DOM é parecido com uma árvore, mas invertida. 

O DOM cria uma representação de todos os elementos de uma página da web. Essa representação se parece com uma árvore invertida com nodos e conexões representando sua hierarquia no documento.

O primeiro objeto que encontramos na hierarquia de cima para baixo é o objeto principal do documento. O HTML é o elemento raiz que contém todos os outros objetos da página da web.

Abaixo desse primeiro objeto, surgem ramificações que se assemelham aos galhos de uma árvore. Confira na imagem a seguir como essa estrutura funciona:

A figura exibe um fluxograma que ilustra a estrutura do DOM em forma de uma árvore. No topo, encontra-se o elemento raiz, representando o HTML. A partir dele, surgem dois ramos principais: "head" e "body". O ramo "head" contém o elemento "title", e este, por sua vez, contém o texto "exemplo". No ramo "body", há dois elementos: "h1", que contém um subelemento relacionado ao JavaScript, e "p", que possui o texto "Oi mundo" abaixo dele. Ao lado da imagem, é apresentado um código de programação relacionado a essa estrutura.
O DOM é semelhante a uma árvore.

Observações:

  • Cada objeto tem um lugar específico no DOM. 
  • A hierarquia DOM segue a hierarquia dos objetos no documento.

Nesse exemplo, podemos renderizar o DOM que corresponde a esse arquivo HTML.

DICA: um cabeçalho, parágrafo, imagem ou link são exemplos de elementos HTML que são renderizados como objetos no DOM.

Propriedades do DOM

Um dos principais responsáveis por esse conjunto de funcionalidades é o objeto document, que concede ao código JavaScript acesso completo à árvore DOM do navegador da web. Portanto, qualquer elemento criado pelo navegador Web no modelo da página Web poderá ser acessado por meio do objeto Javascript document.

Por intermédio das propriedades, podemos criar experiências de usuário interativas. Podemos adicionar animações, alterar as informações que o usuário vê e reagir a eventos que ocorrem quando o usuário interage com a página da web.

Com o objeto document, é possível ter acesso a um grande número de propriedades. Segue abaixo algumas propriedades que podem ser utilizadas com o objeto document:

Tabela com as propriedades do DOM e suas funções

Conclusão sobre o DOM

O DOM é um utilitário essencial dos navegadores para trabalhar com páginas da web. Graças à sua padronização, trabalhar com o DOM ficou mais fácil nos últimos anos, já que todos os navegadores atualmente respondem a uma API muito consistente em termos de funcionalidade dos elementos da página.

Trabalhar diretamente com o DOM é perfeitamente possível com a linguagem Javascript, embora muitos desenvolvedores também prefiram usar bibliotecas que simplificam a tarefa, como o jQuery. 

Bibliotecas ainda mais avançadas estão em alta ultimamente, como React ou Lit, que nos permitem manipular a página por meio de componentes encapsulados, o que nos poupa da necessidade de trabalhar diretamente com o DOM e, em vez disso, nos permite trabalhar com sistemas de templates e links de dados.

AUTORA DO ARTIGO:

Isbeli Ramirez

Isbeli é formada em Análise e Desenvolvimento de Sistemas e aprofundou seus estudos em front-end e Python na Toti Diversidade. Ela é venezuelana, mãe, esposa e apaixonada por tecnologia, tendo interesse especial em hardware e software.