Data Attributes: como armazenar informação extra em elementos HTML
Tags: braziliandevs, webdev, frontend, beginners
Published: 2023-07-02 12:52:08

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?](#o-que-são-data-attributes)
  * [Melhor prática para nomear `data-*`](#melhor-prática-para-nomear-raw-data-endraw-)
- [Por quê usar Data Attributes?](#por-quê-usar-data-attributes)
- [Usando Data Attributes em Projetos:](#usando-data-attributes-em-projetos)
  * [Manipulação do DOM com JavaScript:](#manipulação-do-dom-com-javascript)
  * [Acesso no JavaScript](#acesso-no-javascript)
  * [Acesso no CSS](#acesso-no-css)
- [Conclusão](#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.

```HTML
<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.

```HTML
<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.

```HTML
<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:

```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.

```CSS
[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!