Atributos personalizados em JavaScript
Em HTML, é permitido adicionar seus próprios atributos personalizados
aos elementos. Tais atributos devem começar com
data-, seguido por qualquer
nome de atributo que seja conveniente para você.
Atributos personalizados podem ser usados de uma enorme variedade de maneiras. Muitas dessas maneiras serão estudadas mais adiante no tutorial, e ainda mais você poderá inventar por conta própria no futuro.
Acessar esses atributos não é feito da maneira padrão.
Não é possível simplesmente acessar uma propriedade do elemento
com o mesmo nome, como fizemos antes.
Em vez disso, deve-se usar a propriedade especial
dataset, após a qual, seguido por um ponto,
escreve-se o nome do atributo sem o data-. Por exemplo,
se nosso atributo se chama data-test,
para acessá-lo escreveremos elem.dataset.test,
onde elem é a variável com nosso elemento.
Vamos ver um exemplo. Suponha que temos o seguinte elemento:
<div id="elem" data-num="1000"></div>
Vamos exibir na tela o valor do seu atributo data-num:
let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // exibirá 1000
E agora, vamos atribuir um novo valor a este atributo:
let elem = document.querySelector('#elem');
elem.dataset.num = 123;
Dado o seguinte código:
<div id="elem" data-text="str">texto</div>
Faça com que, ao clicar na div, o conteúdo do seu atributo
data-text seja adicionado ao final
do seu texto.
Dadas divs, contendo em seu atributo data-num
seu número de ordem:
<div data-num="1">texto</div>
<div data-num="2">texto</div>
<div data-num="3">texto</div>
<div data-num="4">texto</div>
<div data-num="5">texto</div>
Faça com que, ao clicar em qualquer uma das divs, seu número de ordem seja escrito no final do seu conteúdo.
Dado um botão. Faça com que este botão conte o número de cliques nele, registrando-os em algum atributo personalizado. Faça com que, ao clicar em outro botão, seja exibido na tela quantos cliques foram feitos no primeiro botão.
Dado um input:
<input id="elem" data-length="5">
Neste input, o atributo data-length
contém o número de caracteres que precisam
ser digitados no input. Faça com que, ao perder
o foco, se a quantidade de caracteres inseridos
não corresponder à especificada, uma mensagem
sobre isso seja exibida.
Dado um input:
<input id="elem" data-min="5" data-max="10">
Neste input, os atributos data-min e
data-max contêm um intervalo. Faça
com que, ao perder o foco, se a quantidade
de caracteres inseridos não estiver dentro deste intervalo,
uma mensagem sobre isso seja exibida.
