dataset vs .data – Difference?

dataset is a native property of an element that contains the data attributes, it’s a new(ish) addition and as such is only supported in IE11+, Chrome 8+, FF 6+ etc.

A more cross browser solution would be to get the attribute directly


data() is a jQuery method, and other than using the HTML5 data attribute to set the inital value if none exists internally, it has nothing in common with dataset.

data() stores whatever data you pass it in an internal object created by jQuery, so this for instance would fail

$(element).data('key', 'value');

element.dataset.key // undefined

as the data is not stored in the attributes at all, but internally by jQuery.
The jQuery equivalent of getting and setting the data attribute would be attr()

$(element).attr('data-key', 'value');

The native methods are probably faster, but as they are not really comparable to jQuery’s data() it doesn’t really matter, but for getting the data attribute I would think the fastest method with the best browser support would be

var rating = webappData.getAttribute('data-rating');

Leave a Comment