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.

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.

• javascript
• dom

Share Improve this question Follow asked Feb 11, 2012 at 16:49 Phillip BurchPhillip Burch 45955 silver badges1111 bronze badges 1

• Possible duplicate of Can I add arbitrary properties to DOM objects? – RiZKiT Commented Jun 4, 2019 at 7:50

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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./en-us/library/ie/bb250448(v=vs.85).aspx

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.

You should consider HTML5 data-attributes.

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