Curso HTML 14.3 Atributos de datos (data-*) para conectar HTML y JS

14.3 Atributos de datos (data-*) para conectar HTML y JS

Los atributos personalizados data-* forman parte de HTML5. Permiten almacenar información privada (metadatos) en los elementos del DOM sin romper la validación ni la semántica HTML. Después, JavaScript puede leer y modificar esos datos de manera sencilla a través de la propiedad dataset o los métodos getAttribute y setAttribute.

1. Sintaxis y reglas

• El nombre del atributo comienza por data- seguido de un nombre en minúsculas separado por guiones (data-user-id, data-producto-categoria).
• No puede contener mayúsculas, espacios ni caracteres especiales distintos de -.
• Los datos siempre se almacenan como cadenas de texto.
• El navegador ignora atributos desconocidos que no sigan la sintaxis data-*.

2. Acceso desde JavaScript

Cada elemento del DOM expone una propiedad dataset, que es un DOMStringMap. Los nombres de atributos se transforman así:

Alternativamente, también podemos usar getAttribute('data-...') o setAttribute('data-...', valor).

3. Lectura de datos con dataset y getAttribute

<!-- HTML con datos personalizados -->
<ul id='lista-productos'>
  <li data-id='101' data-nombre='Camiseta' data-precio='19.99'>Camiseta básica</li>
  <li data-id='102' data-nombre='Pantalón' data-precio='29.50'>Pantalón vaquero</li>
</ul>

<script>
  // Seleccionamos todos los elementos li
  const items = document.querySelectorAll('#lista-productos li');

  items.forEach(item => {
    // Lectura mediante dataset (propiedades camelCase)
    const id    = item.dataset.id;         // '101'
    const nombre= item.dataset.nombre;     // 'Camiseta'
    const precio= parseFloat(item.dataset.precio); // 19.99 (convertido a número)

    console.log(`Producto ${id}: ${nombre} cuesta €${precio}`);

    // Lectura con getAttribute
    const precioOrig = item.getAttribute('data-precio'); // '19.99'
    console.log('Precio original texto:', precioOrig);
  });
</script>

4. Modificación dinámica y escritura

• Modificar dataset actualiza el atributo en el HTML subyacente.
• Podemos crear nuevos atributos data-* en tiempo de ejecución.
• Saber que todos los valores son cadenas ayuda a evitar sorpresas.

<!-- HTML de partida -->
<button id='boton-pedir' data-producto='Café'>Pedir Café</button>

<script>
  const boton = document.getElementById('boton-pedir');

  // Añadir un nuevo dato
  boton.dataset.cantidad = '2'; // crea data-cantidad='2'
  boton.dataset.precio = '1.50';

  // Actualizar un dato existente
  boton.dataset.producto = 'Café Latte'; // actualiza data-producto

  // Reflejo en HTML
  console.log(boton.outerHTML);
  // <button id='boton-pedir' data-producto='Café Latte' data-cantidad='2' data-precio='1.50'>Pedir Café</button>

  // También con setAttribute
  boton.setAttribute('data-modo', 'express');
  console.log(boton.dataset.modo); // 'express'
</script>

5. Eliminación de atributos

Para eliminar un atributo data-*, podemos usar delete en dataset o removeAttribute:

<script>
  // Usando delete
  delete boton.dataset.precio;           // quita data-precio
  // Equivalente
  boton.removeAttribute('data-precIo'); // no funciona por nombre mal capitalizado
  boton.removeAttribute('data-precio'); // quita data-precio
</script>

6. Uso avanzado: JSON y estructuras complejas

Si necesitamos pasar objetos complejos al JS, podemos serializarlos como JSON. Luego, JSON.parse nos devolverá la estructura original:

<div id='config' data-opciones='{'modo':'oscuro','lista':['A','B','C'],'controles':true}'>...</div>

<script>
  const cont = document.getElementById('config');
  const opcionesStr = cont.dataset.opciones;
  try {
    const opciones = JSON.parse(opcionesStr);
    console.log(opciones.modo);       // 'oscuro'
    console.log(opciones.lista);      // ['A','B','C']
    console.log(opciones.controles);  // true
  } catch(e) {
    console.error('JSON inválido en data-opciones');
  }
</script>

7. Consideraciones y buenas prácticas

• No abusar de datos pesados; cargan el DOM con cadenas largas.
• Validar siempre la conversión de tipos (números, booleanos, objetos JSON).
• Para grandes volúmenes, mejor vincular datos en estructuras JS en lugar de inflar atributos.
• Los cambios en dataset son reflejados inmediatamente en el atributo HTML.
• Evitar nombres ambiguos: usar prefijos claros (data-user-*, data-order-*).

Con estos detalles y ejemplos profundos, ya tienes las claves para emplear los atributos data-* como puente robusto entre tu marcado HTML y la lógica en JavaScript.