Selecionar e modificar elementos — O DOM e os eventos

Selecionar elementos

Para trabalhar com um elemento, primeiro é preciso encontrá-lo. Os métodos mais usados são:

document.getElementById("titulo");      // por id
document.querySelector(".aviso");       // primeiro elemento que casa com o seletor CSS
document.querySelectorAll("li");        // TODOS os que casam (lista)

querySelector aceita qualquer seletor CSS: "#id", ".classe", "div > p", etc. É a opção mais flexível e a recomendada hoje em dia.

Mudar o conteúdo

const titulo = document.querySelector("h1");
titulo.textContent = "Novo título"; // muda o texto (seguro)
titulo.innerHTML = "<em>Olá</em>";    // interpreta HTML (cuidado com dados do usuário)

textContent: trata tudo como texto puro. É a opção segura.
innerHTML: interpreta etiquetas HTML. Útil, mas perigoso se o conteúdo vier do usuário (risco de injeção de código).

Mudar atributos e estilos

const link = document.querySelector("a");
link.setAttribute("href", "https://exemplo.com");
link.classList.add("ativo");           // adicionar classe CSS
link.classList.remove("oculto");
link.style.color = "red";               // estilo em linha

Para construir HTML como texto (o que você fará nos exercícios), bastam templates de string:

const nome = "Ana";
const saudacao = `<p>Olá, ${nome}</p>`;
console.log(saudacao); // "<p>Olá, Ana</p>"

Exemplos

Construir HTML como texto com um template

function cartao(titulo, texto) {
  return `<div class="cartao"><h2>${titulo}</h2><p>${texto}</p></div>`;
}
console.log(cartao("Olá", "Bem-vindo"));