0Pricing
Frontend Academy · Lección

Cambiar contenido: textContent, innerHTML y classList

Lea y actualice el texto de los elementos, inserte HTML y alterne, añada o elimine clases CSS mediante programación.

Cambiar contenido: textContent, innerHTML y classList es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

Leer y escribir textContent

element.textContent obtiene o establece el contenido de texto sin formato de un elemento, incluidos todos sus descendientes. Es seguro: nunca interpreta HTML, por lo que establecerlo con datos introducidos por el usuario no crea vulnerabilidades XSS.

const heading = document.querySelector('h1');
console.log(heading.textContent); // read
heading.textContent = 'New Title'; // write — replaces all children

// Safe with user input:
element.textContent = userInput; // no XSS risk

innerHTML — Usar con precaución

element.innerHTML obtiene o establece el marcado HTML dentro de un elemento. Es práctico, pero peligroso con datos introducidos por el usuario: interpreta HTML y puede ejecutar scripts (XSS). Nunca establezca innerHTML con datos de usuario sin sanitizar.

card.innerHTML = '<strong>Loading...</strong>'; // safe: hardcoded string

// DANGER — never do this:
element.innerHTML = userInput; // XSS vulnerability

// Safe alternative:
const div = document.createElement('div');
div.textContent = userInput;   // won't parse as HTML

innerText frente a textContent

innerText devuelve únicamente el texto visible (respeta CSS display:none) y provoca un cálculo del diseño. textContent devuelve todo el texto, incluido el oculto, y es más rápido. Prefiera textContent salvo que necesite específicamente el comportamiento del texto visible.

classList — Añadir y eliminar clases

element.classList proporciona métodos para modificar las clases CSS sin manipular toda la cadena className. add(), remove(), toggle(), contains(), replace().

const btn = document.querySelector('.btn');
btn.classList.add('active');         // add a class
btn.classList.remove('disabled');    // remove a class
btn.classList.toggle('open');        // add if absent, remove if present
console.log(btn.classList.contains('active')); // true

toggle con parámetro force

classList.toggle('class', condition) añade la clase cuando condition es truthy y la elimina cuando es falsy. Es una forma clara de sincronizar una clase con un estado booleano.

const isDark = true;
document.body.classList.toggle('dark-mode', isDark);
// No more: if/else with add/remove

Leer y establecer atributos

element.getAttribute('attr') lee cualquier atributo. element.setAttribute('attr', value) lo establece. element.removeAttribute('attr') lo elimina. element.hasAttribute('attr') comprueba si existe.

const img = document.querySelector('img');
console.log(img.getAttribute('alt'));
img.setAttribute('alt', 'New description');
img.removeAttribute('loading');

Atributos data-*

Los atributos personalizados data-* almacenan datos adicionales en los elementos sin afectar al DOM. Acceda a ellos mediante element.dataset en camelCase.

<div id="card" data-user-id="42" data-role="admin"></div>

const card = document.querySelector('#card');
console.log(card.dataset.userId); // '42'
console.log(card.dataset.role);   // 'admin'
card.dataset.status = 'active';   // sets data-status

Propiedad style

element.style.propertyName establece estilos en línea. Use camelCase para las propiedades que contienen guiones. Es preferible alternar clases CSS en lugar de establecer estilos en línea: las clases mantienen los estilos en archivos CSS, que es donde deben estar.

element.style.backgroundColor = '#e2e8f0'; // camelCase
element.style.marginTop = '16px';
element.style.display = 'none';

// Reset inline style:
element.style.removeProperty('background-color');

Leer estilos calculados

getComputedStyle(element) devuelve los estilos realmente aplicados después de la cascada, no solo los estilos en línea. Úselo para leer los estilos establecidos por clases CSS o por el valor predeterminado del navegador.

const el = document.querySelector('.card');
const styles = getComputedStyle(el);
console.log(styles.fontSize);     // '16px'
console.log(styles.display);      // 'flex'

Modificar las etiquetas title y meta

El título del documento (la pestaña del navegador) se puede cambiar en cualquier momento con document.title = 'New Title'. En las SPA, esto mejora la experiencia del usuario al navegar entre vistas.

// Update tab title on route change:
document.title = `${pageName} | MyApp`;

scrollIntoView()

element.scrollIntoView({ behavior: 'smooth' }) desplaza suavemente el elemento hasta hacerlo visible. Es perfecto para la navegación que desplaza hasta una sección y para resaltar errores de validación en formularios.

document.querySelector('#pricing').scrollIntoView({ behavior: 'smooth', block: 'start' });

Comprobación rápida

¿Qué propiedad debe usar para mostrar de forma segura texto proporcionado por el usuario en el DOM sin riesgo de XSS?

Repaso: modificar el DOM

textContent establece texto sin formato de forma segura. innerHTML establece HTML (es peligroso con datos introducidos por el usuario). classList.add/remove/toggle gestiona las clases CSS de forma clara. setAttribute/dataset gestionan los atributos HTML. Es preferible alternar clases en lugar de usar estilos en línea. getComputedStyle lee los estilos finales aplicados.

Preguntas frecuentes

¿La lección «Cambiar contenido: textContent, innerHTML y classList» es gratis?

Sí — el texto completo de «Cambiar contenido: textContent, innerHTML y classList» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Cambiar contenido: textContent, innerHTML y classList»?

Lea y actualice el texto de los elementos, inserte HTML y alterne, añada o elimine clases CSS mediante programación. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Cambiar contenido: textContent, innerHTML y classList»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. querySelector y querySelectorAll
  2. addEventListener y objeto Event
  3. Cambiar contenido: textContent, innerHTML y classList
  4. Crear y añadir elementos
← Volver a Frontend Academy