Cómo cambiar una página web con JavaScript (el DOM)

Para cambiar algo, primero hay que encontrarlo. Por eso servía el atributo id que viste en HTML.

La instrucción es document.getElementById("nombre"). Literalmente: "del documento, dame el elemento con este id".

Una vez que lo tienes, .textContent es su texto: puedes leerlo y cambiarlo.

<h1 id="titulo">Texto original</h1>
<p id="mensaje">Esperando…</p>

<script>
  // Buscar los elementos y guardarlos en variables
  const titulo = document.getElementById("titulo");
  const mensaje = document.getElementById("mensaje");

  // Cambiar su contenido
  titulo.textContent = "¡Lo cambié con código!";
  mensaje.textContent = "Y este párrafo también";
</script>

También puedes cambiar el CSS desde JavaScript, con .style.

Un detalle: las propiedades con guion cambian de nombre. background-color en CSS se escribe backgroundColor en JavaScript, porque el guion ahí significaría una resta.

<div id="caja" style="padding:22px;border-radius:12px">
  Mírame cambiar
</div>

<script>
  const caja = document.getElementById("caja");

  caja.style.backgroundColor = "#34a2fd";
  caja.style.color = "#04122b";
  caja.style.fontWeight = "bold";
  caja.style.textAlign = "center";
</script>

Acá está lo realmente potente: puedes crear HTML que no existía. Es como se arman las listas de productos, los mensajes de un chat o las tarjetas de este sitio.

Son tres pasos: crear el elemento, ponerle contenido, y agregarlo a la página.

<h3>Ranking</h3>
<ul id="lista"></ul>

<script>
  // Una lista de objetos, como aprendiste antes
  const ranking = [
    { nombre: "Ana",   puntos: 340 },
    { nombre: "Joaco", puntos: 500 },
    { nombre: "María", puntos: 210 }
  ];

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

  for (let j of ranking) {
    const fila = document.createElement("li");        // 1. crear
    fila.textContent = j.nombre + " — " + j.puntos;   // 2. contenido
    lista.appendChild(fila);                          // 3. agregar
  }
</script>

Encontrar elementos con getElementById, cambiar su texto y su estilo, y crear elementos nuevos desde datos.

Todo esto pasa al cargar la página. Lo que falta es que reaccione a lo que hace el usuario.

Cambiar la página con código

Changing the page with code