7

I came across 3 ways to store any data with HTMLElement object.

Can someone please suggest the best practice to associate any data with element object?

I prefer number 3 because it doesn't set any HTML attribute as in the case of 1 and 2. It's just like setting and getting any property on the object.

  1. Use setAttribute('nonStandardDataProperty')
  2. Use dataset property of HTMLElement object for example dataset.x for data-xattribute
  3. HTMLElement is object, so define any property and it will serve as data storage for that element
Bergi
  • 572,313
  • 128
  • 898
  • 1,281
P K
  • 9,402
  • 12
  • 50
  • 95
  • Isn't 1 and 3 the same? – NilsH Apr 02 '13 at 13:48
  • Option 3 is object only after you grab a reference on it, this eliminates getting associated data from the server. – Valentin V Apr 02 '13 at 13:50
  • @NilsH: No, only in extinct IEs. Read [prop vs attr](http://stackoverflow.com/q/5874652/1048572) – Bergi Apr 02 '13 at 13:52
  • @NilsH I think option 1 creates HTML element attribute that can be further accessed by getAttribute method while 3rd has nothing to do with attribute – P K Apr 02 '13 at 13:53
  • Bergi, PK Thanks for clarification – NilsH Apr 02 '13 at 13:54
  • Are we talking about associating data with DOM elements or with HTML "elements"? Or potentially both? – Felix Kling Apr 02 '13 at 13:56
  • @Bergi: I mean associate any data with element object(HTMLElement object), obviously not all node objects which include text and comments – P K Apr 02 '13 at 13:58

6 Answers6

2

Option #2 seems to me to be the most "standards-compliant", if that's what you're looking for; plus, it allows you to set those attributes from within the HTML while still maintaining valid markup. It's generally my preference, but it's really whatever works best for you in your situation: if it works, go with it.

Adrian
  • 38,231
  • 5
  • 90
  • 87
1

I would use option #1 because it's the most portable.

However I would use HTML5's data- prefix for those custom attributes for compatibility with jQuery's .data() method.

Alnitak
  • 325,660
  • 70
  • 395
  • 481
  • @FelixKling not in my experience if you use `.data` to write the data in the first place. That stores the data as a property rather than as an attribute. – Alnitak Apr 02 '13 at 14:26
  • @Alnitak: jQuery's `.date()` method does not use HTML [dataset](https://developer.mozilla.org/en-US/docs/DOM/element.dataset), where you can only store strings (just as in the data attributes). – Bergi Apr 02 '13 at 15:53
  • I was actually referring to the first option, i.e. using `getAttribute`. Sorry for not having been specific enough. – Felix Kling Apr 02 '13 at 16:32
0

The third option is storing data in the DOM which might not be a bad idea if the data is not huge.If it is, then storing and retrieval of data might affect performance of the app.

Prithwiraj Sinha
  • 1
  • 1
  • @FelixKling Nice article with good reasons but it's sad that we are not allowed to use prototypal inheritance which is the real power of JavaScript. – P K Apr 02 '13 at 14:31
0

I guess the best way is using HTML5 data-* Attributes and jQuery's .data() function. It will probably have the best way to store data in HTML elements built-in and update to latest technologies in the future, so you can lean back and just be productive

<div id="myDiv" data-my-var="my-var-value"></div>

can be used in JavaScript like this: (jQuery required)

console.log( $( '#myDiv' ).data( 'my-var' ) )

Edit: and set like this

$( '#myDiv' ).data( 'my-var', 'my-new-var-value' );

which will also update the data-* attribute in this case

Torben
  • 193
  • 11
0

Option 4: store an identifier on the DOMNode which you can use to look things up in a detached map (yes, this is how jQuery does it - on top of importing all data-* attributes during init, of course).

Going with #3 is fine if you mind your property names. #2 should only allow Integer and String values, #1 might have the same issue.

I'd go with #4, simply because I don't like the odds of a new spec popping up and claiming a property name I used for my own data…

rodneyrehm
  • 13,169
  • 38
  • 56
-1

Twitter Bootstrap uses option one.

Take a look at Twitter Bootstrap document, you will see plenty uses of storing data in the none-standard property html elements.

example

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>


<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
lngs
  • 671
  • 1
  • 7
  • 17
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Mxyk Apr 02 '13 at 14:25
  • Thanks for advice. I fixed my answer. – lngs Apr 02 '13 at 14:45
  • I don't see any non-standard attribute name in your html snippet. – Bergi Apr 02 '13 at 14:46
  • is aria-labelledby standard? – lngs Apr 02 '13 at 15:11
  • ok i got it. I were wrong. Now i'm confused between option 1 and 2. What is this approach called? – lngs Apr 02 '13 at 16:15