Você sabe o que é DOM? Não aquele que as pessoas dizem que já nascemos com ele como, por exemplo, cantar ou atuar bem. Aqui, estamos falando do Document Object Model (DOM), ou Modelo de Documento por Objeto em tradução para o português.
Basicamente, o DOM é uma tecnologia integrada aos navegadores da internet que representa uma página web. Por exemplo, esse site você consegue visualizá-lo assim porque o DOM está por trás atuando na ordem e disposição dos elementos para que ele fique do jeito que os desenvolvedores imaginaram.
Interessante, não é?!
Neste artigo, vamos aprender sobre Document Object Model. O que é, quais são as suas propriedades e outras dúvidas sobre um dos conceitos mais importantes da programação.
O que é DOM?
O Modelo de Documento por Objeto é uma interface da programação que representa uma página da web e tem muita relação com o HTML e o XML dela. Isso porque o DOM é um documento que define um modelo de estrutura lógica totalmente editável da página web.
Normalmente, ela é utilizada por desenvolvedores front-end, visto que são eles os responsáveis pela interface de uma aplicação web.
Como surgiu o Modelo de Documento por Objeto?
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 da necessidade de uma linguagem de Script padronizada 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.
Para que serve o DOM?
O DOM é um modelo super indicado para quem trabalha com desenvolvimento web. Isso porque as aplicações web são cada vez mais requisitadas por empresas e profissionais no geral.
Diante dessa necessidade, o DOM define um padrão na internet que facilita na hora de criar, atualizar, adicionar ou remover elementos da estrutura de um site, por exemplo.
Relação do DOM com o JavaScript?
O DOM é um modelo aplicável para quase todas as linguagens de programação. Entretanto, ele é muito popular entre os desenvolvedores que utilizam o JavaScript como a principal linguagem de programação.
“Ah, mas por qual motivo?”, você deve estar se perguntando.
Bem, a resposta é simples.
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ê pegar um arquivo HTML puro e tentar fazer com que o JavaScript leia esse código, ele não consegue fazer. Porém, quando o HTML está em DOM o JavaScript consegue acessar, interpretar e modificar os objetos com facilidade.
Árvore DOM
O DOM possui uma estrutura lógica que representa uma página web completa. Essa estrutura é chamada de árvore DOM.
Nela, existem ramificações que são chamadas de nós. Cada nó representa um elemento diferente da página web que pode ser manipulado.
A árvore DOM possui quatro principais tipos de nós. São eles: documento, elemento, texto e atributos.
Para conferir a árvore DOM de qualquer site, basta você utilizar o comando:control + shift + i.
Mas, para que você consiga entender o que cada nó representa naquela página, abaixo falamos com detalhes sobre os 4 nós da árvore DOM:
Documento
Em primeiro lugar temos o documento que corresponde à raiz da árvore. Quando um documento HTML é carregado em qualquer navegador da web, tudo que está contido nele se transforma em um objeto do documento.
Ou seja, é no documento onde estão salvos todos os outros objetos, os “nós”, da árvore DOM.
Elemento
Logo em seguida, os elementos que representam as tags que estão em HTML ou XML. Por exemplo, um único elemento pode conter textos e outros atributos ligados a ele.
Texto
São todos os textos que vão entre os elementos. Por exemplo, para adicionar um objeto de texto em um código você deve escrevê-lo da seguinte forma: <p> O texto que você gostaria de adicionar </p>.
Atributos
Por fim, temos os atributos. Cada atributo representa um objeto que sempre pertencente a um elemento HTML
Para identificar qual é o tipo de nó que está sendo trabalhado em determinado ponto da árvore, basta utilizar o comando: nodeType.
<Leia também: Comandos HTML: quais são e como funcionam />
Níveis do Document Object Model
Além dos elementos da árvore DOM, o Document Object Model também é caracterizado pelos seus níveis. De forma resumida, cada nível representa uma nova versão do Modelo de Documento por Objeto que vai sendo aprimorado de tempos em tempos.
No momento, o DOM está no nível 3 com o nível 4 já em fase de desenvolvimento.
Nível 0
O nível 0 fornece um conjunto de interfaces de baixo nível.
Nível 1
O nível 1 pode ser retratado em duas partes: CORE e HTML.
- CORE: dispõe de interfaces de baixo nível que podem ser utilizadas para expressar qualquer documento estruturado;
- HTML: dispõe de interfaces de alto nível que podem ser utilizadas para expressar qualquer documento HTML.
Nível 2
O nível 2 é formado por seis especificações. São elas: CORE2, VIEWS, EVENTS, STYLE, TRAVERSAL e RANGE.
- CORE2: estende a funcionalidade do CORE estabelecida pelo DOM nível 1;
- VIEWS: libera os programas para que eles consigam manipular o conteúdo dos documentos de maneira dinâmica;
- EVENTS: são scripts executados pelo computador quando o usuário reage a uma página da web;
- STYLE: libera os programas para que eles consigam manipular o conteúdo das folhas de estilo de maneira dinâmica;
- TRAVERSAL: libera os programas para que eles consigam percorrer o documento de maneira dinâmica;
- RANGE: libera os programas para que eles consigam identificar o intervalo de um conteúdo no documento de maneira dinâmica;
Nível 3
O nível 3 possui cinco especificações diferentes. São elas: CORE3, LOAD and SAVE, VALIDATION, EVENTS e XPATH.
- CORE3: estende a funcionalidade do CORE estabelecida pelo DOM nível 2;
- LOAD and SAVE: libera os programas para carregar de maneira dinâmica o conteúdo do documento XML no documento DOM e também para salvar o documento DOM em um documento XML por serialização;
- VALIDATION: libera os programas para que eles atualizem o conteúdo e a estrutura do documento de maneira dinâmica, mas sem perder a validade do documento;
- EVENTS: estende a funcionalidade dos events estabelecidos pelo DOM nível 2;
- XPATH: linguagem de caminho que pode ser utilizada para liberar o acesso à árvore DOM.
Vantagens do uso do DOM
O Document Object Model é um recurso muito positivo para quem trabalha com ele no dia a dia. Por ser totalmente manipulável, ele oferece um mundo de possibilidades para o desenvolvedor que está trabalhando no projeto.
Em primeiro lugar é a possibilidade de criar aplicações que permitem alteração dos dados da página sem a necessidade de atualização da mesma.
Além disso, o DOM também permite a construção de páginas que podem ser customizadas pelo próprio usuário.
Por fim, é possível fazer alterações no layout da página também sem precisar de atualizações na página.
Como aprender a usar o DOM?
Para aprender como utilizar o Document Object Model no seu trabalho, a primeira coisa que você precisa é ter conhecimento suficiente sobre a carreira de um desenvolvedor front-end.
Caso você já tenha alguma formação superior, seja na área de TI ou não, uma dica é o MBA em Desenvolvimento Front-End da XP Educação. Com ele, você se torna um especialista em front-end em apenas 7 meses.
Logo em seguida, uma outra coisa necessária é se dedicar ainda mais aos estudos para aprender como usar JavaScript. No decorrer dos estudos de JavaScript, você vai aprender como o DOM pode contribuir para os seus projetos.
Mas, para aprender a utilizar o DOM não basta a teoria. Por isso, pratique bastante e não tenha medo de arriscar! Lembre-se que o DOM é um recurso de muitas possibilidades que pode contribuir bastante na execução do seu trabalho.
