How does data binding with DOM element work?

Question

I am wondering, how jquery can associate arbitrary data with any DOM element without adding any HTML data attribute?

$('#div_id').data('suffix',(count++)) ;

I don't see any data attribute associate with HTML element in firebug HTML snapshot.

What is the mechanism?

Although this data storage method is no longer needed in HTML5, still i am not clear actual mechanism of jquery data storage.

Answer 1

It adds a property to the element which contains a number value that represents an index in the jQuery.cache object like so:

$('#footer').data('suffix',"suffix");
jQuery.cache[ $('#footer')[0][jQuery.expando] ].suffix;
//"suffix"

I used "#footer" because I ran the code on this page. Note that the object structure for jQuery.cache[index] will be different on elements that also have events bound to them by jQuery.

You should never touch it in code anyway so it doesn't really matter.