javascript – jQuery doesn't use HTML5 dataset in data?

Question:

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

Then I prepared 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() , the values ​​were changed for jQuery, but not for the dataset attribute; and, when changed in the dataset , they are not returned by data() as expected.

There is also another difference: We can define Number , Array and Object values ​​through jQuery's data . The dataset does NOT do this.

Look:

Example with dataset :

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

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

jQuery data example:

 $('body').data('element', {nome: 'wallace'});
 console.log($('body').data('element')); // {nome: 'wallace'}
  • Based on this example, can we say that jQuery DOES NOT use the HTML5 dataset ?
  • And if "yes" to the first question, is there any specific reason why he should do this?
  • Is it safe to use the dataset in projects where I won't be using jQuery?
  • Why do they behave differently with respect to the returned types?

Answer:

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

Yeah, jQuery doesn't use the dataset . This can be proven by looking at the library's source code .

is there any specific reason for him to do this?

As far as I know, the reason is historical. When jQuery implemented its data method, the dataset didn't even exist, or at least it wasn't implemented enough by browsers to make it worth using. It does exactly what the documentation says :

Stores arbitrary data associated with 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() , retrieving it with that same method doesn't even look at the attribute (or the dataset property of the element in question).

So the purpose of .data() is not the same as data- attributes – which, as you've noticed, only accept strings as a value. But the name is the same, and on top of that there's the fallback I've already mentioned, and that makes the situation quite confusing.

If jQuery were to change that at this point in the championship, and make its .data() work like the dataset , it would certainly cause serious problems for anyone updating the library.

Is it safe to use the dataset in projects where I won't be using jQuery?

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

Why do they behave differently with respect to the returned types?

As the dataset is designed to handle HTML attributes, it is only intended for string values. So much so that in the HTML5 specification the interface that defines the dataset 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.

Post Views: 0
Scroll to Top