JavaScript: eventos y DOM para interfaces interactivas

Hasta ahora hemos preparado las piezas internas de JavaScript: variables, tipos, condicionales, bucles y funciones. Con eso ya podemos guardar datos, tomar decisiones y ordenar la lógica. Pero todavía falta algo esencial: conectar esa lógica con lo que el usuario hace en la pantalla.

Ahí entran el DOM y los eventos. El DOM nos permite acceder a los elementos de una página desde JavaScript. Los eventos nos permiten reaccionar cuando ocurre algo: un clic, una tecla presionada, un cambio en un campo, el envío de un formulario o una interacción del usuario.

Este capítulo marca un punto importante en Desarrollo de Interfaces: dejamos de escribir JavaScript aislado en consola y empezamos a construir interfaces que responden.

Qué aprenderás hoy

• Entender qué es el DOM y por qué importa en una interfaz.
• Seleccionar elementos con querySelector.
• Escuchar eventos con addEventListener.
• Modificar texto, clases y contenido desde JavaScript.
• Diferenciar eventos como click, input y submit.
• Usar preventDefault() para controlar el envío de formularios.

Qué es el DOM

DOM significa Document Object Model. En términos prácticos, es una representación de la página que JavaScript puede leer y modificar. Cada etiqueta HTML se convierte en un objeto accesible: un título, un párrafo, un botón, un input, una lista o una tarjeta.

Cuando escribimos HTML, definimos la estructura inicial. Cuando usamos JavaScript con el DOM, podemos cambiar esa estructura o sus propiedades durante la interacción. Por ejemplo: actualizar un mensaje, agregar una clase CSS, mostrar una alerta visual o crear una nueva tarjeta.

Esto no significa que debamos manipular todo con JavaScript. El HTML debe seguir siendo semántico y el CSS debe encargarse de la presentación. JavaScript entra cuando la interfaz necesita responder a una acción.

Seleccionar elementos con querySelector

Para modificar algo, primero necesitamos encontrarlo. Una forma común de hacerlo es document.querySelector(), que recibe un selector CSS y devuelve el primer elemento que coincide.

<h2 id="course-title">Desarrollo de Interfaces</h2>
<p class="course-message">Bienvenido al capítulo 12.</p>
<button class="primary-button">Cambiar mensaje</button>

const title = document.querySelector("#course-title");
const message = document.querySelector(".course-message");
const button = document.querySelector(".primary-button");

console.log(title.textContent);
console.log(message.textContent);
console.log(button.textContent);

El selector #course-title busca por id. El selector .course-message busca por clase. La lógica es parecida a CSS, pero ahora usamos el elemento desde JavaScript.

Modificar texto y clases

Una vez seleccionado un elemento, podemos cambiar su contenido o su apariencia. Para texto simple usamos textContent. Para clases usamos classList.

message.textContent = "Ahora la interfaz respondió con JavaScript.";
message.classList.add("result-success");

Esto es una idea poderosa: no necesitamos crear una página distinta para cada estado. Podemos tener un HTML base y cambiar ciertos elementos según lo que ocurra.

Escuchar eventos con addEventListener

Un evento es algo que ocurre en la página. El usuario hace clic, escribe, mueve el mouse, cambia un valor o envía un formulario. Para reaccionar usamos addEventListener.

button.addEventListener("click", function () {
  message.textContent = "Hiciste clic en el botón.";
  message.classList.add("result-success");
});

La función que pasamos como segundo argumento se ejecuta cuando ocurre el evento. Esta función es un callback: queda registrada para ejecutarse después, cuando el usuario interactúe.

Aquí se nota por qué el capítulo de funciones iba antes que el DOM. Si sabemos escribir funciones pequeñas, los eventos se vuelven mucho más ordenados.

Ejemplo básico: botón que cambia un estado

Construyamos una pequeña interfaz que cambia de estado cuando el usuario hace clic.

<article class="status-card">
  <h2>Estado del curso</h2>
  <p id="status-message">Aún no has iniciado.</p>
  <button id="start-button" type="button">Iniciar</button>
</article>

const statusMessage = document.querySelector("#status-message");
const startButton = document.querySelector("#start-button");

startButton.addEventListener("click", function () {
  statusMessage.textContent = "Curso iniciado. Avanza con calma.";
  statusMessage.classList.add("result-success");
});

La interfaz inicial está en HTML. La reacción está en JavaScript. Ese reparto de responsabilidades ayuda a mantener el código más limpio.

El evento input: responder mientras el usuario escribe

No todos los eventos ocurren con un clic. El evento input se dispara cuando cambia el valor de un campo. Es muy útil para validaciones en tiempo real, contadores de caracteres y vistas previas.

<label for="student-name">Nombre</label>
<input id="student-name" type="text">
<p id="preview">Escribe tu nombre para ver la vista previa.</p>

const nameInput = document.querySelector("#student-name");
const preview = document.querySelector("#preview");

