¿Una UI no se actualiza tras cambiar estado. Qué revisar primero?

El problema suele estar en el puente estado -> render.

DOM aplicado: renderizar, actualizar y depurar interfaces sin caos

Domina el trabajo real con DOM: selección fiable de nodos, render dinámico de listas, actualización de estados visuales y patrones para evitar manipulaciones frágiles.

¿Cuánto sabes de JavaScript?

📘 Teoría

Modelo operativo DOM: de datos a pantalla

No pienses en nodos sueltos: piensa en flujo de render.

El navegador mantiene un árbol de nodos en memoria. Tu código no escribe HTML mágico: lee y modifica propiedades concretas de ese árbol.

Una regla útil: separa en tres fases mentales: leer estado, decidir cambios, aplicar cambios. Este orden reduce errores de sincronía visual.

Leer

Capturar referencias y estado actual.

querySelector / getElementById
dataset, value, textContent

Decidir

Regla de negocio en JS puro.

if/else claros
flags intermedios con nombre

Aplicar

Mutación controlada de la UI.

classList.add/remove/toggle
append, replaceChildren

Verificar

Comprobar resultado visual y trazas.

console.log por fase
inspección en DevTools

Selección de nodos fiable y mantenible

Un selector frágil hoy es un bug de mañana.

Evita selectores demasiado acoplados a estructura visual (por ejemplo, cadenas largas de descendencia). Prioriza ids claros o clases de comportamiento dedicadas.

Cachear referencias en constantes evita repetir búsquedas y deja más claro qué nodos son parte del contrato de tu componente.

Declara referencias una vez al inicio.
Valida nodos críticos para fallar temprano.
Usa nombres de variable semánticos, no genéricos.

Mapa de referencias UI

const ui = {
  form: document.getElementById('task-form'),
  input: document.getElementById('task-input'),
  list: document.getElementById('task-list'),
  status: document.getElementById('task-status')
};

if (!ui.form || !ui.input || !ui.list || !ui.status) {
  throw new Error('Faltan nodos obligatorios en el DOM');
}

console.log('UI lista', ui);

Actualizar texto, clases y atributos sin ensuciar lógica

Tu estado de negocio debe reflejarse en estado visual de forma explícita.

Con textContent y classList puedes mapear estados de aplicación (cargando, éxito, error) sin tocar estilos inline ni concatenar HTML.

Cuando un componente cambia de estado, actualiza también atributos de accesibilidad como aria-busy o aria-live.

Estado de carga y éxito

const statusEl = document.getElementById('status');

function setStatus(kind, text) {
  statusEl.textContent = text;
  statusEl.classList.remove('is-loading', 'is-ok', 'is-error');
  statusEl.classList.add(`is-${kind}`);
  statusEl.setAttribute('aria-live', 'polite');
}

setStatus('loading', 'Guardando cambios...');
setTimeout(() => setStatus('ok', 'Cambios guardados ✅'), 900);

Render de listas dinámicas con DocumentFragment

Construye fuera del árbol y monta en un solo paso.

Cuando vas a insertar varios elementos, crear un DocumentFragment ayuda a mantener el código limpio y evita re-renderizados innecesarios por cada append individual.

Piensa esta técnica como un mini batch update: preparas todo y luego sustituyes contenido de una vez.

Render por lote

function renderTasks(listEl, tasks) {
  const frag = document.createDocumentFragment();

  tasks.forEach((task) => {
    const li = document.createElement('li');
    li.className = 'task-item';
    li.dataset.id = String(task.id);
    li.textContent = task.title;
    frag.append(li);
  });

  listEl.replaceChildren(frag);
}

renderTasks(document.getElementById('task-list'), [
  { id: 1, title: 'Revisar DOM' },
  { id: 2, title: 'Practicar render' }
]);

Errores reales al manipular DOM (y cómo prevenirlos)

La mayoría de fallos vienen de referencias nulas o estados no sincronizados.

Error clásico: ejecutar código antes de que existan nodos (script en posición incorrecta o ids que cambiaron). Otro error frecuente: depender de innerHTML para todo y perder listeners o estado previo.

Para evitarlo, valida referencias, encapsula renderizados y deja trazas claras por fase: entrada de datos, cálculo y actualización visual.

Si un nodo puede no existir, protégelo con guard clauses.
Evita mutaciones globales dispersas de la UI.
No mezcles renderizado y reglas de negocio en el mismo callback grande.
Traza cambios críticos en consola durante desarrollo.

1 Modelo operativo DOM: de datos a pantalla 2 Selección de nodos fiable y mantenible 3 Actualizar texto, clases y atributos sin ensuciar lógica 4 Render de listas dinámicas con DocumentFragment 5 Errores reales al manipular DOM (y cómo prevenirlos)

🧭 Visuales clave

DOM con JavaScript

Conecta eventos, estado y renderizado de interfaz en navegador.

Diagrama de selección, actualización y render en el DOM

🧪 Aprende probando

Ejemplo Ejemplo guiado: tarjeta de estado de pedido Actualiza texto y estilo de una tarjeta según estado de backend (`pendiente`, `enviado`, `entregado`).

⌄

Ejemplo Ejemplo guiado: render de catálogo mínimo Pinta productos desde un array creando nodos y separando la función de render de los datos.

⌄

Ejemplo Demo interactiva: panel de tareas con contador Añade tareas, renderiza la lista y actualiza contador de elementos en tiempo real.

⌄

Ejemplo Demo interactiva: variables CSS controladas desde JavaScript Manipula color, sliders y estado visual tocando variables CSS desde el DOM para ver cómo una sola actualización propaga cambios por toda la interfaz.

⌄

Ejemplo Demo guiada: manipulación básica del DOM en una microinterfaz Recorre una interfaz compacta que combina selección de nodos, actualización de contenido, estilos y eventos sencillos en un mismo flujo.

⌄

Ejemplo Demo interactiva: manipulación básica del DOM Ejemplos prácticos de selección de elementos, modificación de contenido, estilos y atributos en el DOM.

⌄

🏁 Retos

Reto Reto 1: filtro de búsqueda en lista Filtra elementos `<li>` según el texto que escribe el usuario y oculta los que no coinciden.

⌄

Reto Reto 2: render dinámico de tarjetas desde datos Genera tarjetas `<article>` desde un array de objetos y reemplaza el contenido del contenedor en cada render.

⌄

🧰 Recursos

Enlaces útiles

MDN: DOM Introduction javascript.info: Document MDN: querySelector MDN: Element.classList MDN: Document.createElement MDN: DocumentFragment

Test

Comprueba tus conocimientos con un test sobre JavaScript.

Test de JavaScript

Recursos del curso 62

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 23

Módulos ESM: organizar JavaScript por responsabilidades

Lección 25

Eventos en interfaces reales: del click básico a la delegación inteligente

›