DOM x BOM

Quando um arquivo HTML é aberto no navegador, pressupõe-se a realização de uma requisição, seja local ou de um servidor.

O arquivo .html é parseado pelo navegador, que interpreta o conteúdo do documento e constrói a DOM dentro do objeto window, convertendo o texto HTML em uma estrutura de objetos (JavaScript).

A DOM pode ser entendida como uma estrutura em forma de árvore, cujo nó raiz é o próprio documento, a partir dele surgem elementos como HEAD e BODY. Dentro do BODY, são criados componentes como nav, main, section, dentro desses, outros elementos como div, button, entre outros.

Cada elemento inserido passa a ocupar uma posição nessa árvore, estabelecendo relações de pai, filho e irmão. Para o navegador essa estrutura não é apenas marcação, mas um conjunto de objetos manipuláveis.

Durante o parseamento, não apenas o HTML é reconstruído como objetos, mas o navegador também disponibiliza funções e métodos (JavaScript) dentro do DOM que permitem a manipulação dinâmica do próprio DOM, como alterar conteúdo, estilos e comportamentos.

Essas funções e métodos são frequentemente chamados de DOM Application Programming Interfaces, ou simplesmente DOM API.

Conjuntamente a isso, temos também o BOM (Browser Object Model), que é a API do navegador responsável por disponibilizar funções e objetos que permitem a interação direta com o ambiente do browser, fora do escopo do documento HTML.

Por meio do BOM, é possível acessar e controlar elementos como a própria window, o location, o history, o navigator, além de funcionalidades como alertas, timers (setTimeout, setInterval) e redirecionamentos de página.

• Document Object Model (DOM) → manipula o conteúdo, a estrutura e o estilo do HTML.
• Browser Object Model (BOM) → permite a interação e o controle do comportamento do navegador.