Document Object Model (DOM), que é basicamente um jargão de desenvolvimento web para “como as páginas web funcionam nos bastidores”, é algo que todo desenvolvedor web deveria ter em mente seu kit de ferramentas. É como o molho secreto que alimenta o desenvolvimento web moderno.

Mas por que DOM? Recentemente, me deparei com um vídeo sobre como os navegadores funcionam e depois me debrucei sobre alguns artigos e este é o meu entendimento do “por quê?”

Todo navegador funciona com um **mecanismo de navegador**, que é um componente central de um navegador responsável por renderizar o conteúdo da web, incluindo HTML, CSS e JavaScript, em uma representação visual com a qual os usuários podem interagir.

---

O “Documento”: Este termo se refere a uma página da web carregada em um navegador da web. Representa a hierarquia estruturada do conteúdo da página web, incluindo elementos como títulos, parágrafos, imagens, links, formulários e muito mais. O documento DOM é essencialmente uma representação na memória da estrutura da página web, criada pelo mecanismo de renderização do navegador quando a página é carregada.

Agora vem a parte interessante de como o mecanismo do navegador transforma o documento em uma árvore de nós, que conhecemos como DOM para pintura.

Bem, depois de baixar o documento, ele é convertido em dados brutos, sim, 0s e 1s. E esses bytes brutos de dados são convertidos em caracteres. Essa conversão é feita com base na codificação de caracteres do arquivo HTML.

Esses caracteres são analisados ​​​​em algo chamado tokens. Assim como qualquer outro token de linguagem de programação, o token pode ser definido como o menor elemento individual dessa linguagem de programação que seja significativo. Aqui, o token se refere às tags em HTML, ou seja, body, h1, h2, p, intervalo etc.

Assim que a tokenização for concluída, a próxima etapa é estruturar esses tokens.

É aqui que os objetos entram em jogo.Um objeto é criado a partir desses tokens, esse objeto contém muitas informações sobre cada entidade, incluindo início e fim da tag, atributos, dados/valor e muito mais.

Agora, temos um

“Documento” e “Objetos”, mas ainda não está estruturado porque não há relacionamento entre esses objetos. Após a tokenização, esses tokens são transformados em nós. Cada nó terá um relacionamento com outro, apresentando nós pai, filho e irmão. Esses relacionamentos nó a nó formam uma estrutura semelhante a uma árvore familiar. Este processo é conhecido como modelagem da árvore de objetos. Agora um modelo de árvore de nós está pronto a partir do documento HTML e pronto para ser pintado.

Para recapitular, o nome

“Modelo de Objeto de Documento” reflete seu propósito e função. Serve como um modelo estruturado para o conteúdo de uma página web, representado como uma coleção de objetos. O nome “DOM” surgiu da fusão de “Documento” (a página web), “Objeto” (representando elementos) e “Modelo” (a representação estruturada).

---

Espero que isso ajude e sinta-se à vontade para fornecer comentários ou perguntar se você tiver alguma dúvida ou preocupação específica.