What’s wrong with adding properties to DOM Element objects?

by

Is there a problem adding properties (or methods) directly to DOM Element Objects?

Potentially.

There is no web standard that says you can add arbitrary properties to DOM nodes. They are ‘host objects’ with browser-specific implementations, not ‘native JavaScript objects’ which according to ECMA-262 you can do what you like with. Other host objects will not allow you to add arbitrary properties.

In reality since the earliest browsers did allow you to do it, it’s a de facto standard that you can anyway… unless you deliberately tell IE to disallow it by setting document.expando= false. You probably wouldn’t do that yourself, but if you’re writing a script to be deployed elsewhere it might concern you.

There is a practical problem with arbitrary-properties in that you don’t really know that the arbitrary name you have chosen doesn’t have an existing meaning in some browser you haven’t tested yet, or in a future version of a browser or standard that doesn’t exist yet. Add a property element.sausage= true, and you can’t be sure that no browser anywhere in space and time will use that as a signal to engage the exciting DOM Sausage Make The Browser Crash feature. So if you do add an arbitrary property, make sure to give it an unlikely name, for example element._mylibraryname_sausage= true. This also helps prevent namespace conflicts with other script components that might add arbitrary properties.

There is a further problem in IE in that properties you add are incorrectly treated as attributes. If you serialise the element with innerHTML you’ll get an unexpected attribute in the output, eg. <p _mylibraryname_sausage="true">. Should you then assign that HTML string to another element, you’ll get a property in the new element, potentially confusing your script.

(Note this only happens for properties whose values are simple types; Objects, Arrays and Functions do not show up in serialised HTML. I wish jQuery knew about this, because the way it works around it to implement the data method is absolutely terrible, results in bugs, and slows down many simple DOM operations.)

More Related Contents:

  1. How do you check if a JavaScript Object is a DOM Object?
  2. How to check null objects in jQuery
  3. How to get the difference between two arrays of objects in JavaScript
  4. How to get a key in a JavaScript object by its value?
  5. How to create an object property from a variable value in JavaScript? [duplicate]
  6. Object property name as number
  7. How to get objects value if its name contains dots?
  8. How to get object length [duplicate]
  9. How do I replace text inside a div element?
  10. How to bind bootstrap popover on dynamic elements
  11. getElementsByName in IE7
  12. DOMNodeInserted equivalent in IE?
  13. JavaScript equivalent of jQuery’s extend method
  14. Chrome extension adding external javascript to current page’s html
  15. JavaScript: DOM load events, execution sequence, and $(document).ready()
  16. How to move table row in jQuery?
  17. How to check if DOM is ready without a framework?
  18. JavaScript NodeList
  19. How AJAX is done in github source browse?
  20. What is the type of “keys” in JavaScript?
  21. Select div using wildcard ID
  22. How to generate unique css selector for DOM element?
  23. getElementById returning value only for first element [closed]
  24. querySelector vs. getElementById [closed]
  25. Find all values by specific key in a deep nested object
  26. How to escape HTML
  27. Stopping a iframe from loading a page using javascript
  28. User Activity Tracking using javascript library [closed]
  29. Boolean HTML Attributes
  30. How can I determine if a dynamically-created DOM element has been added to the DOM?

Leave a Comment