Os data-custom
são atributos especiais definidos pelo HTML5
, mas como qual quer elemento eles podem armazenar apenas strings
.
Por um outro lado, a coleção interna do jQuery, que é acessível pelo método .data()
pode vir à armazenar qual quer tipo de dado, inclusive objetos complexos com referencia circular.
Então por comodidade, o jQuery
optou por carregar os valores dos data-custom
como valores iniciais da sua coleção interna, mas veja, até neste ponto temos algumas inconsistências.:
var valores = $(".valores");
console.log(valores.data("value"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="valores" type="hidden" data-value="A" />
<input class="valores" type="hidden" data-value="B" />
<input class="valores" type="hidden" data-value="C" />
<input class="valores" type="hidden" data-value="D" />
Então, o .data("value")
deveria retornar "A"
ou ["A", "B", "C", "D"]
? Afinal você precisar lembrar que o jQuery
é um wrapper
para uma coleção de DOM
, enquanto o data-custom
está à apenas à um elemento DOM
.
agora vamos à um caso com o uso de objeto com referencia circular.:
var valores = $(".valores");
console.log(valores.data("value"));
var objetoA = {};
var objetoB = {};
objetoA.Gemeo = objetoB;
objetoB.Gemeo = objetoA;
valores.data("value", objetoA);
console.log(objetoA);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="valores" type="hidden" data-value="A" />
Qual valor deveria ser exibido no data-value
neste caso? uma string
com a representação do objeto em JSON
? isto poderia travar o Browser
;D
Por fim, a propriedade .data()
é anterior à definição dos data-custom
do HTML5
, porém o jQuery
evoluiu para fazer uso deles na sua implementação, até para que fosse possível criar plugins com inicialização automática configuráveis apartir dos atributos.
Em todo caso o JavaScript
define à sua propria forma de acessar os data-custom
, e esta permite a edição dos mesmos.
var valores = document.querySelectorAll(".valores");
[].forEach.call(valores, function (valor, indice) {
var valorOld = valor.dataset.value;
valor.dataset.value = valor.dataset.value.charCodeAt(0);
var valorNew = valor.dataset.value;
console.log(`O elemento #${valor.id} tinha o valor ${valorOld} e foi alterado para ${valorNew}`);
});
<input id="elemA" class="valores" type="hidden" data-value="A" />
<input id="elemB" class="valores" type="hidden" data-value="B" />
<input id="elemC" class="valores" type="hidden" data-value="C" />
<input id="elemD" class="valores" type="hidden" data-value="D" />
note, que ao utilizar a propriedade dataset
o valor dos data-custom
foram alterados.