Uso de los atributos de datos de HTML5

HTML5 introdujo los atributos de datos para permitirle almacenar datos personalizados directamente dentro de elementos HTML estándar.

Considérelos compartimentos secretos en sus etiquetas HTML, donde se guarda información adicional que no está destinada a mostrarse. Esto hace que su HTML sea más semántico y que su JavaScript sea más potente, ya que puede asociar los datos directamente a los elementos.

Antes de los atributos de datos, los desarrolladores solían utilizar clases, identificadores o incluso campos de entrada ocultos para almacenar datos específicos de los elementos. Sin embargo, estos métodos presentan inconvenientes:

• Clases/identificadores: a menudo se utilizan incorrectamente para aplicar estilos o seleccionar elementos, en lugar de almacenar datos.
• Campos de entrada ocultos: saturan el DOM y están destinados al envío de formularios.

Los atributos de datos ofrecen una forma limpia y estándar de insertar datos personalizados directamente donde corresponden.

Todos los atributos de datos deben comenzar con el prefijo data-. Después del prefijo, puede asignar el nombre que desee al atributo utilizando letras minúsculas, números, guiones y guiones bajos.

• data-id="123"
• data-status="active"
• data-item-price="9.99"

Este prefijo estándar garantiza que sus atributos personalizados no entren en conflicto con atributos HTML existentes o futuros.

Puede añadir fácilmente atributos de datos directamente en el marcado HTML. Al igual que cualquier otro atributo, tienen un nombre y un valor.

Aquí tiene un ejemplo: añadiremos data-product-id y data-category a un botón.

jQuery proporciona un método muy práctico, .data(), para recuperar valores de los atributos de datos. Analiza automáticamente el prefijo data-.

Para obtener un atributo específico, pase su nombre (sin data-) a .data().

El método .data() no solo sirve para leer datos; también puede utilizarlo para actualizar o añadir nuevos atributos de datos dinámicamente.

Pase dos argumentos: el nombre del atributo (sin data-) y el nuevo valor. Esto actualiza la caché interna de datos de jQuery y, en el caso de los atributos de datos de HTML5, también actualiza el propio atributo del DOM.

Una de las funciones más útiles de .data() de jQuery es la conversión automática de tipos. Al recuperar atributos de datos, jQuery intenta convertir los valores de texto en tipos de JavaScript más apropiados.

• "true" y "false" se convierten en valores booleanos.
• "123" se convierte en un número.
• "[1,2]" y "{name:'X'}" se convierten en matrices u objetos (si son JSON válido).

Esto evita tener que analizar los datos manualmente.

Los atributos de datos son perfectos para gestionar el estado de los elementos de la interfaz de usuario. Creemos un botón de alternancia sencillo que cambie su texto y estado según un atributo data-active.

Haga clic en el botón para ver cómo cambia su estado.

Tenga en cuenta estas prácticas recomendadas para utilizar los atributos de datos de forma limpia y eficaz:

• Úselos para el estado de la interfaz: son ideales para almacenar estados temporales de la interfaz, configuraciones o referencias.
• Evite los datos grandes: no están pensados para almacenar conjuntos de datos enormes; mantenga los valores concisos.
• Use nombres semánticos: elija nombres claros y descriptivos (por ejemplo, data-user-id, no data-u).
• No sustituyen a los datos del backend: siga obteniendo los datos complejos del servidor; no los inserte todos en la página.

Considere el siguiente HTML y JavaScript:

<div id="item" data-price="25.50" data-available="true">
  Product Info
</div>

<script>
  $(document).ready(function() {
    const itemDiv = $('#item');
    const price = itemDiv.data('price');
    const available = itemDiv.data('available');
    
    itemDiv.data('stock', 100);
    const stock = itemDiv.data('stock');
    
    console.log(typeof price);
    console.log(typeof available);
    console.log(stock);
  });
</script>

¿Qué se mostrará en la consola?

¡Enhorabuena! Ha aprendido a aprovechar el potencial de los atributos de datos de HTML5 con jQuery.

• Ofrecen una forma limpia de insertar datos personalizados directamente en HTML.
• El método .data() de jQuery facilita enormemente la recuperación y actualización de estos datos.
• La conversión automática de tipos simplifica la gestión de datos.
• Son excelentes para gestionar el estado de la interfaz y crear interfaces dinámicas.

¡Siga practicando y descubrirá innumerables formas de hacer que sus aplicaciones web sean más inteligentes e interactivas!