A ponte entre o JS e o HTML

Até agora o JS falou com o console. Mas o objetivo é mexer na página. O DOM (Document Object Model) é a página vista como objetos pelo JavaScript.

Para pegar um elemento, dê um id a ele no HTML e use getElementById:

<h1 id="titulo">Loja Aurora</h1>

const titulo = document.getElementById("titulo");

Agora titulo é uma variável que representa aquele <h1> — e você pode mudá-lo.

🧠 Modelo mental: document é a página inteira. getElementById("titulo") é você apontar o dedo e dizer "quero aquele elemento" para poder mexer nele.