O que é DOM? O Guia Completo Sobre Document Object Model

Você sabe o que é DOM? Se você utiliza o JavaScript, HTML, CSS entre outras ferramentas de programação certamente vai se interessar pelo assunto.

Document Object Model ou mais conhecido como DOM, significa Modelo de Documento por Objetos, e é muito utilizado por programadores dentro dos navegadores da web.

Ele basicamente padroniza as interfaces da web sem a necessidade de utilizar upgrades ou atualizar a página. Então, quer saber mais sobre o que é DOM?

De onde surgiu?

O DOM surgiu em 1997 em conjunto com a história da internet para padronizar a linguagem de Script. Desenvolvida por um grupo de empresas como o Google e a Microsoft.

Então, diante dessa necessidade, surgiu o popularmente conhecido como JavaScript. Esse que possibilitou os navegadores serem mais compatíveis e trabalharem em um DOM padronizado, conhecido na época como DOM nível 1.

No entanto, a sua primeira versão precisou ser aprimorada e aperfeiçoada com tempo, para minimizar erros de formatação.

Assim, desde então, foram criadas várias versões, e surgiu o DOM nível 2 e o DOM nível 3, onde acrescentou-se muitas funcionalidades, essas que utilizamos atualmente. Mas, mesmo aprimorado, desde 2014 se iniciou a criação do DOM nível 4.

Dentre as novas funcionalidades estão:

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

Desde então, se usou as estruturas pré-estabelecidas e já são anos facilitando a vida dos desenvolvedores até hoje.

Veja também: Como acessar os melhores cursos gratuitos de programação com certificado.

O que é DOM ou Document Object Model?

Vamos dar início a nossa explicação. Em primeiro lugar, você deve saber que ele é uma interface de programação utilizado na formatação de documentos HTML, XML entre outros documentos para sites, por exemplo.

Ele está presente no navegador da web como se fosse a estrutura de uma árvore conhecida como árvore DOM. Dessa forma, é ele quem define os métodos de acesso à árvore, ou seja, vai guiando o usuário no conteúdo pelos nós.

Assim, portanto através das ramificações ou nós, ele permite que possa ser alterado o estilo, conteúdo e estrutura de algum documento que pode ser exibido no navegador ou na HTML do documento.

Entretanto, é ele que conecta páginas da web, scripts ou linguagens de programação.

O DOM, portanto, é uma representação orientada a objetos das páginas da web, que pode ser modificada com uma linguagem de script como JavaScript.

Como é utilizado?

Já sabemos que o DOM é utilizado para mudar as estruturas de uma página da web com a programação. Mas como ele é utilizado?

Com o Document Object Model você tem infinitas possibilidades para criar aplicações que atualizam os dados da página sem que seja necessária uma atualização da mesma.

Você também pode criar aplicações customizáveis através dele ou mudar o layout de uma página da web sem precisar atualizá-la.

Além de:

• Mover;
• Arrastar;
• Criar efeitos CSS;
• E excluir elementos.

São infinitas as possibilidades, e milhares de coisas que você pode fazer dominando o Document Object Model, para isso basta você ter criatividade para criar e desenvolver os métodos de programação.

Então, basicamente se utiliza o DOM através da leitura do documento HTML. Confira a seguir a estrutura e suas marcações.

Representação do DOM

O Dom tem várias ramificações em sua estrutura, mas vamos apresentar os 4 pontos mais importantes para você entender melhor as demais. Veja.

• 1 ponto: Document
  (Documento) Esse elemento cuida dos documentos HTML.

• 2 ponto: Elements
  (Elementos) Os elementos são as tags em arquivo XML ou HTML que se transformam em elementos DOM na estrutura da árvore.

• 3 ponto: Texts
  (Texto) Este é todo o conteúdo das tags, ou seja, o texto que vai junto aos elementos.

• 4 ponto: Attributes
  (Atributos) Essa é a junção de todos os tributos para um fim específico como por exemplo: o attribute class=”hero” está para a tag <p>.

Sendo assim, para você identificar qual é o tipo de nó que está sendo trabalhado em determinado ponto da árvore, basta utilizar o comando: nodeType. 

E para conferir a árvore DOM de um site, basta você utilizar o comando: control + shift + i.

Veja também: Como acessar os melhores cursos gratuitos de programação com certificado.

Como utilizar o DOM no desenvolvimento de sites?

Apesar de infinitas possibilidades de utiliza-lo, ele não funciona sozinho nos elementos de programação. Portanto, ele deixa margens para possíveis erros a serem cometidos pelos programadores.

Por isso, é utilizado uma camada extra de segurança para que o trabalho de programação se desenvolva na sua melhor performance.

Contudo, o modelo mais aplicável para todas as formatações e linguagens do DOM é o JavaScript.

Isso porque o JavaScript serve para adicionar determinados comportamento as páginas da web, e o DOM, para adicionar o modelo de representação HTML em formas de objeto.

Portanto, ao trabalhar um arquivo em HTML sem uso do DOM e tentar fazer com que o JavaScript leia esse código, você não terá resultados positivos, porque o documento não será reconhecido.

Porém, quando o documento HTML está em DOM o JavaScript consegue acessar e modificar os objetos com facilidade reconhecendo a programação imediatamente.

Confira o vídeo do canal: Código Fonte TV

Clique no botão abaixo para ter acesso a um cupom de desconto exclusivo para estudar na Alura (Maior escola de programação do Brasil) e ter acesso a mais de 1400 cursos completos sobre programação e tecnologia:

ACESSAR CURSOS COM CERTIFICADO

Conclusão sobre o que é DOM

O DOM como já mencionamos, é muito flexível e um recurso muito positivo para criar aplicações que permitem atualização de dados em sites sem a atualização da página.

Além disso, ele permite realizar alterações no layout da página, sem a necessidade de atualizações.

Portanto, podemos dizer que o Document Object Model contribui muito com a programação de sites na web desde a sua criação padrão.

Dessa forma, agrega mais facilidade na rotina dos programadores e contribui para um grande salto no desenvolvimento de documentos HTML, XML e SVG.

Por fim, para você utiliza-lo no seu trabalho e ter sucesso, você precisa ter conhecimento suficiente em TI ou desenvolvimento Front-End e também em JavaScript e sempre aperfeiçoar as técnicas e códigos.

O segredo para alcançar o topo da sua carreira na área da tecnologia está a um clique de distância. Toque no botão abaixo agora mesmo e mergulhe em mais de 1400 cursos completos, todos com certificados de peso. 

ACESSAR CURSOS COM CERTIFICADO

Enfim, espero que este conteúdo tenha te ajudado e que você tenha muito sucesso em sua jornada.

Um forte abraço!

Tags: dom javascript | javascript | o que é dom