Seleccionar y modificar elementos — El DOM y los eventos

Seleccionar elementos

Para trabajar con un elemento, primero hay que encontrarlo. Los métodos más usados son:

document.getElementById("titulo");      // por id
document.querySelector(".aviso");       // primer elemento que casa el selector CSS
document.querySelectorAll("li");        // TODOS los que casan (lista)

querySelector acepta cualquier selector CSS: "#id", ".clase", "div > p", etc. Es la opción más flexible y la recomendada hoy en día.

Cambiar el contenido

const titulo = document.querySelector("h1");
titulo.textContent = "Nuevo título"; // cambia el texto (seguro)
titulo.innerHTML = "<em>Hola</em>";   // interpreta HTML (cuidado con datos del usuario)

textContent: trata todo como texto plano. Es la opción segura.
innerHTML: interpreta etiquetas HTML. Útil, pero peligroso si el contenido viene del usuario (riesgo de inyección de código).

Cambiar atributos y estilos

const enlace = document.querySelector("a");
enlace.setAttribute("href", "https://ejemplo.com");
enlace.classList.add("activo");        // añadir clase CSS
enlace.classList.remove("oculto");
enlace.style.color = "red";             // estilo en línea

Para construir HTML como texto (lo que harás en los ejercicios), basta con plantillas de cadena:

const nombre = "Ana";
const saludo = `<p>Hola, ${nombre}</p>`;
console.log(saludo); // "<p>Hola, Ana</p>"

Ejemplos

Construir HTML como texto con una plantilla

function tarjeta(titulo, texto) {
  return `<div class="tarjeta"><h2>${titulo}</h2><p>${texto}</p></div>`;
}
console.log(tarjeta("Hola", "Bienvenido"));