Utilizando data attributes
==========================

O HTML5 (en-US) foi criado pensando na extensibilidade dos dados que precisam ser associados a um determinado elemento mas não necessariamente tem um significado definido. Atributos data-\* nos permite armazenar informações extras em elementos HTML padrões e semânticos, sem a necessidades de hacks como classList (en-US), atributos fora do padrão, propriedades extras no DOM ou o método depreciado setUserData.

Sintaxe HTML
------------

A sintaxe é simples. Qualquer atributo de qualquer elemento no qual o nome do atributo inicia com `data-` é um atributo data. Digamos que você possui um article e quer armazenar informações extras que não possuem nenhuma representação visual. Use atributos data para isso:


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

Acesso no JavaScript
--------------------

Ler os valores destes atributos via JavaScript é muito simples também. Você pode lê-los usando `getAttribute()` com o nome html completo, mas a forma padrão provê uma alternativa mais simples: um `DOMStringMap` pode ser lido através da propriedade `dataset` (en-US).

Para obter o atributo data através do objeto `dataset`, acesse a propriedade utilizando a parte do nome do atributo após o prefixo `data-` (note que o hífen é convertido para camelCase).


```js
var article = document.getElementById("electriccars");

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
```


Cada propriedade é uma String e pode ser lida e escrita. No exemplo acima a atribuição `article.dataset.columns = 5` iria alterar esse atributo para "5".

Acesso no CSS
-------------

Note que os atributos data são atributos em HTML puro, e você pode inclusive acessá-los via CSS. Por exemplo, para mostrar o elemento pai em um artigo, você pode usar conteúdo gerado em CSS com a função `attr()`:


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


Pode-se também usar os seletores de atributos em CSS para alterar estilos de acordo com o atributo data:


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


Pode-se tudo isso em funcionamento neste exemplo JSBin.

Atributos data também podem ser utilizados para conter informações que mudam constantemente, como a pontuação em um jogo. Usando seletores CSS e acesso com JavaScript permite que se construa efeitos excelentes sem ter que escrever suas próprias rotinas de display. Veja esta tela para um exemplo utilizando conteúdo gerado e transições CSS (exemplo JSBin).

Uma vez que valores data são strings, todos os valores devem estar entre aspas ou então a estilização não fará efeito.

Issues
------

Não armazene conteúdo que deve estar visível e acessível nos atributos data porque tecnologias assistivas podem não acessá-los. Além disso, motores de busca podem não indexar os valores dos atributos data.

Os principais issues a serem considerados são com suporte e performance no Internet Explorer. O Internet Explorer 11+ provê suporte para o padrão, mas todas as versões anteriores não suportam `dataset`. Para suporte ao IE 10 e anteriores, deve-se acessar atributos data através de `getAttribute()` . E ainda, a performance de leitura dos atributos data é ruim, comparada com o armazenamento em um data warehouse JS. O uso de `dataset` é até pior que a leitura dos dados com `getAttribute()`.

Apesar do que foi colocado, para metadados customizados associados a elementos, eles são uma ótima solução.

No Firefox 49.0.2 (e talvez em versões anteriores/posteriores), os atributos data que excederem 1022 caracteres não serão lidos pelo Javascript (EcmaScript 4).

Veja também
-----------

* Este artigo é uma adaptação de Usando atributos data em JavaScript e CSS no hacks.mozilla.org.
* Como usar atributos data em HTML5 (Sitepoint)