El Atributo DATA-*

El atributo data-* en HTML permite almacenar información personalizada directamente en elementos HTML, facilitando la interacción con JavaScript y CSS sin alterar la semántica del documento. Aquí un paso a paso para dominarlo:

Sintaxis Básica

Los atributos data-* se definen con el prefijo data- seguido de un nombre personalizado (kebab-case):

<div 
  id="userCard" 
  data-user-id="123" 
  data-user-role="admin" 
  data-registration-date="2023-10-05"
>
  Usuario: John Doe
</div>

Acceder a los Datos con JavaScript

Usa la propiedad dataset del elemento para leer o modificar valores:

const userCard = document.getElementById('userCard');

// Leer datos
console.log(userCard.dataset.userId); // "123"
console.log(userCard.dataset.userRole); // "admin"

// Modificar datos
userCard.dataset.registrationDate = '2024-01-01';

Nota:

• Los nombres en kebab-case (ej: data-user-id) se convierten a camelCase en dataset (userId).

• Los valores siempre son strings. Si necesitas números, usa parseInt() o parseFloat().

Usar data-* en CSS

Aplica estilos condicionales usando selectores de atributo:

CSS:

/* Estilo para usuarios administradores */
[data-user-role="admin"] {
  border: 2px solid gold;
  background-color: #ffeaa7;
}

CSS:

/* Ocultar elementos con fecha anterior a 2024 */
[data-registration-date^="2023"] {
  display: none;
}

Casos de Uso Prácticos

Ejemplo 1: Filtrar una Lista de Productos

HTML:

<ul id="products">
  <li data-product-id="101" data-price="29.99" data-category="electronics">Laptop</li>
  <li data-product-id="102" data-price="9.99" data-category="books">HTML Guide</li>
</ul>

JavaScript:

// Filtrar productos electrónicos con precio < $30
const products = document.querySelectorAll('#products li');
products.forEach(product => {
  const price = parseFloat(product.dataset.price);
  const category = product.dataset.category;

  if (category === 'electronics' && price < 30) {
    product.style.backgroundColor = '#e3f2fd';
  }
});

Ejemplo 2: Validar Formularios

HTML:

<input 
  type="password" 
  id="password" 
  data-min-length="8" 
  data-require-symbol="true"
>
<button onclick="validatePassword()">Validar</button>

JavaScript:

function validatePassword() {
  const passwordInput = document.getElementById('password');
  const minLength = parseInt(passwordInput.dataset.minLength);
  const requiresSymbol = passwordInput.dataset.requireSymbol === 'true';

  if (passwordInput.value.length < minLength || (requiresSymbol && !/[!@#$%^&*]/.test(passwordInput.value))) {
    alert('Contraseña inválida');
  }
}

Buenas Prácticas

• Nombres claros: Usa nombres descriptivos (ej: data-product-price, no data-pp).

• Datos simples: Evita almacenar objetos complejos (usa JSON.stringify() si es necesario).

• No abuses: Prioriza atributos HTML estándar (como id, class, o aria-*) cuando sea posible.

Soporte en Navegadores

• Compatible con todos los navegadores modernos (Chrome, Firefox, Safari, Edge).

• En IE11+, funciona pero requiere polyfills para métodos avanzados de dataset.

Conclusión:

El atributo data-* es una herramienta poderosa para vincular información específica a elementos HTML, mejorando la interactividad sin sacrificar accesibilidad o semántica. ¡Ideal para proyectos donde necesitas almacenar metadatos de forma limpia y eficiente!