28.11.2024

Adicionando e Usando Atributos de Dados em jQuery e DOM

Resposta Rápida

Existem duas maneiras principais de adicionar um data-attribute a um elemento HTML usando JavaScript:

// Usando a propriedade dataset
element.dataset.meuAtributo = 'algumValor'; // cria data-meu-atributo="algumValor"
// ou
// Usando o método setAttribute()
element.setAttribute('data-meu-atributo', 'algumValor'); // abordagem clássica

Aqui, element é uma referência ao elemento HTML ao qual você planeja adicionar o atributo de dados, e 'algumValor' é o valor que você deseja definir para o atributo.

jQuery, .data() e .attr()

Ao usar jQuery, o método .data('meuAtributo', 'algumValor') é o mais conveniente para trabalhar diretamente com o sistema de dados do jQuery. No entanto, .data() não altera os atributos da estrutura real do DOM, operando apenas no armazenamento interno de dados do jQuery.

$('#elemento').data('meuAtributo', 'valorNovo'); // atualiza apenas os dados internos do jQuery
$('#elemento').attr('data-meu-atributo', 'valorNovo'); // faz alterações no atributo do DOM

Recomenda-se usar .data() para recuperar dados definidos pelo mesmo método, uma vez que o jQuery realiza conversão de tipo automaticamente.

Interagindo com Elementos Criados Dinamicamente

Ao trabalhar com elementos criados dinamicamente, é melhor usar o método .attr() ou .dataset para uma representação adequada no DOM:

$('<div/>').attr('data-meu-atributo', 'algumValor').appendTo('body'); // adicionando um novo elemento com um atributo de dados

Para selecionar esses elementos mais tarde, utilize seletores de atributos: $('div[data-meu-atributo="algumValor"]').

var $elementoDinamico = $('div[data-meu-atributo="valor"]'); // encontre seu elemento no DOM

Garantindo Consistência com .attr()

Usar .attr() para definir e ler atributos de dados em elementos dinâmicos garante uma alta consistência, pois todas as alterações são refletidas diretamente no DOM.

// Atribuindo
$('#elementoDinamico').attr('data-novoAtributo', '123'); // marcando novos elementos

// Recuperando valor
var valorDeDados = $('#elementoDinamico').attr('data-novoAtributo'); // obtendo informações sobre o elemento

Usando .attr() e .data() Sincronamente

Para refletir alterações tanto no DOM quanto nos dados do jQuery ao mesmo tempo, use .attr() junto com .data().

var $elemento = $('#elemento');
$elemento.data('meuAtributo', 'novo-valor').attr('data-meu-atributo', 'novo-valor'); // libertando-nos da necessidade de lembrar localizações de dados

Atualizando Conteúdo com Base em Atributos de Dados

Selecione elementos pelo data-attribute e atualize seu conteúdo usando .attr() em conjunto com .text():

$('div').filter(function() {
  return $(this).attr('data-meu-atributo') === '1';
}).text('Conteúdo atualizado'); // Como se preparar para o clima

Visualização

Imagine que você tem uma mala (🧳), que é análoga a um elemento HTML:

<div id="mala">🧳</div>

Agora, vamos adicionar uma etiqueta data-destino a ela:

document.getElementById("mala").setAttribute("data-destino", "Paris");

Agora nossa mala passou metaforicamente por uma viagem com um destino:

🧳 -> 🏷️ (data-destino: Paris)

Cada data-attribute pode ser visto como uma etiqueta na bagagem que fornece informações importantes para sua jornada através do DOM. Boa viagem! ✈️

Manipulação Direta com .setAttribute() e .dataset

JavaScript fornece a flexibilidade necessária para interação direta com o DOM usando .setAttribute() e .dataset, que pode ser mais eficiente do que usar jQuery:

document.getElementById('elemento').dataset.informacao = 'nova-informacao'; // ao usar jQuery para operações iterativas

Atualizações Rápidas de Texto Usando .innerText e .innerHTML

Quer atualizar rapidamente o texto ou conteúdo HTML de um elemento selecionado por um atributo de dados? Use .innerText e .innerHTML:

document.querySelector('[data-destino="Paris"]').innerText = 'Bonjour'; // atualizando conteúdo de texto. Que maravilhoso!
document.querySelector('[data-destino="Paris"]').innerHTML = '<strong>Bonjour</strong>'; // adicionando HTML com ousadia. Muito espetacular!

Recursos Úteis

1. Usando atributos de dados - desenvolvimento web | MDN — Guia MDN: tutorial sobre como usar atributos de dados em HTML.
2. atributo data-* - W3Schools — W3Schools: visão geral dos atributos de dados HTML.
3. .data() - Documentação do jQuery — Documentação do jQuery: informações sobre o método .data().
4. Guia Completo de Atributos de Dados | CSS-Tricks — Artigo CSS-Tricks: uma visão geral sobre como trabalhar com atributos de dados em HTML e CSS.
5. Como e Por Que Usar Atributos de Dados Customizados no HTML5 | SitePoint — Artigo SitePoint: exemplos práticos de uso de atributos de dados em HTML5.

Video

Navigation