Using DOM elements as keys to javascript map

Question

I am trying to associate some "private" data with DOM elements. Rather than adding that data to the DOM element itself (I'd like to avoid changing the DOM element), I have a separate data object that I want to use as a map.

Rather than:

document.GetElementById('someElementId').privateData = {};

I want to do

internalPrivateDataMap[document.GetElementById('someElementId')].privateData = {};

Not all the elements have an id field, and some are created dynamically, so I can't use the id as the key.

This works fine for most elements, but for "a" elements, the key being used seems to be the href of the element, I think because the DOM defines a toString() function for a elements.

The result of this is that if I have two "a" elements with the same href, they are sharing privateData, which I don't want.

My current workaround is to generate an internal uniqueID I can use as a key, but that requires me to modify the DOM element, which I am trying to avoid.

Answer 1

As you noticed, this doesn't work reliably and I know no way to make it work without either giving every element a (generated) ID or at least assign a unique ID to a new custom element field; DOM nodes simply don't have the necessary properties to work as keys in a map.

So you really have these solutions left:

• Assign each element a generated ID unless it already has one
• Assign a unique ID to a new private field. That way, you can keep the memory impact per DOM node small and still keep your private data in a different place. Don't forget that you need to clean the private data somehow when the DOM elements are deleted.
• Use something like jQuery which has element.data() to read and put private data into a DOM element
• Use your own element.privateData = {}; Note that you still need cleanup for event handlers which keep references to the element or you will have unexpected memory leaks.