jQuery does not use the HTML5 dataset on the date?

Question

When modifying a certain initial value of data from jQuery, I noticed the value of the dataset is not modified.

So I drew up the following test:

HTML:

<div data-value="initial value" id="div-test-1"></div>
<div data-value="initial value" id="div-test-2"></div>

jQuery:

First test:

$(function(){

    var $div1 = $('#div-test-1')

    console.log($div1.data('value')); // intial value

    $div1.data('value', 'new value'); 

    console.log($div1.data('value')) // new value


    console.log($div1.prop('dataset').value); // initial value

 });

Second test:

$(function(){

        var $div2 = $('#div-test-2');

        console.log($div2.data('value')) ;// intial value

        $div2.attr('data-value', 'new value');

        console.log($div2.data('value')); // initial value

        console.log($div2.prop('dataset').value); // new value


    });

That is, for definitions made with data(), values have been changed to jQuery, but not to the attribute dataset; and, when modified in dataset, are not returned by data() as expected.

There is also another difference: We can define values of the type Number, Array and Object through the data jQuery. Already the dataset DOESN’T DO THAT.

Behold:

Example with dataset:

$('body').get(0).dataset.element = {nome: "wallace"};

console.log($('body').get(0).dataset.element) // [object Object]

Example with data jQuery:

 $('body').data('element', {nome: 'wallace'});
 console.log($('body').data('element')); // {nome: 'wallace'}

• Based on this example, we can state that jQuery DOES NOT use jQuery dataset HTML5?
• And if "yes" to the first question, is there any specific reason for him to do so?
• It’s safe to use the dataset in projects where I won’t use jQuery?
• Because they behave differently with respect to the returned types?

Answer 1

Based on this example, we can state that jQuery DOES NOT use jQuery dataset HTML5?

Yeah, the jQuery does not use the dataset. This can be proven by looking at the source code library.

there’s some specific reason he does it?

As far as I know, the reason is historical. When jQuery implemented its method data, the dataset did not yet exist, or at least was not sufficiently implemented by the browsers to be worth using it. It does exactly what is said in the documentation:

Stores arbitrary data associated with the selected elements, or returns the value for the key passed in the first element among the selected ones.

The verification of attributes data- HTML5 is actually a fallback. If a value is set with .data(), recover it with that same method nor look at the attribute (nor at the property dataset of the element in question).

Therefore, the objective of the .data() is not the same as attributes data- - which, as you noticed, only accept strings as value. Only the name is the same, and on top of that there is the fallback which I have already mentioned, and that makes the situation rather confusing.

If jQuery decided to change that at this point in the championship, and make his .data() function as the dataset, would certainly cause serious problems for anyone updating the library.

It’s safe to use the dataset in projects where I won’t use jQuery?

I don’t see why it wouldn’t be. I think it’s safe to use even if you’re using jQuery, as long as you know what you’re doing.

Because they behave differently with respect to the returned types?

Like the dataset is made to handle HTML attributes, it is thought only for string type values. So much so that in the HTML5 specification the interface defining the dataset is called DOMStringMap.

jQuery uses a common object to map DOM elements to such "arbitrary data", and this allows, by the very nature of the language, to use any type available in it.