从DOM元素获取JavaScript对象

Question

Say I create a javascript class as follows:

class DivClass {
  constructor () {
    this.div1 = document.createElement('div')
    this.div1.id = 'div1'
  }
}

Later I instantiate the class as follows:

var divObject = new DivClass()
parentDiv.appendChild(divObject.div1)

and the DIV eventually appears in the DOM.

If I was to locate the 'div1' element within the DOM, say via getElementById() for argument sake, is there anyway of getting back to the javascript 'divObject' responsible for its creation?

From what little I've learned about javascript, I kind of get the impression that the translation from javascript API to DOM is a one way trip and this just simply isn't possible.

Apologies in advance if I've gotten any of the terminology wrong, but I'm kind of new to javascript and still don't fully understand the DOM/API relationship.

Any advice would be greatly appreciated.

Answer 1

You can add a reference to the object to the DIV element.

class DivClass {
  constructor () {
    this.div1 = document.createElement('div')
    this.div1.id = 'div1'
    this.div1.divClass = this;
  }
}

Then you can use document.getElementById("div1").divClass to get the object.