Atributos personalizados en JavaScript

En HTML está permitido agregar atributos propios y personalizados a las etiquetas. Tales atributos deben comenzar con data-, y luego puede ir cualquier nombre de atributo que le sea conveniente.

Los atributos personalizados pueden ser utilizados de una gran cantidad de maneras diferentes. Muchas de estas formas las estudiaremos más adelante en el tutorial, y aún más podrá inventar por su cuenta en el futuro.

El acceso a tales atributos no está implementado de forma estándar. No se puede simplemente acceder a una propiedad del elemento con el mismo nombre, como lo hacíamos antes, sino que se debe usar la propiedad especial dataset, después de la cual, mediante un punto, se escribe el nombre del atributo sin data-. Por ejemplo, si nuestro atributo se llama data-test, para acceder a él escribiremos elem.dataset.test, donde elem es la variable con nuestro elemento.

Veamos un ejemplo. Supongamos que tenemos el siguiente elemento:

<div id="elem" data-num="1000"></div>

Mostremos en pantalla el valor de su atributo data-num:

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // mostrará 1000

Y ahora asignemos a este atributo otro valor:

let elem = document.querySelector('#elem');
elem.dataset.num = 123;

Dado el siguiente código:

<div id="elem" data-text="str">text</div>

Haga que al hacer clic en el div, al final de su texto se agregue el contenido de su atributo data-text.

Se dan divs que contienen en el atributo data-num su número de orden:

<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>

Haga que al hacer clic en cualquiera de los divs, se escriba su número de orden al final.

Se da un botón. Haga que este botón cuente la cantidad de clics en él, registrándolos en algún atributo personalizado. Que al hacer clic en otro botón en la pantalla se muestre cuántos clics se han hecho en el primer botón.

Se da un input:

<input id="elem" data-length="5">

En este input, en el atributo data-length se encuentra la cantidad de caracteres que se deben ingresar en el input. Haga que al perder el foco, si la cantidad de caracteres ingresados no coincide con la especificada, se muestre un mensaje sobre ello.

Se da un input:

<input id="elem" data-min="5" data-max="10">

En este input, los atributos data-min y data-max contienen un rango. Haga que al perder el foco, si la cantidad de caracteres ingresados no cae dentro de este rango, se muestre un mensaje sobre ello.