¿Cómo uso los atributos data-* para almacenar datos personalizados en los elementos?

Los atributos data-* (leídos como «data guion lo que sea») son una característica estándar de HTML5 que te permite incrustar datos personalizados y privados directamente en tus elementos HTML.

Estos atributos están diseñados para almacenar información que es útil para tu página o aplicación (generalmente para ser utilizada por JavaScript), pero para la cual no existe un atributo o elemento HTML semánticamente más apropiado.

¿Cuál es su propósito y sintaxis?

La idea principal detrás de los atributos data-* es proporcionar una forma válida y estándar de añadir «metadatos» a nivel de elemento sin tener que recurrir a crear atributos no estándar (lo que haría tu HTML inválido) o sobrecargar los atributos class o id.

La sintaxis es sencilla:

• El nombre del atributo debe comenzar siempre con el prefijo data-.
• Después de data-, el nombre puede contener letras (se recomienda usar minúsculas), números, guiones (-), puntos (.), dos puntos (:) y guiones bajos (_). No debe contener letras mayúsculas ASCII (los navegadores las convertirán a minúsculas para el acceso mediante dataset).
• Es común usar el formato «kebab-case» para nombres de atributos con múltiples palabras, como data-id-usuario o data-opcion-seleccionada.
• El valor del atributo es siempre una cadena de texto.

Ejemplo en HTML:

<div id="producto-123"
     class="tarjeta-producto"
     data-producto-id="123"
     data-categoria="electronica"
     data-precio-oferta="49.99"
     data-stock-disponible="true">
  <h3>Teclado Mecánico RGB</h3>
  <p>Un teclado excelente para gaming y escritura.</p>
  <button data-accion="anadir-al-carrito">Añadir al carrito</button>
</div>
Lenguaje del código: PHP (php)

En este ejemplo, hemos almacenado el ID del producto, su categoría, un precio de oferta y si hay stock directamente en el div del producto, además de una acción en el botón.

¿Cómo acceder a los atributos data-* con JavaScript?

La forma más moderna y recomendada de acceder y manipular estos atributos en JavaScript es a través de la propiedad dataset disponible en los elementos HTML. Esta propiedad es un objeto DOMStringMap que contiene todos los atributos data-* del elemento.

Cuando accedes a un atributo data-* a través de dataset, el nombre del atributo se convierte de «kebab-case» (en HTML) a «camelCase» (en JavaScript):

• data-producto-id se convierte en elemento.dataset.productoId
• data-categoria se convierte en elemento.dataset.categoria

Ejemplo en JavaScript:

const productoDiv = document.getElementById('producto-123');

// Leer valores
const idProducto = productoDiv.dataset.productoId; // "123"
const categoria = productoDiv.dataset.categoria;   // "electronica"
const precioOferta = parseFloat(productoDiv.dataset.precioOferta); // Convertir a número si es necesario
const stockDisponible = productoDiv.dataset.stockDisponible === 'true'; // Convertir a booleano

console.log(`ID: ${idProducto}, Categoría: ${categoria}, Precio: ${precioOferta}, Stock: ${stockDisponible}`);

// Modificar un valor
productoDiv.dataset.stockDisponible = 'false';
console.log(productoDiv.dataset.stockDisponible); // "false"

// Añadir un nuevo atributo data-* dinámicamente
productoDiv.dataset.ultimaVista = new Date().toISOString();
console.log(productoDiv.getAttribute('data-ultima-vista')); // Muestra la fecha en el atributo HTML

// También puedes usar getAttribute y setAttribute, aunque dataset es más directo:
// console.log(productoDiv.getAttribute('data-producto-id'));
// productoDiv.setAttribute('data-otra-cosa', 'valor');
Lenguaje del código: PHP (php)

Beneficios de usar data-*

• HTML Válido: Permiten almacenar datos personalizados sin invalidar tu HTML.
• Semántica Clara: Ayudan a mantener otros atributos (como class) limpios y enfocados en su propósito principal (estilos, agrupación semántica ligera).
• Fácil Interacción con JavaScript: La API dataset simplifica enormemente la lectura y escritura de estos datos.
• Flexibilidad: Puedes almacenar cualquier información que necesites como una cadena, incluyendo JSON serializado si necesitas estructuras de datos más complejas (que luego parsearías en JavaScript).

Importante: Los atributos data-* y sus valores son visibles en el código fuente HTML de la página. Por lo tanto, no debes usarlos para almacenar información sensible o secreta que no quieras que sea accesible públicamente (como contraseñas, tokens privados, etc.). Son ideales para datos que tu interfaz de usuario necesita para funcionar o para pasar información simple del servidor al cliente.