O que é o DOM, de verdade?

O arquivo HTML e a coisa que o navegador usa são diferentes

Comece por um fato sobre toda página que uma app Rails serve. O HTML que seu servidor envia pela rede é só texto, uma sequência de caracteres como qualquer outro arquivo. Quando um navegador recebe esse texto, ele constrói outra coisa a partir dele: uma árvore viva de objetos na memória, chamada DOM (Document Object Model). Tudo que você vai fazer com CSS, JavaScript, e depois com o Hotwire, tem como alvo aquela árvore, não o arquivo de texto original.

De texto para árvore

<body>
  <h1>Welcome</h1>
  <p>Hello, world.</p>
</body>

O navegador lê esse texto de cima para baixo e constrói uma estrutura onde cada tag vira um objeto com um lugar numa hierarquia:

              body
             /    \
           h1      p
            |       |
        "Welcome" "Hello, world."

Aquele diagrama é o DOM. Nele, o h1 é um objeto com propriedades e métodos. Ele tem um pai (body) e um filho, o nó de texto "Welcome".

Por que "modelo de objetos" é o nome certo

Todo nó daquela árvore é um objeto que você pode inspecionar e mudar. Ele tem um tipo, atributos, uma lista de filhos e uma referência ao pai. É assim que o JavaScript muda uma página depois que ela carrega. Ele altera os objetos que o navegador está desenhando na tela, sem tocar em arquivo HTML nenhum.

Onde uma app Rails se encaixa nesse quadro

Rails renderiza ERB ──▶ envia texto HTML pelo HTTP ──▶ navegador faz o parsing ──▶ constrói o DOM ──▶ renderiza pixels

Seus arquivos app/views/*.erb, suas chamadas de render, tudo na camada de views do Rails: tudo isso existe para produzir aquele texto HTML. O DOM é o que acontece depois, inteiramente dentro do navegador, completamente fora do controle do Rails. Essa fronteira importa quando você chegar no Hotwire e no Turbo, mais adiante no roteiro. Essas ferramentas pegam HTML do servidor e atualizam o DOM vivo com ele, em vez de o navegador carregar uma página nova.

Uma prova rápida e concreta

Abra qualquer página web, clique com o botão direito, e compare duas coisas:

• View Page Source: mostra o texto HTML original do mesmo jeito que o servidor enviou, nunca mudando
• Inspect (o painel Elements das DevTools, tema da Aula 3): mostra o DOM atual, que pode diferir do código-fonte assim que algum JavaScript roda

Numa página cheia de JavaScript, as duas visões costumam discordar milissegundos depois do carregamento. O DOM é uma coisa separada e viva, que partiu do arquivo e seguiu adiante.

Como este curso está organizado

• Aula 2: nós, elementos e o formato da árvore
• Aula 3: olhando um DOM ao vivo com as DevTools do navegador
• Aula 4: como seletores CSS usam relações de árvore para alcançar elementos
• Aula 5: como o JavaScript (e o Hotwire/Turbo do Rails) muda o DOM depois do carregamento
• Aula 6: termos que você vai continuar encontrando: render tree, reflow, virtual DOM
• Aula 7: lendo a árvore DOM de uma página de verdade, de ponta a ponta

Pontos-chave

• HTML é texto; o DOM é a árvore viva, na memória, de objetos que um navegador constrói a partir desse texto.
• Todo nó do DOM é um objeto real com um tipo, atributos, filhos, e um pai, não uma string.
• O Rails produz texto HTML; o navegador transforma isso no DOM inteiramente por conta própria, fora do controle do Rails.
• O View Source mostra o HTML original; o Inspect mostra o DOM atual: eles podem divergir no momento em que qualquer JavaScript roda.