nameInput.addEventListener("input", function () {
  const name = nameInput.value.trim();

  if (name === "") {
    preview.textContent = "Escribe tu nombre para ver la vista previa.";
  } else {
    preview.textContent = "Hola, " + name + ". Bienvenido.";
  }
});

Este ejemplo muestra cómo la interfaz puede responder sin esperar a que el usuario presione un botón. Bien usado, mejora la experiencia. Mal usado, puede saturar con mensajes excesivos. La clave es ayudar, no interrumpir.

Ejemplo mejorado: usar funciones con eventos

Si metemos toda la lógica dentro del evento, el código puede crecer demasiado. Mejor reutilicemos funciones.

function obtenerMensajeNombre(nombre) {
  if (nombre === "") {
    return {
      texto: "Escribe tu nombre para continuar.",
      clase: "result-warning"
    };
  }

  return {
    texto: "Hola, " + nombre + ". Ya podemos continuar.",
    clase: "result-success"
  };
}

function renderizarMensaje(elemento, estado) {
  elemento.className = "result";
  elemento.classList.add(estado.clase);
  elemento.textContent = estado.texto;
}

nameInput.addEventListener("input", function () {
  const name = nameInput.value.trim();
  const estado = obtenerMensajeNombre(name);

  renderizarMensaje(preview, estado);
});

Ahora el evento solo coordina: lee el dato, llama a una función y renderiza el resultado. La lógica queda separada y más fácil de probar.

El evento submit y preventDefault

Cuando trabajamos con formularios, el evento principal es submit. Por defecto, el navegador intenta enviar el formulario y recargar o cambiar la página. Si queremos validar primero con JavaScript, usamos event.preventDefault().

<form id="course-form">
  <label for="email">Correo</label>
  <input id="email" type="email">

  <button type="submit">Inscribirme</button>
</form>

<p id="form-message" class="result"></p>

const form = document.querySelector("#course-form");
const emailInput = document.querySelector("#email");
const formMessage = document.querySelector("#form-message");

form.addEventListener("submit", function (event) {
  event.preventDefault();

  const email = emailInput.value.trim();

  if (!email.includes("@")) {
    formMessage.textContent = "Ingresa un correo válido.";
    formMessage.className = "result result-error";
    return;
  }

  formMessage.textContent = "Inscripción registrada.";
  formMessage.className = "result result-success";
});

Este patrón será la base del siguiente capítulo: formularios interactivos. La idea es controlar el flujo, validar datos y mostrar mensajes útiles sin perder la estructura HTML.

Variante profesional: inicializar la interfaz

Una práctica útil es agrupar la preparación de eventos en una función de inicialización. Así sabemos dónde se conectan las piezas de la interfaz.

function initCourseForm() {
  const form = document.querySelector("#course-form");
  const emailInput = document.querySelector("#email");
  const formMessage = document.querySelector("#form-message");

  form.addEventListener("submit", function (event) {
    event.preventDefault();

    const email = emailInput.value.trim();
    const isValid = email.includes("@");

    formMessage.textContent = isValid
      ? "Inscripción registrada."
      : "Ingresa un correo válido.";

    formMessage.className = isValid
      ? "result result-success"
      : "result result-error";
  });
}

initCourseForm();

Más adelante, cuando tengas varias secciones en una página, este tipo de organización ayuda a evitar scripts desordenados. Cada bloque puede tener su propia función de inicio.

Errores comunes

• Seleccionar elementos antes de que existan en el HTML.
• Confundir el nombre del selector: id con #, clase con ..
• Usar innerHTML para texto simple cuando basta textContent.
• Olvidar preventDefault() en formularios que se validan con JavaScript.
• Meter demasiada lógica dentro de un solo evento.
• Mostrar cambios visuales solo con color y no con texto claro.

Buenas prácticas

• Escribe HTML semántico antes de manipularlo con JavaScript.
• Guarda referencias a elementos con nombres claros.
• Usa funciones para separar lectura, validación y renderizado.
• Prefiere textContent para textos generados por datos del usuario.
• Usa classList o clases controladas para cambiar estados visuales.
• Prueba cada evento con datos correctos, vacíos e inesperados.

Reto práctico

Variante extra: separa el código en funciones: leerPerfil(), validarPerfil(perfil), renderizarVistaPrevia(perfil) y renderizarMensaje(estado).

Conclusión

El DOM y los eventos convierten una página estática en una interfaz interactiva. El HTML define la estructura, CSS define la presentación y JavaScript escucha lo que hace el usuario para actualizar la experiencia.

La clave no es poner JavaScript por todas partes, sino conectar acciones reales con respuestas útiles. Un clic, una escritura o un envío de formulario deben tener una intención clara: informar, validar, actualizar o guiar.

En el siguiente capítulo trabajaremos formularios interactivos con más profundidad. Usaremos eventos, funciones y condicionales para construir flujos de entrada de datos más completos.

Fuentes consultadas

• MDN Web Docs: DOM scripting
• MDN Web Docs: Document querySelector
• MDN Web Docs: addEventListener
• MDN Web Docs: Element classList
• MDN Web Docs: preventDefault