DOM - Document Object Model
Até este momento do curso, nós já aprendemos a criar variáveis, atribuir-lhes valores, já falamos sobre alguns dos tipos dos quais podem ser estes valores e já fizemos algumas operações com eles. Já estamos avançando, entretanto ainda não fizemos grandes coisas, já que estávamos apenas soltando os valores das variáveis no console.
As coisas vão começar a ficar um pouco mais interessantes agora, pois vamos começar a trabalhar com os elementos html da página. Com isso vamos conseguir soltar os valores das variáveis dentro da nossa página, vamos poder alterar o css dos elementos e posteriormente monitorar eventos para tornar nossa página interativa. Para isso, precisamos primeiro conhecer o DOM.
O que é o DOM?
O Document Object Model é um objeto criado pelo browser assim que a página é carregada. Ele guarda toda a estrutura da página. Vamos ver um exemplo simples abaixo:
<html>
<head>
<title>Página simples em html</title>
</head>
<body>
<h1>Heading da página</h1>
<p>Parágrafo da página</p>
</body>
</html>
Quando esta página é carregada, o browser monta o DOM, que tem uma estrutura de árvore, como na figura abaixo:

Duas coisas importantes de se notar na figura são que nesta estrutura em árvore, existe uma hierarquia, portanto elementos tem "pai" (parent) e filhos (child elements). Isto será usado mais tarde, para por exemplo, alterar todos os filhos de algum elemento específico.
A segunda coisa, é que o elemento document é o que está acima de todos os outros e é por meio dele que vamos ter acesso a todos os elementos da nossa página.
Em resumo, a partir do DOM, nós poderemos:
- Adicionar ou remover elementos HTML
- Alterar os elementos HTML da página
- Alterar atributos dos elementos HTML (como o 'src' de uma imagem por exemplo)
- Alterar o CSS
- Reagir a eventos na página (clique, rolagem, input em formulários, passar o cursor sobre elementos, etc)
Agora que já sabemos o que é o DOM e o que podemos fazer com ele, na próxima aula vamos começar a usá-lo na prática.