Selecionando e mudando elementos

Lembra da primeira lição do curso, das três camadas? O HTML monta a estrutura, o CSS veste e o JavaScript age. Pois chegou a hora de agir. Tudo o que fizemos até agora viveu no console; mas o JavaScript nasceu para mexer na página: trocar um texto quando o usuário clica, pintar um aviso de vermelho, mostrar e esconder pedaços da tela. Para isso, ele precisa de um jeito de "enxergar" a página, e esse jeito tem nome: o DOM.

DOM é a sigla de Document Object Model. Quando o navegador carrega um HTML, ele monta na memória um mapa vivo da página, em forma de árvore: o documento contém o corpo, o corpo contém os títulos, parágrafos e botões, e assim por diante. O JavaScript não mexe no arquivo HTML; ele mexe nessa árvore, e cada mudança aparece na tela na mesma hora.

A porta de entrada dessa árvore é um objeto que o navegador te dá pronto: o document, que representa a página inteira. E o primeiro passo de quase toda interação é selecionar o elemento com que você quer trabalhar. A ferramenta principal é o document.querySelector(), que se lê com aquele ponto que você já domina: "documento, procure este elemento para mim". Dentro dos parênteses vai o alvo, escrito num formatinho novo: "#titulo", em que a cerquilha # significa "procure pelo id", aquele nome único que se dá a um elemento no HTML. (É a sintaxe dos seletores do CSS, os mesmos que você usa para estilizar a página.)

Elemento na mão, é só mexer: .textContent troca o texto de dentro dele, e .style ajusta a aparência. No editor abaixo tem HTML e JavaScript juntos, e o resultado é um mini-site de verdade renderizado logo abaixo do código. Rode e repare: o HTML dizia "Texto original", mas não é isso que aparece, porque o JavaScript mexeu na árvore antes de você ver: