DOM: Direto ao ponto

Márcio Lucas R Oliveira
2 min readOct 16, 2021

--

Na desenvolvimento web, é certo de que hora ou outra se tem o contato com o JavaScript, que é uma das linguagens mais populares do mundo. Mas já perguntou como que o JS consegue manipular o documento da página? Isso acontece através de uma interface com a sigla DOM.

Introdução

O DOM não é uma linguagem de programação, porém ela é de suma importância para que o JavaScript consiga manipular o documento que estão sendo exibidos na pagina web. Neste artigo será abordado o conceito e exemplos de aplicações dessa tecnologia que é tão importante para o desenvolvimento web.

Desenvolvimento

O que é DOM?

DOM é a sigla para Document Object Model, que, basicamente é uma interface para a manipulação de documentos XML e HTML, que, por sua vez, são linguagens de marcação. Essa interface serve como uma ponte entre as funções do JS com o browser, permitindo manipular o HTML de forma semântica, ou seja, o JavaScript utiliza do DOM para manipular o documento, basicamente é isso.

DOM nos browsers

Para que tudo funcione corretamente, existem certos padrões que devem ser obedecidos e implementados pelos browsers, como Google Chrome, Microsoft Edge, Firefox entre inúmeros outros e dentre esses padrões estão: DOM Standard (whatwg.org) e DOM Standard (whatwg.org).

Exemplo do padrão aplicado na prática

No exemplo abaixo, temos o método getElementsByTagName, deve ser implementado retornando uma lista com todos os elementos anotados no documento ao qual foi passado pelo parâmetro desta função.

Como pode observar acima, o exemplo está lançando um alert() com a variável paragraphs[0].nodeName. Repare que o atributo nodeName, este refere-se à um atributo do documento, e assim como o nodeName, podemos “pegar” todos os outros, como por exemplo os atributos: style, class, innerHtml (que é o conteúdo entre as tags <p>). A forma em que o DOM organiza os atributos e métodos relacionados ao documento é na forma de Objeto.

Conclusão

O DOM é de suma importância para o desenvolvimento web, sem ele o JS não conseguiria manipular o documento de uma forma semântica e padronizada.

--

--