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-75
en energy = 75
).
Afortunadamente, esto ya no es necesario, gracias a los atributos dataset
. Estos nuevos atributos de datos personalizados constan de dos partes:
data-
. No debe contener letras mayúsculas.<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.
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.
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:
<video>
.Y éstas algunas de las situaciones para las que no se deben usar los data attributes:
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