Resumo: O que é DOM?

A tradução do acrônimo inglês DOM (Document Object Model) significa Modelo de Documento do Objeto; trata-se da modelagem de todo o HTML.

A partir da sua quinta versão, o HTML até então estático, além das melhorias na estrutura e separação da semântica da estilização, ganhou interatividade com a criação da linguagem de programação JavaScript, e é nesse momento que surge o DOM.

• Estrutura

O DOM é como uma árvore genealógica, porém, de forma invertida. O elemento que antecede o document é o window, que nada mais é que a janela do navegador. Em sua estrutura, o document está no topo como objeto global e tem como elemento raiz a tag html e todas as outras descendem dela através das suas ramificações (branchs).

• Onde ele está inserido?

O DOM faz parte do HTML ou do JavaScript? Na verdade, de nenhum, ele é gerado pelo browser. Ao carregar a página, o navegador cria o documento, a interface, e o Javascript usa o DOM para se conectar ao HTML. A comunicação entre eles deve ser feita ao inserir a tag script no arquivo HTML. É possível realizar de duas formas: escrevendo o código em JavaScript dentro da própria tag script, ou inserindo o caminho relativo do arquivo externo. Também como boa prática, a segunda opção é a mais recomendada para a separação de responsabilidades e melhor manutenção do código.

• Maneiras de manipulá-lo

No DevTools do navegador, na aba Console, ao digitar console.dir (diretório) e passar o parâmetro document, é exibida uma lista com propriedades e funcionalidades do documento.

Há várias maneiras de manipulação, no JavaScript utilizamos o objeto document e através do ponto acessamos as propriedades e métodos, possibilitando selecionar, alterar, deletar, e criar elementos aos componentes do website, de acordo com a padronização criada pela W3Schools.

Essas são as ações temos alguns métodos:

• document.getElementById();
• document.getElementsByClass();
• document.getElementsByTagName();
• document.querySelector();
• document.querySelectorAll();
• document.createElement();
• element.addEventListener();

Lembra que a janela do navegador é representada pelo objeto window? O window pode ser omitido, ele não é obrigatório no JS, assim como acontece com o ponto-e-vírgula ( ; ) ao final de um comando.

<script>
    window.alert("Olá, Mundo!")
    window.document.write("Olá, Mundo!")
</script>

<script>
    alert("Olá, Mundo!")
    document.write("Olá, Mundo!")
</script>