12

Is this wrong? If so why?

var elm = document.getElementById("myElm");
elm.customValue = {attr1 : "test", attr2 : "test"};

I understand how to use the data attributes, but I don't want to muddy up my dom with all those attributes.

Phillip Burch
  • 459
  • 5
  • 11
  • Possible duplicate of [Can I add arbitrary properties to DOM objects?](https://stackoverflow.com/questions/4258466/can-i-add-arbitrary-properties-to-dom-objects) – RiZKiT Jun 04 '19 at 07:50

3 Answers3

10

This introduces a memory leak in some browsers because you bind a native C object (the DOM element) and a JS object together and some garbage collection algorithms cannot deal with this. IE is one of them.

Here is an MSDN article about IE memory leaks: http://msdn.microsoft.com/en-us/library/ie/bb250448(v=vs.85).aspx

J. K.
  • 8,268
  • 1
  • 36
  • 35
  • 9
    For proper context, this only introduces a memory leak if the object in question is removed from the DOM and you expect it to be garbage collected. And, the memory leak is only of consequence if the data associated with the DOM element is huge or there are thousands of these that are created, then removed from the DOM. For an object that stays in the DOM for the lifetime of your page, there is no memory leak. – jfriend00 Feb 11 '12 at 17:06
  • Good note! I forgot to mention that you need to remove the element for the leak to happen. – J. K. Feb 11 '12 at 17:18
  • 1
    Regardless of the conditions on which the memory leak occurs, the fact is that it's a possibility. It's piss poor programming practice to ignore any known possibility of memory leaks. Particularly when their options are available. – Mad Man Moon Feb 11 '12 at 18:44
  • 4
    Memory leaks like you describe are only caused in IE if there's a cyclic reference between the JS and the DOM. In this instance the DOM has a reference to a JS object, but that JS object doesn't reference the DOM in return. In a simple case like this, memory leaks are not an issue. – djd Feb 12 '12 at 02:50
  • 1
    Now this is a typical use case of [WeakMap](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap). – hakatashi Jan 20 '17 at 16:43
  • there is new in that area? – pery mimon Oct 08 '18 at 11:00
2

Bottom line, why wouldn't you use the proper tools available? You have no idea if in the future, near or far, whatever custom property name you are using will be added to the w3c specifications for that particular element. Now, suddenly your code is broken.

Never mind that adding custom properties to elements which already have defined properties makes your code a maintenance nightmare. Whether it's you or someone else maintaining it in the future, there's going to be a "wtf" moment where the developer is trying to igure out if a) a custom property was added to the element or b) the element itself is in fact a custom object.

Finally, what if that element is replaced in the dom via Ajax or dynamic HTML? Now the property is gone and your code is broken.

Mad Man Moon
  • 741
  • 4
  • 10
1

You should consider HTML5 data-attributes.

From the man himself: http://ejohn.org/blog/html-5-data-attributes/

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176