DOM Manipulation
Learn how to dynamically update web pages to create interactive business applications.
What You'll Learn
Description
La manipulación del DOM es la forma en que una página web cambia después de cargarse: mostrar un mensaje, añadir una fila a una tabla, validar un formulario, reaccionar a un clic. Este tutorial cubre las APIs nativas del navegador (getElementById, querySelector, textContent, classList, addEventListener, createElement) sobre las que está construido todo framework.
Trabajarás a lo largo de cuatro capítulos con ejemplos de código ejecutables y una demo interactiva de lista de tareas en la que puedes hacer clic en tu navegador, junto al código DOM vanilla equivalente. Cada capítulo también muestra cómo describir el comportamiento que quieres a un asistente de IA y comprobar lo que te devuelve.
Al final sabrás seleccionar elementos de forma segura, conectar eventos, renderizar listas desde un array de datos, validar un formulario al enviarlo y evitar los patrones de layout thrashing que hacen que las páginas se sientan lentas.
What's inside
- 1.Selección de elementos — qué es el DOM, cómo encontrar elementos con getElementById y querySelector, y cómo describir el cambio que quieres a un asistente de IA.
- 2.Texto, estilos y eventos — leer y cambiar texto, atributos y estilos, y conectar tus primeros listeners de click e input.
- 3.Eventos y renderizado — crear y eliminar elementos, delegación de eventos y renderizado del DOM desde un array de datos.
- 4.Formularios y rendimiento — gestionar el envío de formularios con validación, además de batching y debouncing para apps rápidas y fluidas.