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.

"This works fine for most elements" It does? I would think you'd be getting a generic key [object HTMLDivElement] that way. ...but yes, an anchor will give its href as the .toString() value. — I Hate Lazy
– I Hate Lazy, Commented Nov 8, 2012 at 16:26
No, extending the DOM element with a UID is just they way to go. Without WeakMaps, you can't get an identifying key for your dataMap from elements other than by this. — Bergi
– Bergi, Commented Nov 8, 2012 at 16:29
@user1689607 - I should have said, "This works fine for most elements in my application". After looking closely, though, you're right. All elements have the same problem (sharing keys), it just causes a bug with a elements. That helped clarify what is going on for me. Thanks. — Joe Enzminger
– Joe Enzminger, Commented Nov 8, 2012 at 16:32

Aaron Digulla · Accepted Answer · 2012-11-08 16:53:43Z

8

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.

edited Nov 8, 2012 at 16:53

answered Nov 8, 2012 at 16:30

Aaron Digulla

330k111 gold badges626 silver badges840 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

I Hate Lazy Over a year ago

Assuming each element can't have an ID, I'd just use the last one. By far the simplest.

Aaron Digulla Over a year ago

@user1689607: This can cause problems like memory leaks. Also, you can't have two values for the same key, i.e. if you have two frameworks which try to save private values, they could interfere with each other.

I Hate Lazy Over a year ago

@AaronDigulla: Yes, you'd need a unique key, but so would the same with the UID option. And yes, there could be memory leaks, but it's the same with the UID option.

Aaron Digulla Over a year ago

I mean there would be a memory leak if you'd put an event handler which has a reference to the element into element.privateData

I Hate Lazy Over a year ago

Why wouldn't you have the same leak if the same handler is stored in a cache, and looked up via the UID?

|

Eugene Mala · Accepted Answer · 2024-11-20 13:15:16Z

1

Now there is a Map API exactly for this.

answered Nov 20, 2024 at 13:15

Eugene Mala

1,32313 silver badges26 bronze badges

Comments

Zevgon · Accepted Answer · 2022-06-09 19:17:03Z

For anyone who's ok with an inefficient solution, you could create a custom map class that leverages node equality. Here's the basic idea, extend as needed:

// Map that has dom elements as keys. Note: O(N) lookup, insertion and deletion
class ElementMap {
  constructor() {
    this.pairs = [];
  }

  set(element, value) {
    const pair = this.pairs.find(p => p.element === element);
    if (pair) {
      pair.value = value;
    } else {
      this.pairs.push({ element, value });
    }
  }

  get(element) {
    return this.pairs.find(p => p.element === element)?.value || null;
  }

  delete(element) {
    const idx = this.pairs.findIndex(p => p.element === element);
    if (idx >= 0) {
      this.pairs = [...this.pairs.slice(0, idx), ...this.pairs.slice(idx + 1)];
    }
  }
}

Collectives™ on Stack Overflow

Using DOM elements as keys to javascript map

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related