O que é a DOM?

Recentemente eu li um post no blog CSS-TRICKS sobre a DOM (pra quem ainda não conhece, o blog CSS-Tricks começou com o Chris Coyier sendo o maior foco CSS e hoje é alimentado por uma galera e cobre assuntos gerais de web e design), é meio que uma introdução no assunto de forma bem básica, achei legal e decidi traduzir pra galera :D

O HTML que você escreve é a DOM? na verdade, não.

Mas o HTML que você escreve é analisado pelo seu browser e é transformado na DOM.

Então talvez o código fonte da página é a DOM? não, não…

O código fonte da página apenas lhe mostra as estruturas da página, o que a constrói. Provavelmente é o mesmo HTML que você escreveu.

Talvez possa aparecer um código um pouco diferente, por exemplo, você trabalha com templates em uma linguagem de backend e não observa a saída do HTML compilado frequentemente. Ou há um processo de construção (build) que acontece logo depois que você escreve seu HTML e o código é colocado no seu website. Talvez.. esse HTML é comprimido ou alterado.

O código fonte da página é um pouco estranho na verdade. As únicas pessoas que ligariam em olhar para esse código são desenvolvedores e a maioria dos navegadores possuem ferramentas para desenvolvedores já construidas de forma integradas no próprio navegador atualmente.

Então, o código no DevTools (ferramentas do desenvolvedor) do meu navegador é a DOM? sim!, mas.. pera aí, quase isso.

Quando você está olhando no painel em qualquer ferramenta que esteja utilizando que lhe mostra algo parecido com HTML, isso é uma representação visual da DOM! Há!

Sim… mas isso parece exatamente com meu HTML…e ai??!?!? Sim.. parece mesmo. Isso foi criado diretamente apartir do seu HTML se lembra? na maioria dos casos (os mais simples), a representação visual da DOM será igual seu simples HTML.

Mas não é sempre o mesmo…

Quando a DOM é diferente do HTML?

Aqui esta uma possibilidade: existem falhas no seu HTML e o navegador as concertou para você. Vamos dizer que você tem um elemento de

O caso mais provável, é…

JavaScript pode manipular a DOM

Imagine que você tem um elemento vazio em seu HTML:

<div id="container"></div>

Então depois em seu HTML, tem um pouco de JavaScript:

<script>
  var container = document.getElementById("container");
  container.innerHTML = "Novo conteúdo!";
</script>

Mesmo se você não sabe JavaScript, você pode resoavelmente entender esse pedaço de código. Na tela você vai ver Novo conteúdo! ao invés de nada, porque aquele elemento div foi preenchido com algum conteúdo.

Se você usar as ferramentas de desenvolvedor de seu navegador para verificar a representação visual da DOM, você vai ver:

<div id="container">Novo conteúdo!</div>

Que é diferente do seu HTML original ou o que você observaria no código fonte.

Ajax e Templating

Você pode imaginar se você estivesse para utilizar Ajax para pegar conteúdo de algum lugar e colocar na página, a DOM vai ser bem diferente do que seu HTML original. O mesmo acontece quando você carrega dados de algum tipo utilizando modelagem (templating) do lado do cliente (client-side).

Tente ir para o GMail e ver o código fonte. É um amontoado de scripts e dados do carregamento da página original. Quase irreconhecível comparado com o que você vê na tela.

JavaScript vs DOM

JavaScript é a linguagem que o browser lê e faz coisas. Mas a DOM é onde essas coisas acontecem. De fato, muita coisa do que você pode pensar como “alguma coisa de JavaScript” é na verdade, exatamente a “DOM API”.

Como exemplo, podemos escrever JavaScript que observe por um evento to tipo mouseenter (evento que é executado com o mouse entra em algum elemento). Mas esse “elemento” é na verdade um nó da DOM. Nós amarramos aquele observador via uma propriedade da DOM em naquele nó da DOM. Quando aquele evento acontece, é o nó da DOM que vai emitir esse evento.

A DOM é o sangue da coisa aqui. é onde tudo vai parar, no seu navegador. JavaScript é apenas a sintaxe, a linguagem. Ela pode ser utilizada totalmente fora do navegador sem nenhuma DOM API (da uma sacada em Node.js).

Isso foi só a ponta do iceberg, saiba muuuuito mais aqui:

W3C: MDN: Wikipedia: