Atributos de dados em HTML 5

Na época do HTML4 / XHTML, o uso de rele os classatributos no DOMeram bastante extensos para a seleção de DOM e armazenamento arbitrário de dados no navegador.

Por exemplo, se um item da lista precisa indicar o usuário que teve 7 mensagens de notificação, às vezes usamos os atributos de classe para armazenar os dados para o usuário, conforme mencionado abaixo. É assim que alguns praticavam e outros tinham outras maneiras diferentes.

<li class="item user_john message_notify_7"></li>

Com a invenção do HTML 5, a programação HTML e Javascript tornou-se tão flexível, fácil e amigável ao desenvolvedor e, graças a ela, não podemos armazenar dados artibitários usando os atributos de dados que ela fornece.

Atributos de dados

Os atributos data- * nos permitem armazenar informações extras sobre elementos HTML semânticos padrão sem poluir o nome da classe.

A sintaxe para atributos de dados é bastante fácil. Podemos definir atributos de dados para o exemplo acima como:

<li class="item" data-user="john" data-message-notify="7"></li>

Não é mais limpo do que o que fizemos anteriormente. A especificação para atributos de dados customizados afirma que qualquer atributo que comece com “dados-” será tratado como uma área de armazenamento para dados privados. Isso nos permite manter um código HTML mais limpo e também armazenar algumas informações extras que não têm nenhuma representação visual.

Acesso Javascript

Javascript nos permite acessar essas informações facilmente usando a propriedade dataset que retorna um DOMStringMap .

Vejamos um exemplo simples que nos permite recuperar todos os atributos de dados do exemplo acima. Vou adicionar um idatributo para que seja fácil entender o exemplo inicial.

<li id='itemJohn' class="item" data-user="john" data-message-notify="7"></li>

var item = document.getElementById('itemJohn');
var custom_attributes = item.dataset;

//-> data-user="john"
//-> data-message-notify="7"

JQuery Accessor

JQuery fornece o método data () que retorna um Mapa de String de todos os atributos de dados definidos em um objeto DOM específico. Vamos dar um exemplo de como recuperar os atributos personalizados usando JQuery.

var custom_attributes = $('#item').data();
//returns -> { user:john, message-notify:7}

O data () adicionalmente leva 2 parâmetros opcionais que ajudam na seleção específica dos atributos e dos valores de armazenamento.

Obtendo valores

var user_notifications = $('#userJohn').data('message-notify');
//returns -> 7

Definindo Valores

$('#userJohn').data('message-notify',10);

O exemplo acima atualizará os atributos de dados de 7 a 10.message-notify

Se um determinado atributo de dados não estiver presente ao definir o valor, um novo é criado automaticamente e adicionado ao conjunto de dados do Elemento DOM.

Pesquisando DOM usando atributos de dados.

Os seletores JQuery nos ajudam a pesquisar uma lista de atributos de dados personalizados usando as chaves dos atributos de dados. Vamos, por exemplo, dizer que temos uma lista de LI com vários atributos de dados, conforme mostrado abaixo.

<ul>
    <li data-user="john" data-friends="4" data-admin="YES"></li>
    <li data-user="doe" data-friends="5" data-admin="NO"></li>
    <li data-user="jessy" data-friends="6" data-admin="YES"></li>
    <li data-user="michael" data-friends="7" data-admin="NO"></li>
    <li data-user="jane" data-friends="1" data-admin="YES"></li>
    <li data-user="george" data-friends="14" data-admin="NO"></li>
</ul>

O seletor jquery pode ser usado para obter todos os objetos que usam o atributo de dados personalizados . Para fazer isso, usamos:data-user

var users = $('[data-user]');

Isso retornará uma lista de liobjetos que possuem o atributo personalizado . Agora você pode acessar todos os usuários percorrendo a variável.data-userusers

$.each(users,function(idx,item){
    var isAdmin = $(item).data('admin');
    var friends_count = $(item).data('friends');
    $(item).data('notifications','4');
});

Se você quiser uma lista de todos os usuários que são administradores:

var admin_users = $('[data-admin="YES"]');

Isso retornará os liobjetos data-userpertencentes aJOHN|JESSY|JANE

Você pode criar um método auxiliar para pesquisar dinamicamente

function fetchByAdminType($type){
    return $('[data-admin="' + $type + '")]');
}

var admin_users = fetchByAdminType('YES');
var non_admin_users = fetchByAdminType('NO');

Acessor CSS

Como os atributos de dados são atributos HTML simples, você também pode acessá-los usando CSS. Vamos, por exemplo, querer ter uma coloração de fonte específica para todos os usuários que pertencem ao tipo Admin, podemos fazer isso usando:

li[data-admin="YES"] {
  color: '#bbb';
  background: '#555';
  font-weight: 'bold';
}

Christian Heilmann mostra mais maneiras de como usar atributos de dados neste screencast .

A API datalist é compatível com todos os navegadores modernos, mas não com o IE10 e anteriores. Um shim está disponível, mas é possivelmente mais prático usar jQuery se você estiver programando para navegadores mais antigos.