Data Attributes: como armazenar informação extra em elementos HTML

Fernando Costa — Sun, 02 Jul 2023 12:52:08 +0000

Quando eu estava desenvolvendo um projeto chamado 'Twimba', um clone do feed do twitter eu me deparei com o seguinte problema: 'Como vincular o tweet ao botão de like e retweet?' Vem comigo que te explico como consegui usando Data Attributes!

Índice

O que são Data Attributes?

Melhor prática para nomear data-*

Por quê usar Data Attributes?

Usando Data Attributes em Projetos:

Manipulação do DOM com JavaScript:

Acesso no JavaScript

Acesso no CSS

Conclusão

O que são Data Attributes?

Data Attributes é um recurso que nos permite adicionar informação adicional aos elementos HTML. Sua syntax segue esse padrão data-*. O asterisco pode ser substituído por um nome descritivo para o dado que você deseja armazenar. data-nome-descritivo="dado"

Por exemplo: Temos uma lista de produtos e queremos armazenar um id único para cada um dos produtos na lista.

<ul id="lista-de-produtos">
  <li data-produto-id="1">Produto A</li>
  <li data-produto-id="2">Produto B</li>
  <li data-produto-id="3">Produto C</li>
</ul>

No exemplo acima, utilizamos o Data Attribute data-produto-id para armazenar o ID de cada produto. O valor desse atributo pode ser qualquer dado que você queira associar ao elemento. É importante ressaltar que os Data Attributes não afetam a aparência ou o comportamento padrão dos elementos, eles são apenas um meio de armazenar informações personalizadas.

Melhor prática para nomear `data-*`

No HTML, separe palavras com um traço '-'
data-produto-id

No JavaScript, acesse esse data-* utilizando letra maiúscula
dataset.produtoId

E no CSS, coloque o data-* entre colchetes
[data-produto-id="1"]

Por quê usar Data Attributes?

data-* attributes é uma maneira eficaz de armazenar dados que não são visíveis para os usuários, mas podem ser utilizados por nós desenvolvedores para realizar ações específicas ou aplicar estilos com base no valor do atributo.

Alguns casos de uso comuns para os atributos data-* incluem:

Armazenar dados para serem acessados posteriormente pelo JavaScript e/ou CSS.
Fornecer metadados sobre um elemento que são necessários para determinadas funcionalidades (por exemplo, armazenar a data de início de um evento no calendário).
Aplicar diferentes temas ou estilos a um elemento com base no valor do atributo data-*.

Usando Data Attributes em Projetos:

Agora que entendemos o conceito e a syntax dos Data Attributes, vamos explorar como eles são úteis e como utilizá-los em nossos projetos.

Manipulação do DOM com JavaScript:

Podemos usar Data Attributes para selecionar, vincular e manipular elementos específicos no DOM usando JavaScript.

Por exemplo: Aqui temos um tweet com um botão de retweetar, nosso objetivo é fazer com que o botão de retweetar esteja vinculado a esse tweet.

<div id="tweet-1">
  <p>Hello twitter world!</p>
</div>
<button id="retweet-btn">Retweet</button>

Aqui podemos utilizar um data-* para vincular o id do tweet ao botão de retweet.

<div id="tweet-1">
  <p>Hello twitter world!</p>
</div>
<button id="retweet-btn" data-retweet="tweet-1">Retweet</button>

Acesso no JavaScript

Podemos acessar o valor desse data-* com a propriedade dataset do JavaScript:

const retweetBtn = document.getElementById('retweet-btn');

retweetBtn.dataset.retweet // output: "tweet-1"

Dando um console.log() no retweetBtn.dataset.share conseguimos acessar o id do tweet-1.

Acesso no CSS

Podemos usar os seletores de Data Attributes em CSS para alterar o estilo do elemento de acordo com o Data Attribute.

Ainda usando o exemplo do tweet, podemos criar um estilo de CSS para representar quando o tweet foi retweetado e mudar a cor do botão.

[data-retweet="tweet-1"] {
    color: red;
}

Conclusão

Em resumo, Data Attributes é uma ótima ferramenta para implementar um feature novo no seu projeto. Ao explorar e dominar o uso de Data Attributes, você poderá criar experiências de usuário mais envolventes e adaptáveis às necessidades do seu projeto.

Espero ter ajudado a entender melhor um pouquinhos sobre Data Attributes e o poder que eles possuem para turbinar o seu projeto novo!

DEV Community: Fernando Costa