Você já se perguntou como que o HTML, CSS e o JavaScript interagem no navegador? Como isso funciona exatamente e por que ouvimos tanto falar sobre DOM? É isso que vamos ver nesse artigo.
Primeiro vamos começar entendo o que é a DOM. DOM é um acronimo para Document Object Model que é um documento gerado pelo navegador ao carregar o HTML e o CSS. É através dessa interface que nós conseguimos manipular os elementos que estão presentes no HTML. Já o BOM é uma interface que permite manipular os elementos que fazem parte do navegador, como a scrollbar, o tamanho da janela (muito útil quando pensamos em responsividade).
Essas duas interfaces são geradas quando o navegador carrega os arquivos recebidos do servidor e permitem que a nossa aplicação JavaScript manipule o que será exibido. Cards dinâmicos, um pop na tela e etc.
E a virtual DOM ?
A virtual DOM é uma camada intermediaria entre a aplicação e a DOM utilizada por frameworks mais recentes como React e Vue. E por que criar uma virtual DOM?
Ela serve para otimizar o nosso site e fazer com que as alterações na DOM só ocorram quando necessário. Ou seja, vamos supor que nós temos uma lista no nosso site que é atualizado de acordo com o input do usuário. Em aplicações que não utilizam essa interface a DOM é atualizada toda vez que um input for feito. Já em aplicações que utilizam essa interface, antes de atualizar a DOM diretamente, o framework faz uma copia dos elementos em memória e depois compara para verificar se é necessário atualizar a DOM.