Conviene conocer módulos y HTML semántico. La sección distingue el documento original del árbol DOM vivo.
CONTENIDO ORIGINAL
Avanza en orden. Cada lección está redactada para Palta es Cool, utiliza ejemplos propios y termina con una actividad cuya respuesta puedes desplegar.
ANTES DE EMPEZAR
Ubícate antes de avanzar
Al terminar deberías poder relacionar Árbol DOM con Renderizado seguro y resolver un caso nuevo.
Reserva entre 75 y 120 minutos o divide el laboratorio en dos sesiones.
04 / PREPARA EL LABORATORIO
Utiliza un navegador con herramientas de desarrollo y una versión LTS de Node.js con npm. Angular y MongoDB se preparan cuando llegues a esos bloques.
Abrir la guía de herramientas →Diagnóstico rápido: ¿cómo se relacionan Árbol DOM y Renderizado seguro? ＋
No necesitas acertar todavía. Escribe una hipótesis de dos líneas y compárala con tu respuesta al finalizar; si puedes corregirla y justificar el cambio, hubo aprendizaje.
Aprende el tema paso a paso
Transformarás un documento de forma accesible, segura y eficiente, conservando una fuente clara de estado.
Al terminar podrás
- Consulta el DOM con un propósito y valida el resultado
- Renderizar no significa concatenar HTML
- El cambio visual también debe comunicarse sin mirar
01
Selección y lectura
Consulta el DOM con un propósito y valida el resultado
querySelector retorna el primer elemento o null; querySelectorAll entrega una colección estática. Un selector estable se apoya en semántica o atributos dedicados, no en una cadena frágil de estilos. Si el elemento es obligatorio, el fallo debe detectarse cerca de la selección.
Valida null antes de usar el elemento.
No consultes repetidamente un nodo estable dentro de un bucle.
Usa data-* para metadatos de interfaz, no para secretos.
¿Qué devuelve querySelector cuando no encuentra coincidencia?
Mostrar respuesta ＋
null. Debes tratarlo antes de leer propiedades o registrar eventos.
02
Crear y representar
Renderizar no significa concatenar HTML
createElement, textContent, classList y append permiten construir una vista sin interpretar texto externo como marcado. Conviene derivar la vista desde un estado, agrupar cambios y conservar claves estables al actualizar listas. DocumentFragment puede reducir inserciones repetidas.
textContent trata el valor como texto.
classList comunica estados visuales.
Actualiza solo la región que corresponde al cambio.
¿Cuándo sería peligroso usar innerHTML?
Mostrar respuesta ＋
Cuando incorpora texto no confiable o sin sanitización, porque el navegador puede interpretarlo como marcado activo y producir XSS.
03
Accesibilidad y estado
El cambio visual también debe comunicarse sin mirar
El foco, el nombre accesible, el estado expandido y los mensajes dinámicos forman parte del comportamiento. Tras agregar o eliminar contenido, no siempre conviene mover el foco, pero nunca debe perderse sin destino. aria-live puede anunciar resultados breves; los atributos ARIA no reemplazan elementos nativos.
Conserva orden lógico de tabulación.
Asocia errores con el campo correspondiente.
Prueba teclado, zoom y lector además de clic.
¿Agregar role="button" convierte por sí solo un div en un botón completo?
Mostrar respuesta ＋
No. Aún faltan foco, activación con teclado, estados y otros comportamientos. Siempre que sea posible usa button nativo.
Tu recorrido en tres ideas
- Consulta el DOM con un propósito y valida el resultado
- Renderizar no significa concatenar HTML
- El cambio visual también debe comunicarse sin mirar
CIERRE DE LA SECCIÓN
Comprueba que puedes usarlo
Antes de continuar, revisa estos tropiezos frecuentes y resuelve un caso sin copiar los ejemplos.
Suponer que querySelector siempre encuentra un elemento.
Construir controles con div y corregir accesibilidad después.
Ahora hazlo sin guía
Representa una lista de tareas accesible con estado vacío, altas, eliminación y anuncio de cambios.
Mostrar pauta de corrección ＋
Una respuesta sólida:
- No interpreta títulos como HTML.
- Teclado, foco y nombre accesible funcionan.
- El DOM se deriva de una fuente de estado identificable.