Es fácil acceder a los elementos DOM desde JavaScript ( document.getElementById() , Document.createElement() , ...).
Además de almacenar una cadena de referencia (algún ID o índice) como atributo de datos o agregar una función EventListener a un elemento DOM, ¿hay otras formas de hacer referencia, por ejemplo, a una instancia de clase JS desde un elemento DOM?
let instance = new Class(); let element = document.createElement('...'); // something like this: element.some_reference = instance; element.some_reference.some_method()Sí, dado que los elementos DOM son objetos JS, puede agregar cualquier propiedad que desee, como demostró en su fragmento. Esto funciona y lo utilizan algunas bibliotecas que envuelven elementos DOM o necesitan almacenar datos que no son cadenas en los elementos (para datos de cadena, se prefiere el dataset de datos).
Sin embargo, la gran desventaja de esto es que los nombres de sus propiedades pueden colisionar con otras bibliotecas, otras instancias de su propia biblioteca (si se carga varias veces) o propiedades y métodos nativos.
Las soluciones para estos problemas son usar symbols en lugar de nombres y usar un WeakMap con el elemento como clave.
Es posible, puede agregar cualquier propiedad a un elemento DOM, tienen valores de javascript como cualquier otro. Pero no es una muy buena idea.
const objInstance = {prop1:1,prop2:2}; document.getElementById('domElement').randomPropValue = objInstance; console.log(document.getElementById('domElement').randomPropValue); objInstance.prop1 = 22; console.log(document.getElementById('domElement').randomPropValue); <p id="domElement">Some dom element<p>