Inicio Atributos Personalizados data-* en JavaScript con dataset

Atributos Personalizados data-* en JavaScript con dataset

Author: admin admin
junio 9, 2025

En aplicaciones web modernas a menudo necesitamos almacenar datos adicionales en los elementos HTML para ser usados por JavaScript, sin afectar el diseño ni el comportamiento por defecto del navegador.

Para esto, HTML nos ofrece una solución elegante y semántica: los atributos personalizados data-*, que pueden ser accedidos directamente desde JavaScript a través de la propiedad dataset. Esta técnica permite guardar información específica de cada elemento sin sobrecargar clases, IDs o estructuras complejas.

En este artículo aprenderás cómo declarar, acceder, modificar y eliminar atributos data-* desde JavaScript, y por qué dataset es la forma recomendada de trabajar con ellos.

Qué son los atributos data-*

Los atributos personalizados data-* son entidades que nos permiten asociar información adicional a cualquier elemento HTML sin alterar su estructura ni interferir con los atributos estándar.

Cada atributo debe comenzar con data- seguido por un nombre libre, por ejemplo:

html
<div id="producto" data-id="12345" data-categoria="libros"></div>

Estos datos no afectan la visualización ni el comportamiento del elemento, pero quedan disponibles para JavaScript de manera clara y estructurada.

Acceder a data-* con dataset

JavaScript proporciona la propiedad dataset para acceder a todos los atributos personalizados data-* de un elemento como si fueran propiedades de un objeto.

Partamos del siguiente HTML:

html
<button id="comprar" data-producto-id="987" data-precio="29.99">
  Comprar ahora
</button>

Podemos acceder a esos datos desde JavaScript de esta forma:

javascript
const boton = document.getElementById("comprar");

const productoID = boton.dataset.productoId; // "987"
const productoPrecio = boton.dataset.precio;     // "29.99"

Cada atributo data-* se convierte automáticamente en una propiedad dentro de dataset, transformando los guiones en notación camelCase. Por ejemplo:

  • data-user-id → dataset.userId
  • data-categoria → dataset.categoria

Este enfoque mejora la legibilidad y mantiene el código limpio y semántico.

Nota: Todos los valores obtenidos desde dataset son cadenas (string), incluso si representan números, booleanos u otros tipos de datos.

Modificar valores de data-*

Modificar un atributo data-* usando dataset es tan fácil como asignar un nuevo valor a su propiedad correspondiente. Si el atributo no existe, será creado automáticamente.

Continuando con el botón anterior:

javascript
boton.dataset.precio = "24.99";
boton.dataset.productoId = "998";

Esto actualizará el HTML del botón de la siguiente manera:

html
<button id="comprar" data-producto-id="998" data-precio="24.99">
  Comprar ahora
</button>

También es posible usar setAttribute(), pero dataset es más directo, legible y menos propenso a errores al manipular nombres de atributos largos o con guiones.

Eliminar un atributo data-*

Aunque dataset permite modificar o crear atributos personalizados, no ofrece una forma directa de eliminarlos. Para ello, debemos usar removeAttribute().

Por ejemplo, si queremos eliminar el atributo data-precio:

javascript
boton.removeAttribute("data-precio");

Después de esta instrucción, ese atributo ya no estará disponible en el HTML ni en dataset.

Cuándo usar dataset en lugar de otros atributos

Los atributos data-* son ideales cuando:

  • Necesitas pasar información desde HTML a JavaScript sin afectar la estructura del DOM.
  • Quieres mantener datos relacionados con el contexto del elemento, como ID, tipo, rol, nivel, estado, etc.
  • Necesitas que el HTML conserve su significado semántico y sea compatible con validaciones W3C.

Evita sobrecargar atributos como class, title o id para guardar valores temporales o información contextual. Usar dataset es más limpio, seguro y mantenible.

Consideraciones importantes

  • Los valores accedidos desde dataset son siempre strings. Si necesitas un número o booleano, deberás convertirlo manualmente.
  • dataset solo accede a atributos que empiezan con data-. No funciona con otros atributos personalizados arbitrarios.
  • Al convertir nombres con guiones a propiedades, se utiliza camelCase. Si accedes directamente a un nombre con guión usando notación de punto, causará un error.

Conclusión

Los atributos personalizados data-* y la propiedad dataset ofrecen una forma eficiente y semántica de almacenar y manipular datos adicionales directamente en los elementos HTML.

En este artículo aprendiste a:

  • Declarar atributos data-* correctamente en HTML.
  • Acceder a ellos con dataset de forma sencilla y legible.
  • Modificarlos y, cuando sea necesario, eliminarlos.
  • Aplicar buenas prácticas para mantener el código limpio, semántico y escalable.
+1
0
+1
0