HTML 5 – propriedades personalizadas data-*

Considere o causo:

Num sistema de registro contábil, ao exibir os lançamentos de terminada conta no livro razão, aquelas que carecem de conciliação, apresentam um checkbox que informa se aquele lançamento está conciliado ou não.

Nesta mesma tela é possível ao usuário editar a conciliação (clicando sobre o check box) que atualiza o banco de dados via ajax.

Para tanto, é necessário enviar o codigo_do_lancamento, junto com a nova informação após o clique (1 ou 0) conforme conciliado ou não conciliado.

Como a questão é tratada por ajax, em nome da semântica, os checkbox foram dotados de uma propriedade personalizada:

<input type="checkbox" value="sim" data-codigo_do_lancamento="792">

Eis a explicação:

O Que São Atributos data-*?

Os atributos data-* são uma inclusão no HTML5 projetada para armazenar informações personalizadas extras nos elementos HTML, que não interferem na apresentação ou no comportamento padrão do documento. O * no nome do atributo pode ser substituído por qualquer coisa que você escolher (contanto que seja uma string sem espaços e não comece com um número), permitindo armazenar dados específicos diretamente em um elemento HTML para uso com CSS ou JavaScript.

Por Que Usar Atributos data-*?

1. Semântica e Manutenibilidade: Eles fornecem uma maneira de incluir dados que não têm outro mecanismo de armazenamento HTML ou que não são adequados para classes ou IDs sem misturar significados ou propósitos.
2. Integração com JavaScript: Os atributos data-* são facilmente acessíveis via JavaScript, o que os torna extremamente úteis para armazenar dados que serão manipulados ou utilizados por scripts.
3. Customização e Flexibilidade: Eles permitem uma grande flexibilidade para armazenar informações customizadas sem depender de hacks ou abusos de outros atributos não destinados para esse propósito.

Como Definir e Acessar Atributos data-*

Definindo Atributos data-*

Para definir um atributo data-*, simplesmente adicione-o a um elemento HTML e dê um valor a ele, assim:

<div data-role="page" data-last-accessed="2024-04-01" data-page-number="3">...</div>

Neste exemplo, o elemento <div> tem três atributos data-* definidos: data-role, data-last-accessed, e data-page-number.

Acessando Atributos data-* com JavaScript

Para acessar esses dados a partir de JavaScript, você pode usar o método getAttribute() ou acessar a propriedade dataset do elemento.

• Usando getAttribute():

var div = document.querySelector('div');
var role = div.getAttribute('data-role'); // "page"

• Usando dataset:

var role = div.dataset.role; // "page"

A propriedade dataset transforma todos os hífens e as letras imediatamente seguintes em camelCase. Portanto, data-last-accessed torna-se dataset.lastAccessed.

Exemplo Prático

Vamos dizer que você está construindo um site de e-commerce e quer armazenar informações sobre produtos diretamente nos elementos que os representam, como o ID do produto, a cor e o tamanho. Isso pode ser particularmente útil para capturar interações do usuário com esses produtos, como adicionar um item ao carrinho de compras.

<div class="product" data-product-id="1234" data-product-color="blue" data-product-size="M">...</div>

Com JavaScript, você pode facilmente acessar essas informações quando o usuário interage com o produto:

document.querySelector('.product').addEventListener('click', function() {
    var productId = this.dataset.productId;
    var productColor = this.dataset.productColor;
    var productSize = this.dataset.productSize;
    // Agora, você pode usar productId, productColor, e productSize para processar a interação.
});

Considerações de Desempenho e Segurança

• Desempenho: Acessar o dataset é relativamente rápido, mas como qualquer manipulação DOM, deve ser feito com cuidado, especialmente em loops ou eventos que ocorrem muitas vezes rapidamente (como eventos de scroll ou mousemove).
• Segurança: Ao usar dados que podem ser manipulados pelo usuário (como em um input ou através de AJAX), sempre valide e/ou escape esses dados no lado do servidor para evitar ataques de injeção.

Os atributos data-* são uma adição poderosa ao conjunto de ferramentas de um desenvolvedor web, facilitando a integração entre o HTML e o JavaScript de maneira semântica e eficaz.