HTML5 #3: data-* attributes

Olá pessoal, tudo certo?
Continuando os posts de HTML5, hoje falarei de custom data attributes. Não sei se você em algum momento já precisou utilizar algum atributo como class ou rel para armazenar algum valor e depois busca-lo pelo javascript! Bem, se você precisou, não precisa mais! 😀 Se você não precisou, nunca precisará! 🙂

A API!

A especificação encontra-se na especificação de elementos, neste link. Como é dito na especificação, data-* attributes devem ser utilizados para guardar valores privados para a página/aplicação. Os data-* attributes devem ser precedidos pelo prefixo data-, seguidos pelo nome do atributo desejado.


<option data-img="minha-imagem.png" value="Abc">Ver imagem Abc</option>

E agora, como acessar os data-*attributes por javascript? A forma mais prática é por getAttribute(), porém a especificação sugere um atributo próprio chamado dataset. Se optar por usar getAttribute(), todos os navegadores suportam esta API, a única limitação entre os navegadores fica por parte do atributo dataset. O atributo dataset é um conjunto chave/valor, onde a chave é o atributo sem o prefixo data- e em CamelCasese necessário.


el.getAttribute("data-example-txt");
// quando existem hifens, a chave no atributo dataset é renomeada com CamelCase
el.dataset.exempleTxt;

el.getAttribute("height");
el.dataset.heght;

Os data-* attributes também podem ser utilizados com querySelector e querySelectorAll.


document.querySelectorAll("[data-my-example-img]");

Um cuidado que deve ser levado em conta ao utilizar a API, é o uso de prefixos quanto aos atributos que deseja-se guardar. Atributos como data-height são desencorajados, a melhor forma de uso seria data-my-app-height ou data-my-prefix-height. Visto que se deixar apenas data-height e um componente de terceiro fizer o mesmo, poderá existir algum problema de conflito.

O exemplo!

Criei um pequeno exemplo, mostrando o uso de data-* attributes. A ideia é mostrar as formas de acesso e um possível uso dos data-* attributes. O fonte também está no github.

O fim do post!

Custom data attributes é uma grande API do HTML5, visto que agora pode-se guardar dados na página em atributos quando não existem elementos que o uso deste fosse correto. O uso de data-* attributes pode implicar em uma diminuição de requisições Ajax buscando valores que podem ser armazenados em um elemento da página ou outros ganhos em performance. Você pode ver o status da implementação da API pelos navegadores neste link. Por hoje é isso, abraço pessoal!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s