Acceder a data-* con dataset en JavaScript
Lea y escriba atributos de datos personalizados mediante la API dataset
Acceder a data-* con dataset en JavaScript es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 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 HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué es la API dataset?
Cada elemento HTML expone sus atributos data-* mediante la propiedad dataset: un DOMStringMap que asigna nombres de atributos a valores sin necesidad de realizar llamadas a getAttribute().
Asignación de atributos a propiedades
data-user-id se convierte en el.dataset.userId. Los guiones de los nombres de atributos se convierten a camelCase en la propiedad dataset. Para acceder a data-item-count, use el.dataset.itemCount.
Lectura de valores
Lea un atributo de datos: const id = el.dataset.userId. Todos los valores de dataset son cadenas; convierta los valores numéricos con Number() o parseInt() según sea necesario. Los atributos inexistentes devuelven undefined, no null.
const card = document.querySelector(".card");
const userId = card.dataset.userId;
const count = Number(card.dataset.itemCount);Escritura de valores
Establezca un atributo de datos mediante dataset: el.dataset.state = "active". Esto crea o actualiza el atributo HTML data-state. El cambio del atributo se refleja inmediatamente en el DOM y puede observarse mediante MutationObserver.
Eliminación de valores
Elimine un atributo de datos: delete el.dataset.userId. El atributo data-user-id correspondiente se elimina del elemento. También puede usar el.removeAttribute("data-user-id") para realizar una eliminación explícita.
Iteración sobre dataset
dataset es un DOMStringMap; puede recorrerlo con un bucle for...in o expandirlo en Object.entries: Object.entries(el.dataset).forEach(([key, value]) => { ... }). Esto resulta útil para leer por lotes todos los atributos de datos de un elemento.
Uso de dataset para el estado de los componentes
Almacene el estado ligero de un componente en atributos de datos en lugar de usar campos ocultos o variables de JavaScript. Un componente de pestañas almacena el índice de la pestaña activa en data-active-tab del contenedor, de modo que cualquier script puede leerlo sin una variable compartida.
Delegación de eventos con dataset
En una lista de elementos, adjunte un único listener de clic al contenedor. Al hacer clic, lea el dataset del destino seleccionado: e.target.closest("[data-id]").dataset.id. Un único listener gestiona todos los elementos sin el coste adicional de asociar listeners individualmente.
dataset frente a propiedades personalizadas
Use dataset para los datos que deben poder leerse desde HTML (metadatos renderizados por el servidor y accesibles para los selectores de CSS). Use variables de JavaScript para el estado temporal de ejecución que no necesite ser visible en HTML. Combinar ambos añade complejidad innecesaria.
Precaución con la conversión de tipos
dataset siempre devuelve cadenas. el.dataset.active === true siempre es falso; compare con el.dataset.active === "true" o convierta el valor: el.dataset.active === "true". El estado booleano almacenado en dataset requiere comparar cadenas.
dataset frente a getAttribute
Ambos permiten leer atributos de datos. dataset resulta más práctico para acceder mediante camelCase; getAttribute requiere el nombre completo del atributo, incluido el prefijo "data-". Prefiera dataset en el código moderno; use getAttribute al recorrer atributos que no sean de datos junto con atributos de datos.
Comprobación de conocimientos
¿Cómo aparece el atributo HTML data-user-id en el objeto dataset de JavaScript?
Resumen
La API dataset asigna los atributos data-* a propiedades de JavaScript en camelCase para facilitar su lectura, escritura y eliminación. Permite almacenar el estado de los componentes, aplicar patrones de delegación de eventos y transferir datos del servidor al cliente sin usar campos ocultos ni variables globales.
Preguntas frecuentes
¿La lección «Acceder a data-* con dataset en JavaScript» es gratis?
Sí — el texto completo de «Acceder a data-* con dataset en JavaScript» 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 HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Acceder a data-* con dataset en JavaScript»?
Lea y escriba atributos de datos personalizados mediante la API dataset Practicas HTML 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 HTML Academy?
No se requiere experiencia previa. HTML 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 2 de 4.
¿Cuánto tiempo toma la lección «Acceder a data-* con dataset en JavaScript»?
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 HTML Academy?
Sí. Cada lección de HTML 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
- Sintaxis data-* y convenciones de nomenclatura
- Acceder a data-* con dataset en JavaScript
- Usar data-* con selectores de atributos CSS
- Patrones reales: tooltips y seguimiento de estados