Tema 16 · DOM y Eventos

Modificar Contenido, Atributos y CSS

Aprende a modificar dinámicamente el contenido con textContent e innerHTML, manipular clases con classList y alterar atributos o estilos CSS en tiempo real.

Selección de Elementos en el DOM Eventos e Interactividad (addEventListener)

Modificación de Contenido

Una vez capturado un elemento del DOM, JavaScript ofrece propiedades directas para cambiar lo que el usuario ve en pantalla:

Propiedad Comportamiento Recomendación de Seguridad
elemento.textContent = "..." Inserta o reemplaza texto plano. No procesa etiquetas HTML. Seguro (previene ataques XSS al escapar caracteres especiales).
elemento.innerHTML = "..." Interpreta y renderiza código HTML completo dentro del nodo. Usar con precaución. No insertar datos no sanitizados de usuarios.

Manipulación de Clases con classList

La mejor práctica en desarrollo web moderno es dejar los estilos visuales en hojas CSS y conmutar clases desde JavaScript: 

const tarjeta = document.querySelector(".tarjeta");

tarjeta.classList.add("activa");        // Agrega la clase si no la tiene
tarjeta.classList.remove("inactiva");   // Remueve la clase
tarjeta.classList.toggle("modo-oscuro");// La agrega si no está, o la quita si ya existe
const tieneClase = tarjeta.classList.contains("activa"); // Retorna true/false

Atributos y Estilos en Línea

// Atributos HTML
const imagen = document.querySelector("img");
imagen.setAttribute("src", "/imagenes/logo.png");
imagen.setAttribute("alt", "Logo de Kilopolis");

// Estilos directos (propiedades en camelCase)
const caja = document.getElementById("alerta");
caja.style.backgroundColor = "#fee2e2";
caja.style.borderRadius = "8px";
caja.style.padding = "16px";

⚡ Panel de Control de Estilos y Clases en Vivo

Alterna el modo oscuro, modifica el texto y conmuta tamaños con la API del DOM:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Modificar DOM y Clases CSS</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .panel { max-width: 500px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 20px; transition: all 0.3s ease; }
    .panel.oscuro { background: #0f172a; color: #f8fafc; border-color: #334155; }
    .panel.borde-destacado { border-width: 3px; border-color: #0284c7; box-shadow: 0 10px 15px -3px rgba(2, 132, 199, 0.2); }
    .botonera { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; }
    button { padding: 8px 12px; border-radius: 6px; border: 1px solid #cbd5e1; background: #f1f5f9; cursor: pointer; font-weight: 600; }
    button:hover { background: #0284c7; color: white; border-color: #0284c7; }
    .estado-badge { display: inline-block; padding: 4px 8px; font-size: 0.8rem; border-radius: 4px; background: #e2e8f0; color: #334155; margin-bottom: 10px; font-weight: bold; }
  </style>
</head>
<body>

  <div class="panel" id="caja-demo">
    <span class="estado-badge" id="badge-estado">Modo Claro Activo</span>
    <h3 id="titulo-panel" style="margin: 0 0 10px 0;">Tarjeta Interactiva</h3>
    <p id="parrafo-panel" style="margin: 0 0 15px 0;">Este texto y los estilos de esta tarjeta pueden ser manipulados en tiempo real mediante JavaScript.</p>

    <div class="botonera">
      <button onclick="alternarModoOscuro()">Conmutar Modo Oscuro</button>
      <button onclick="cambiarTexto()">Cambiar Mensaje</button>
      <button onclick="alternarDestacado()">Conmutar Borde</button>
    </div>
  </div>

  <script>
    let mensajeAlternado = false;

    function alternarModoOscuro() {
      const panel = document.getElementById('caja-demo');
      const badge = document.getElementById('badge-estado');
      
      // Conmutar clase con classList.toggle
      panel.classList.toggle('oscuro');

      if (panel.classList.contains('oscuro')) {
        badge.textContent = "Modo Oscuro Activo";
        badge.style.background = "#334155";
        badge.style.color = "#38bdf8";
      } else {
        badge.textContent = "Modo Claro Activo";
        badge.style.background = "#e2e8f0";
        badge.style.color = "#334155";
      }
    }

    function cambiarTexto() {
      const titulo = document.getElementById('titulo-panel');
      const parrafo = document.getElementById('parrafo-panel');
      mensajeAlternado = !mensajeAlternado;

      if (mensajeAlternado) {
        titulo.textContent = "¡Texto Actualizado con textContent!";
        parrafo.innerHTML = "Ahora el párrafo incluye un fragmento en <strong>negrita HTML</strong> insertado dinámicamente.";
      } else {
        titulo.textContent = "Tarjeta Interactiva";
        parrafo.textContent = "Este texto y los estilos de esta tarjeta pueden ser manipulados en tiempo real mediante JavaScript.";
      }
    }

    function alternarDestacado() {
      const panel = document.getElementById('caja-demo');
      panel.classList.toggle('borde-destacado');
    }
  </script>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.