Capítulo 5 Dataset

Gracias a HTML5, ahora tenemos la posibilidad de incorporar atributos de datos personalizados en todos los elementos HTML. Hasta la aparición de estos atributos, la manera de lograr un comportamiento similar (asociar datos a elementos), era incluir estos datos como clases CSS en los elementos, y acceder a ellos a través de jQuery, de una manera como la siguiente:

<input class="spaceship shields-5 lives-3 energy-75">

Una vez definidos los "atributos", era necesario acceder a estas clases y realizar un trabajo extra para extraer su nombre y su valor (convertir energy-75en energy = 75).

Afortunadamente, esto ya no es necesario, gracias a los atributos dataset. Estos nuevos atributos de datos personalizados constan de dos partes:

  • Nombre del atributo: el nombre del atributo de datos debe ser de al menos un carácter de largo y debe tener el prefijo data-. No debe contener letras mayúsculas.
  • Valor del atributo: el valor del atributo puede ser cualquier string o cadena. Con esta sintaxis, podemos añadir cualquier dato que necesitemos a nuestra aplicación, como se muestra a continuación:
<ul id="vegetable-seeds">
  <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
  <li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
  <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>
</ul>

Ahora podemos usar estos datos almacenados en nuestro sitio para crear una experiencia de usuario más rica y atractiva. Imagina que cuando un usuario hace clic en un "vegetable", una nueva capa se abre en el explorador que muestra la separación de semillas e instrucciones de siembra. Gracias a los atributos data- que hemos añadido a nuestros elementos <li>, ahora podemos mostrar esta información al instante sin tener que preocuparnos de hacer ninguna llamada AJAX y sin tener que hacer ninguna consulta a las bases de datos del servidor.

Prefijar los atributos personalizados con data- asegura que van a ser completamente ignorados por el agente de usuario. Por lo que al navegador y al usuario final de la web se refiere, no existe esta información.

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements. These attributes are not intended for use by software that is independent of the site that uses the attributes. Every HTML element may have any number of custom data attributes specified, with any value.

W3C Specification

Esto es, los atributos de datos personalizados están destinadas a almacenar los datos personalizados que son de interés exclusivamente para la página o la aplicación, para los que no hay atributos o elementos más apropiados. Estos atributos no están destinados para un uso externo (a través de un software independiente al sitio que los utiliza). Cada elemento HTML puede tener un número indefinido de atributos de datos personalizados, con cualquier valor.

5.1 Utilización de los data attributes

Como los atributos de datos personalizados son válidos en HTML5, pueden ser utilizados en cualquier navegador que soporte HTML5 doctypes. Estas son algunas de las formas en las que pueden ser utilizados:

  • Para almacenar la altura inicial o la opacidad de un elemento que pudiera ser necesaria en los cálculos de animación JavaScript posteriores.
  • Para almacenar los parámetros para una película de Flash que se carga a través de JavaScript.
  • Para almacenar los datos estadísticos de una web.
  • Para almacenar los datos acerca de la salud, munición o vida de un elemento en un juego JavaScript.
  • Para poder añadir subtítulos a un <video>.

Y éstas algunas de las situaciones para las que no se deben usar los data attributes:

  • Los atributos de datos personalizados no deben usarse si hay un atributo o elemento existente que es más adecuado.
  • Éstos tampoco tienen la intención de competir con microformatos. En la especificación queda claro que los datos no están pensados para ser usados públicamente. El software externo no debe interactuar con ellos.
  • La presencia/ausencia de un atributo de datos personalizado no se deben utilizar como una referencia para los estilos de CSS. Si se hace, podría sugerir que los datos que se están almacenando son de importancia inmediata para el usuario y se deberían marcar de una manera más accesible.

5.2 data attributes y JavaScript

Ahora que comprendemos el funcionamiento de los atributos de datos personalizados y cuándo se utilizan, deberíamos centrarnos en cómo interactuar con ellos utilizando JavaScript.

Si quisiéramos recuperar o actualizar estos atributos utilizando JavaScript, podríamos hacerlo utilizando los métodos getAttribute y setAttribute.

<div id="strawberry-plant" data-fruit="12"></div>
<script>
// "Getting" data-attributes using getAttribute
var plant = document.getElementById("strawberry-plant");
var fruitCount = plant.getAttribute("data-fruit"); // fruitCount = "12"
 
// "Setting" data-attributes using setAttribute
plant.setAttribute("data-fruit","7"); // Pesky birds
</script>

Este método funcionará en todos los navegadores modernos, pero no es la manera en la que los data attributes deben ser utilizados. La mejor manera para lograr lo mismo es mediante el acceso a la propiedad dataset de un elemento. Al utilizar este método, en lugar de utilizar el nombre del atributo completo, se puede prescindir del prefijo data- y referirse a los atributos de datos personalizados utilizando directamente los nombres que se han asignado.

<div id="sunflower" data-leaves="47" data-plant-height="2.4m"></div>
<script>
// "Getting" data-attributes using dataset
var plant = document.getElementById("sunflower");
var leaves = plant.dataset.leaves; // leaves = 47;
 
// "Setting" data-attributes using dataset
var tallness = plant.dataset.plantHeight; // "plant-height" -> "plantHeight"
plant.dataset.plantHeight = "3.6m";  // Cracking fertiliser
</script>

Si en algún momento un atributo data- específico ya no es necesario, es posible eliminarlo por completo del elemento DOM estableciendo un valor nulo.

plant.dataset.leaves = null;

En conclusión, los data attributes personalizados son una buena manera de simplificar el almacenamiento de datos de la aplicación en las páginas web.

Ejercicio 5

Ver enunciado