jQuery does not use the HTML5 dataset on date?


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

Then I wrote the following test:


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


First test:


    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:


        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() , the values have been changed for jQuery, but not for the dataset attribute; and when changed in dataset , are not returned by data() as expected.

There is also another difference: We can set values of type Number , Array and Object through data of jQuery. dataset does NOT do this.


Example with dataset :

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

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

Example with data of jQuery:

 $('body').data('element', {nome: 'wallace'});
 console.log($('body').data('element')); // {nome: 'wallace'}
  • Based on this example, can we say that jQuery does NOT use dataset of HTML5?
  • And if "yes" to the first question, is there any specific reason for doing so?
  • Is it safe to use dataset on projects where I'm not going to use jQuery?
  • Why do they behave differently in regards to returned types?
asked by anonymous 11.02.2015 / 18:38

1 answer


Based on this example, can we say that jQuery does NOT use dataset of HTML5?

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


Is there any specific reason for this?

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


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

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

So the .data() goal is not the same as data- attributes - which, as you've noticed, only accept strings as value. But the name is the same, and there is the fallback that I have mentioned, and this makes the situation rather confusing.

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


Is it safe to use the dataset in projects where I'm not going to use jQuery?

I do not see why it would not. Incidentally, I find it safe to use even if you are using jQuery, as long as you know what you are doing.


Why do they behave differently in regards to returned types?

Since dataset is made to deal with HTML attributes, it is only intended for string-type values. So much so that in the HTML5 specification the interface that defines 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 whatever type is available in it.

11.02.2015 / 19:01