Entenda o que é DOM no JavaScript, como o navegador organiza páginas web em uma estrutura de objetos e de que forma essa tecnologia permite criar interfaces interativas.
Em resumo:
Veja mais informações a seguir!
Quando um clique em um botão faz um menu aparecer, um formulário valida um campo antes do envio ou um contador muda de número sem recarregar a página, há um mecanismo comum por trás dessas ações: o DOM (Document Object Model).
O DOM é a forma como o navegador representa um documento HTML depois de interpretá-lo. Essa estrutura pode ser acessada e modificada pelo JavaScript, permitindo criar páginas mais interativas e responsivas às ações do usuário.
Entender o DOM é um passo importante para quem está aprendendo JavaScript, principalmente para quem deseja transformar páginas estáticas em interfaces capazes de reagir a cliques, dados e outros eventos.
Leia mais: Como trabalhar com DevOps: o que faz o profissional e como começar
+ Aprender HTML e CSS ainda vale a pena em 2026?
O DOM é uma interface de programação que representa documentos HTML como uma árvore hierárquica de nós e objetos.
Na prática, cada elemento da página, atributo e trecho de texto passa a fazer parte dessa estrutura. Um título, por exemplo, é representado como um elemento; seus atributos, como id ou class, também podem ser acessados; e o texto contido nele aparece como um nó dentro da árvore.
Quando o navegador recebe um arquivo HTML, ele interpreta esse código e constrói uma representação em memória. É essa estrutura que o JavaScript manipula durante a execução da página.
Por isso, é importante diferenciar HTML e DOM. O HTML é o código usado para estruturar o documento.
O DOM é a representação desse documento criada pelo navegador e que pode sofrer alterações enquanto a página está sendo utilizada.
O DOM também não foi criado exclusivamente para o JavaScript. Trata-se de uma interface concebida para ser independente de linguagem e plataforma.
Nos navegadores atuais, porém, o JavaScript é a principal linguagem utilizada para interagir com essa estrutura.
+ Faça a Trilha de Tecnologia para Engenheiro de Software na Allevo Tech
O JavaScript permite adicionar comportamentos dinâmicos às páginas web. Para isso, a linguagem pode acessar o DOM e alterar diferentes partes do documento.
Entre as possibilidades estão:
Essa relação é fundamental para aplicações web que precisam responder às ações do usuário em tempo real.
Um botão pode, por exemplo, executar uma função JavaScript ao ser clicado.
Essa função acessa um elemento do DOM e altera seu conteúdo ou sua aparência. O navegador atualiza a interface sem precisar carregar novamente todo o documento.
+ Transição de carreira para tecnologia após os 30: guia completo para começar
O acesso ao DOM começa pelo objeto document, que representa o documento carregado pelo navegador.
A partir dele, o JavaScript pode localizar elementos específicos da página. Existem diferentes métodos de seleção, e a escolha depende do que o código precisa encontrar.
Um identificador pode ser usado para localizar um elemento específico.
Por exemplo, um elemento com id="titulo" pode ser encontrado pelo JavaScript por meio de seu identificador.
As classes permitem selecionar elementos que compartilham uma determinada classificação.
Esse recurso é útil quando vários elementos possuem a mesma classe e precisam ser encontrados ou manipulados.
Também é possível usar seletores semelhantes aos empregados no CSS. Essa alternativa permite combinar critérios de elemento, classe, identificador e atributos para realizar seleções mais específicas.
A escolha do método depende da estrutura da página e da quantidade de elementos que precisam ser encontrados.
Depois que um elemento é localizado, o JavaScript pode modificar seu conteúdo e seus atributos.
Um parágrafo pode ter seu texto alterado depois de uma ação do usuário. Da mesma forma, o atributo src de uma imagem pode ser substituído para exibir outro arquivo.
Essas alterações acontecem na representação do documento mantida pelo navegador. O resultado é refletido na interface sem que seja necessário recarregar a página.
Essa possibilidade permite que informações inicialmente estáticas sejam atualizadas durante a navegação.
+ O que é TypeScript? Entenda por que a linguagem ganhou espaço
O JavaScript também pode modificar a apresentação de elementos por meio do DOM.
A propriedade style permite acessar e alterar propriedades de CSS aplicadas diretamente ao elemento. Com isso, um script pode, por exemplo:
Esse tipo de manipulação é comum em interfaces que precisam apresentar diferentes estados conforme as ações realizadas pelo usuário.
+ Vale a pena aprender SQL em 2026? Veja oportunidades e mercado
Outra função importante do DOM é permitir que a página reaja a eventos.
Um evento pode ser disparado por diferentes ações, como:
O JavaScript pode associar uma função a esses eventos. Quando a ação acontece, a função é executada e pode modificar elementos da página.
É esse mecanismo que permite, por exemplo, atualizar um contador a cada clique ou verificar os dados de um formulário antes de seu envio.
Sim. Essa é uma das características mais importantes da manipulação do DOM.
Como o navegador mantém a representação do documento em memória, o JavaScript pode modificar elementos diretamente nessa estrutura.
O usuário vê a atualização na tela sem precisar carregar novamente o documento HTML.
Isso está por trás de diversas interações presentes em sites e aplicações web, como:
É importante observar que isso não significa que toda aplicação web funcione sem comunicação com um servidor.
O JavaScript pode modificar o DOM localmente, mas também pode buscar ou enviar dados para servidores quando a aplicação precisa dessas informações.
O código-fonte HTML é o documento original recebido pelo navegador. Já o DOM representa o estado atual desse documento no navegador.
Essa diferença fica evidente quando um script modifica a página.
Imagine que o HTML carregue inicialmente um parágrafo com determinado texto. Depois, um código JavaScript altera esse conteúdo. O arquivo HTML original não é automaticamente reescrito, mas o DOM passa a representar o novo conteúdo exibido na página.
Por isso, o DOM pode apresentar diferenças em relação ao código-fonte original.
+ Estude com a Trilha de Tecnologia para Engenheiro de Software na Allevo Tech
Os navegadores modernos oferecem ferramentas de desenvolvedor que permitem visualizar e analisar o DOM.
No Google Chrome, no Microsoft Edge e em outros navegadores baseados em Chromium, por exemplo, a área de inspeção permite visualizar a estrutura dos elementos, seus atributos e estilos.
Essas ferramentas também ajudam a acompanhar alterações feitas por JavaScript durante a utilização da página.
Para quem está aprendendo desenvolvimento web, inspecionar uma página é uma maneira prática de observar como o HTML é transformado em uma árvore de elementos e como essa estrutura muda durante a interação.
O DOM é a representação em árvore de um documento HTML, construída pelo navegador. O JavaScript utiliza essa estrutura para ler e modificar conteúdo, atributos, estilos e elementos da página.
O HTML é o código-fonte do documento, enquanto o DOM é a estrutura de objetos criada pelo navegador a partir desse código. O DOM pode ser modificado durante a execução da página.
O acesso começa pelo objeto document. A partir dele, o JavaScript utiliza métodos e seletores para localizar elementos específicos e manipulá-los.
document?O document representa o documento carregado no navegador e funciona como um dos principais pontos de entrada para acessar a estrutura do DOM.
Sim. O JavaScript pode modificar elementos, textos, atributos e estilos diretamente no DOM. As alterações podem aparecer na tela sem que o documento seja recarregado.
Não. O DOM foi projetado como uma interface independente de linguagem e plataforma. Porém, nos navegadores atuais, JavaScript é a principal linguagem utilizada para manipular o DOM.
É possível utilizar as ferramentas de desenvolvedor do navegador. Elas permitem visualizar os elementos da página, seus atributos, estilos e alterações realizadas por scripts.
Não. O código-fonte corresponde ao HTML original recebido pelo navegador. O DOM representa o documento em seu estado atual, podendo conter alterações realizadas por JavaScript durante a execução.
Se você quer ingressar ou crescer no mercado de tecnologia, a Allevo Tech oferece formações práticas em áreas de alta demanda, como Engenharia de Software e Ciência de Dados.
As trilhas são estruturadas para desenvolver competências técnicas e preparar você para os desafios do mercado de trabalho.
Clique no botão abaixo e conheça as formações da Allevo Tech que podem impulsionar a sua trajetória profissional.
Evento reúne escritores de diferentes países; conheça obras dos convidados internacionais que podem ser usadas para ampliar o vocabulário e praticar a leitura em outros idiomas
Entenda qual é a linguagem de programação mais usada por profissionais de tecnologia e descubra qual aprender
Entenda o que é astronomia, o que essa ciência estuda, seus principais ramos, sua história e a diferença entre astronomia e astrologia.