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.
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.
-
1
why would you
document.getElementByIdwhen you can directly use theid? – Karoly Horvath Commented Jun 23, 2013 at 20:54 - 1 @KarolyHorvath Sorry this was a simplified example, I do need to key off the element. – Kevin Sylvestre Commented Jun 23, 2013 at 20:55
- You may want to check this thread on unique arrays – Stokedout Commented Jun 23, 2013 at 20:56
- @KarolyHorvath what do you mean? – GriffLab Commented Jun 23, 2013 at 22:28
- 1 @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 Commented Jun 23, 2013 at 22:33
1 Answer
Reset to default 10In 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=--harmonyto 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.