Using an Element as the key to a Hash in JavaScript

Question

I want to create a hash with DOM elements as keys. This is illustrated by the following code:

var hash = {};
var set = function(element, value) {  hash[element] = value; };
var get = function(element)        {  return hash[element];  };

set(document.getElementById('foo'), 'bar');
get(document.getElementById('foo')); // returns 'bar'

How can I ensure that hash maps to a unique value for each Element?
Note that I can't use the raw ID string as key, because any arbitrary Element may be passed in, including those without a id.

why would you document.getElementById when you can directly use the id? — Karoly Horvath
– Karoly Horvath, Commented Jun 23, 2013 at 20:54
@KarolyHorvath Sorry this was a simplified example, I do need to key off the element. — Kevin Sylvestre
– Kevin Sylvestre, Commented Jun 23, 2013 at 20:55
@GriffLab Many DOM nodes do not have an "id" attribute, so these cannot be uniquely identified by their id string. The OP wants to get the ability to use any DOM node as key. — Rob W
– Rob W, Commented Jun 23, 2013 at 22:33

Community · Accepted Answer · 2017-05-23 11:58:44Z

10

In JavaScript until ES 6, only strings can be used as a key. If you want to use DOM elements, either use two linked lists, or the WeakMap object. A bonus of the latter method is that it does not cause memory leaks.

Applied to your example:

var hash = new WeakMap();
hash.set(document.getElementById('foo'), 'bar');
hash.get(document.getElementById('foo')); // returns 'bar'

As of writing, WeakMap is only supported by the following browsers:

Firefox 6
Chrome 19 (disabled by default, see instructions to enable)
Opera 15 (disabled by default, start Opera with --js-flags=--harmony to enable it).
Internet Explorer 11 (confirmed to exist in leaked build)

In all other browsers, WeakMap support can be achieved by loading the WeakMap.js polyfill.

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Jun 23, 2013 at 20:57

Rob W

350k87 gold badges811 silver badges683 bronze badges

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

4 Comments

gdoron Over a year ago

"Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes."

Rob W Over a year ago

@gdoron A polyfill is available, such as Weakmap.js, in case you worry about browser compatibility.

Benjamin Gruenbaum Over a year ago

"A bonus of the latter method is that it does not cause memory leaks." I'd argue in this case OP should just use a regular map.

Daniel Heath Over a year ago

This answer is not correct in current chrome; HTMLDivElement instances will act as the same key as their .toString() representation.

Collectives™ on Stack Overflow

Using an Element as the key to a Hash in JavaScript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related