HTMLElement.dataset

This translation is incomplete. Please help translate this article from English

La propiedad dataset en HTMLElement proporciona una interfaz lectura/escritura para obtener todos los atributos de datos personalizados (data-*) de cada uno de los elementos. Está disponible el acceso en HTML y en el DOM.  Dentro del map of DOMString, aparece una entrada por cada atributo de datos. Hay que tener en cuenta que la propiedad dataset puede leerse, pero no modificarse directamente.  En vez de eso, las escrituras deben ser realizadas a través de cada propiedad individual del dataset, que representan a cada atributo correspondiente. Además un HTML data-attribute y su correspondiente DOM dataset.property no comparten el mismo nombre, pero son siempre similares:

  • El nombre de un attributo de datos comienza en HTML con data-. Sólo puede estar formado por letras minúsculas, números y los caracteres: guión (-), punto (.), dos puntos (:) y guión bajo (_) -- NUNCA una letra mayúscula (A a Z).
  • El nombre del atributo en JavaScript será el del correspondiente atributo HTML pero en camelCase, sin guiones, puntos, etc.

In addition to the information below, you'll find a how-to guide for using HTML data attributes in our article Using data attributes.

Name conversion

dash-style to camelCase: A custom data attribute name is transformed to a key for the DOMStringMap entry with the following rules

  • the prefix data- is removed (including the dash);
  • for any dash (U+002D) followed by an ASCII lowercase letter a to z, the dash is removed and the letter is transformed into its uppercase counterpart;
  • other characters (including other dashes) are left unchanged.

camelCase to dash-style: The opposite transformation, that maps a key to an attribute name, uses the following rules:

  • Restriction: A dash must not be immediately followed by an ASCII lowercase letter a to z (before the transformation);
  • a prefix data- is added;
  • any ASCII uppercase letter A to Z is transformed into a dash followed by its lowercase counterpart;
  • other characters are left unchanged.

The restriction in the rules above ensures that the two transformations are the inverse one of the other.

For example, the attribute named data-abc-def corresponds to the key abcDef.

Accessing values

  • Attributes can be set and read by using the camelCase name (the key) like an object property of the dataset, as in element.dataset.keyname
  • Attributes can also be set and read using the object-properties bracket-syntax, as in element.dataset[keyname]
  • The in operator can be used to check whether a given atttribute exists.

Setting values

  • When an attribute is set, it's value is always converted into a string. For example null is converted into the string "null".
  • When you want to remove an attribute, you can use the delete operator.

Sintaxis

  • string = element.dataset.camelCasedName;
  • element.dataset.camelCasedName = string;

  • string = element.dataset[camelCasedName];
  • element.dataset[camelCasedName] = string;

  • Custom data attributes can also be set directly on HTML elements, but attribute names must use the data- syntax above.

Ejemplos

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
const el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

// set the data attribute
el.dataset.dateOfBirth = '1960-10-03'; 
// Result: el.dataset.dateOfBirth === 1960-10-03

delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true

Especificaciones

Especificación Estado Comentario
HTML Living Standard
La definición de 'HTMLElement.dataset' en esta especificación.
Living Standard No change from latest snapshot, HTML 5.1
HTML 5.1
La definición de 'HTMLElement.dataset' en esta especificación.
Recommendation Snapshot of HTML Living Standard, no change from HTML5
HTML5
La definición de 'HTMLElement.dataset' en esta especificación.
Recommendation Snapshot of  HTML Living Standard, initial definition.

Compatibilidad en navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
datasetChrome Soporte completo 8Edge Soporte completo 12Firefox Soporte completo 6IE Soporte completo 11Opera Soporte completo 11Safari Soporte completo 10WebView Android Soporte completo 4.4Chrome Android Soporte completo 18Firefox Android Soporte completo 6Opera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo 1.0

Leyenda

Soporte completo  
Soporte completo

Ver también