27.03.2025

Extraindo Atributos data-* em JavaScript e jQuery

Resposta Rápida

Para extrair todos os atributos data-* de um elemento HTML em JavaScript, use um loop com element.attributes e filtre os atributos que começam com data-:

const dataAttrs = Array.from(document.getElementById('elementId').attributes)
  .filter(attr => attr.name.startsWith('data-'))
  .reduce((obj, attr) => {
    obj[attr.name] = attr.value;
    return obj;
  }, {});

Para jQuery, utilize o método .data(), que seleciona automaticamente todos os atributos data-*:

const dataAttrs = $('#elementId').data();

Esses trechos retornam um objeto onde as chaves são os nomes dos atributos data- e os valores são os correspondentes dentro do elemento.

Aplicando a Teoria na Prática: Trabalhando com Atributos de Dados

Os atributos de dados são usados para armazenar informações adicionais e podem ser adicionados a elementos HTML padrão sem a necessidade de estruturas de dados extras em JavaScript ou jQuery. Note que o JavaScript converte automaticamente os valores de atributo em string nos tipos de dados apropriados ao serem extraídos.

Uso Profissional de Atributos de Dados

Conversão Automática para CamelCase

Ao usar element.dataset em navegadores modernos, os nomes dos atributos de dados são convertidos automaticamente para camelCase. Por exemplo, data-meu-atributo se torna element.dataset.meuAtributo.

Utilizando Expressões Regulares

Em navegadores mais antigos que não possuem suporte para a propriedade .dataset, você ainda pode analisar os atributos data-* usando expressões regulares:

const el = document.getElementById('elementId');
const dataAttrs = {};
for (let i = 0; i < el.attributes.length; i++) {
  const attrName = el.attributes[i].name;
  if (/^data-/.test(attrName)) {
    const key = attrName.slice(5).replace(/-([a-z])/g, g => g[1].toUpperCase());
    dataAttrs[key] = el.getAttribute(attrName);
  }
}

Capacidades do jQuery: Cache de Dados

Ao usar o método .data() no jQuery, o primeiro acesso aos atributos é armazenado em um armazenamento interno, o que acelera operações subsequentes, pois elas não exigem acesso direto ao DOM.

Visualização

Veja como o JavaScript e o jQuery extraem atributos de dados:

| Elemento HTML             | Atributos                |
| ------------------------- | ------------------------ |
| <div data-role="...">    | data-role                |
| <span data-info="...">   | data-info                |
| <button data-toggle="...">| data-toggle              |

JavaScript e jQuery revelam efetivamente todos os dados ocultos dentro dos elementos, agora disponíveis para seu uso posterior.

Conhecimento Avançado: Casos Especiais e Dicas de Performance

Casos Especiais: Evitando Problemas

Tenha cuidado com as sutilezas ao trabalhar com atributos data-*. Por exemplo, fique atento à validade dos dados. Se você atualizar um atributo data-* via .attr() após ter chamado .data(), o cache interno do jQuery não será atualizado. Para garantir a sincronização, faça as alterações usando .attr().

Aspecto de Performance: Eficiência no Acesso a Atributos

Ao lidar com um grande número de elementos ou atributos, é importante considerar a otimização. Use uma única chamada para .data() para recuperar todos os dados, pois isso reduz o tempo de acesso ao DOM:

// Eficiente
const allData = $('#elementId').data();

// Menos eficiente
const role = $('#elementId').data('role');
const info = $('#elementId').data('info');

Dessa forma, você maximiza os benefícios das capacidades de cache do jQuery, reduzindo a carga no DOM.

Recursos Úteis

1. data-* - HTML: A Linguagem de Marcação Hipertexto | MDN
2. Data | Documentação da API do jQuery
3. jQuery como encontrar um elemento baseado no valor de um atributo data? - Stack Overflow
4. Um Guia Completo para Atributos de Dados | CSS-Tricks
5. Atributos data-* em HTML
6. Atributos e Propriedades
7. Como e Por Que Usar Atributos de Dados Customizados HTML5 — SitePoint

Video

Navigation