0
El atributo data, o más bien, los atributos data-*, introducidos en HTML5, permiten definir datos personalizados asociados a elementos DOM de una forma estandarizada. Si volvemos a HTML4, los datos asociados a elementos DOM eran almacenados en otros atributos, tales como class, id o rel, según las preferencias del desarrollador. No había una recomendación estándar. Incluso había quién definía sus propios atributos (con todo el trabajo extra que ello requería, por ejemplo había que declarar el namespace xmlns propio en la etiqueta <html> para que el documento fuese estrictamente válido).Vayamos con un ejemplo básico. Supongamos que queremos asociar un <div> con la información del juan. Podríamos utilizar el atributo rel:
<div id="card" rel="-juan">
Información del Juan
</div><div id="card" rel="-juan card-type-summary show-avatar-size-480">
Información del Juan
</div>Los atributos data
El atributo data-* permite definir datos personalizados ilimitados y asociarlos a un elemento DOM utilizando cualquier nombre en minúsculas con el prefijo data-. El ejemplo anterior quedaría:
<div id="card" data-="juan" data-card-type="summary" data-show-avatar-size="480">
Información del Juan
</div>Además, has de saber que:
- El valor del atributo data-* puede ser cualquier cadena de texto. Puede contener números pero el tipo de datos es string. Por ejemplo, data-age="30" tendría como valor el texto 30, que es diferente al número 30.
- Los atributos data-* son privados del documento HTML. Esto quiere decir que cualquier sistema externo debería ignorarlos, incluyendo motores de búsqueda. Por tanto, no son adecuados para estructurar datos semánticamente, a diferencia de los microdatos como schema.org u otra especificación1.
- El atributo data-* no debería ser utilizado si existe otro atributo o elemento específico para representar un dato. Por ejemplo, datos de fecha y hora deberían ser incluidos en el elemento <time>.
- El atributo data-* no debería utilizarse como selector CSS o cualquier otro propósito de estilo, pues implica importancia directa para el y, por tanto, esos datos deberían representarse de una forma más accesible.
Trabajando con data-* en jаvascript
Con la introducción de data-* en HTML5 también se introdujeron métodos de y modificación desde jаvascript. En concreto, se introdujo el API dataset (no confundir con datalist), aunque se puede trabajar también con getAttribute y setAttribute, métodos que ya existían antes y no son específicos para los atributos data-*.
Dataset API
El API Dataset permite obtener y establecer los valores de los atributos data-* de un forma muy sencilla. Cada elemento del DOM tiene asociada la propiedad dataset, que es un objeto tipo DOMStringMap con todos sus atributos data-*. Por ejemplo, si tomamos el anterior HTML, podríamos acceder al elemento mediante getElementById y acceder a la propiedad dataset del elemento.
Hay que tener en cuenta que el nombre del atributo en el dataset es transformado eliminando el prefijo data- y del restante se eliminan los guiones y el nombre se transforma a formato camelCase. Por ejemplo, tomemos los atributos data-* del ejemplo anterior. Esta es su correspondencia en el dataset:
- data- →
- data-card-type → cardType (nota como se elimina el prefijo data- y del restante se eliminan los guiones y se transforma a notación camelCase).
- data-show-avatar-size → showAvatarSize (fíjate aquí también en la notación camelCase).
// Obtenemos un referencia al elemento
var card = document.getElementById("card");
// En la propiedad dataset del elemento estarán todos los atributos data-*
var name = card.dataset.;
var cardtype = card.dataset.cardType;
var avatarsize = card.dataset.showAvatarSize;{
: "juan",
cardType: "summary",
showAvatarSize: "480"
}// Asignamos un nuevo valor al elemento cardType del dataset,
// el cual hacía referencia al atributo data-card-type
card.dataset.cardType = "full";delete card.dataset.cardType;getAttribute, setAttribute y removeAttribute
Con estos tres métodos se puede obtener y establecer el valor de los atributos data-* así como eliminarlos, incluso en navegadores que no soportan el dataset API.
// Obtenemos un referencia al elemento
var card = document.getElementById("card");
// Accedemos a los atributos data-*
var name = card.getAttribute( "data-" );
var cardtype = card.getAttribute( "data-card-type" );
var avatarsize = card.getAttribute( "data-show-avatar-size" );
// Establecer el valor de un atributo data-*
card.setAttribute( 'data-card-type', 'full' );
// Eliminar un atributo con removeAttribute, se le asigna el valor null
card.removeAttribute( 'data-card-type' );jQuery .data()
El método .data() de jQuery ofrece una alta compatibilidad entre diversos navegadores y sería el método de elección si utilizas esta biblioteca. Para acceder a los atributos data-* con este método sólo necesitas el nombre del atributo sin el prefijo data-. Es muy importante saber que el método .data() no afecta al DOM, lo que supone una diferencia importante con el dataset API y con los métodos getAttribute, setAttribute y removeAttribute.
// Obtenemos un referencia al elemento
var card = $("#card");
// Accedemos a los atributos data-*
var name = card.data( "" );
var cardtype = card.data( "card-type" );
var avatarsize = card.data( "show-avatar-size" );
// Establecer el valor de un atributo data-*
card.data( 'card-type', 'full' );
// En la alerta saldrá el nuevo valor "full"
alert( card.data( "card-type" ) );
// removeData elimina un data previamente almacenado con el método .data()
// Como .data no afecta al DOM, tras utilizar removeData el valor vuelve al inicial "summary"
card.removeData( 'card-type' );
// En la alerta saldrá el valor inicial "summary"
alert( card.data( "card-type" ) );// data será un objeto con todos los atributos data-*
var data = $("#card").data();
var name = data.;
var cardtype = data.cardType;
var avatarsize = data.showAvatarSize;<div id="miDiv" data-months="[1, 5, 12]">
</div>var months = $('#miDiv').data( 'months' ); // months = [1, 5, 12]Referencias
- W3: Embedding custom non-visible data with the data-* attributes
- HTMLElement.dataset
- jQuery API: .data()
Comentarios