HTML5 está diseñado teniendo en cuenta la extensibilidad de los datos que deberían estar asociados con un elemento en particular pero no necesitan tener un significado definido. Los atributos data-*  nos permiten almacenar información adicional sobre elementos HTML semánticos estándar sin otros hacks como atributos no estándar, propiedades adicionales en el DOM, o Node.setUserData().

Sintaxis HTML

La sintáxis es simple. Cualquier atributo en cualquier elemento cuyo nombre de atributo comience con data- es un atributo de datos. Digamos que tiene un artículo y desea almacenar información adicional que no tiene ninguna representación visual. Solo usa atributos data para eso:

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

Acceso a través de JavaScript

Leer los valores de estos atributos en JavaScript también es muy sencillo. Puede usar getAttribute() con su nombre HTML completo para leerlos, pero el estándar define una forma más simple: un DOMStringMap puede leer a través de una propiedad dataset.

Para obtener un atributo data a través del dataset del objeto, obtenga la propiedad por la parte del nombre del atributo despues de data- (tenga en cuenta que los guiones son convertidos en camelCase).

var article = document.getElementById('electriccars');
 
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

Cada propiedad es una cadena y se puede leer y escribir. En el caso anterior, establecer article.dataset.columns = 5 cambiaría ese atributo a "5".

Acceso a través de CSS

Tenga en cuenta que, debido a que los atributos de datos son atributos simples de HTML, incluso puede acceder a ellos desde CSS. Por ejemplo, para mostrar los data-parent en el artículo, puede uesar el contenido generado en CSS con la función attr:

article::before {
  content: attr(data-parent);
}

También puede usar los selectores de atributos en CSS para cambiar los estilos de acuerdo a las priopiedades de datos:

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

Puede ver todo esto trabajando junto en este ejemplo de JSBin.

Los atributos de datos también se pueden almacenar para que contengan información que cambia constantemente, como los puntajes en un juego. Usando los selectores de CSS y el acceso a JavaScript aquí, esto le permite crear algunos efectos ingeniosos sin tener que escribir sus propias rutinas de visualización. Consulte este screencast para ver un ejemplo utilizando contenido generado y transacciones CSS (Ejemplo JSBin).

Los valores de datos son cadenas de caracteres. Los valores numéricos deben ser citados en el selector para que el estilo surta efecto.

Problemas

No almacene el contenido que debería ser visible y accesible en los atributos de datos, ya que las tecnologías de asistencia, no pueden acceder a ellos. Ademas, los rastreadores de búsqueda no pueden indexar los valores de los atributos de datos.

Los principales problemas a considerar son el soporte y rendimiento en Internet Explorer. Internet Explorer 11 y superiores, proporcionan soporte para el estándar, pero todas las versiones anteriores no son compatibles con dataset. Para admitir IE 10 e inferiores, debe acceder a los atributos de datos con getAttribute() en su lugar. Ademas, el rendimiento de lectura de los atributos de datos en comparación con el almacenamiento de estos datos en un objeto JS normal es deficiente.

Dicho esto, sin embargo, para metadatos asociados a elementos personalizados, son una gran solución.

En Firefox 49.0.2 (y quizás versiones anteriores), los atributos de datos que exceden los 1022 caracteres no serán leídos por Javascript (EcmaScript 4).

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: laatcode
Última actualización por: laatcode,