DOM Elements as Keys in Object

To store DOM Elements as keys in object without using WeakMap( ), we can do the following:

<div id="root"></div>
<script>
class NodeStore {
  constructor() {

    this.key = 'data';
  }

  set(node, value) {
    node.dataset[this.key] = value;
  }

  get(node) {
    return this.has(node) && node.dataset[this.key];
  }

  has(node) {
    return node && this.key in node.dataset;
  }
}

const ns = new NodeStore();
const root = document.getElementById('root');
ns.set(root, 'root value');
console.log(ns.has(root)); // true
console.log(ns.get(root)); // 'root value'
</script>

Demo

Related