如何在HTML元素中添加JavaScript对象并保留其对象类型？

当然可以，这里有两种实用方法能帮你实现需求：

方法1：直接给DOM元素挂载自定义属性 #

你可以直接给目标HTML元素添加一个自定义属性，将对象直接赋值给它，这样就能完全保留对象的原始类型：

const codeEl = document.querySelector('div')
let obj = {
    "test": 1,
    "test2": 2
}

// 直接将对象挂载到元素的自定义属性上
codeEl.attachedData = obj;

// 后续使用时直接访问该属性即可
console.log(typeof codeEl.attachedData); // 输出 "object"
console.log(codeEl.attachedData.test); // 输出 1

注意：这种方法虽然简单直接，但如果元素从DOM中被移除后，由于对象还被元素的属性引用，可能会暂时无法被垃圾回收，存在轻微的内存泄漏风险，适合短期关联场景。

方法2：使用WeakMap关联元素与对象 #

如果需要更安全的内存管理，推荐使用WeakMap来存储元素和对象的关联关系。WeakMap的键是弱引用，当HTML元素被DOM移除并被垃圾回收时，对应的对象也会自动被回收，不会造成内存泄漏：

const codeEl = document.querySelector('div')
let obj = {
    "test": 1,
    "test2": 2
}

// 创建WeakMap实例用于存储关联关系
const elementDataMap = new WeakMap();
// 将元素和对象关联起来
elementDataMap.set(codeEl, obj);

// 后续需要获取对象时，通过元素从WeakMap中取出
const storedObj = elementDataMap.get(codeEl);
console.log(typeof storedObj); // 输出 "object"
console.log(storedObj.test2); // 输出 2

注意：WeakMap的键只能是对象类型（这里就是DOM元素），无法用字符串作为键，而且无法遍历所有键值对，适合只需要通过元素查找对应数据的场景。

另外需要提醒的是，不要使用元素的dataset属性，因为dataset只能存储字符串类型的数据，赋值对象时会自动转为[object Object]字符串，不符合你的需求。

内容的提问来源于stack exchange，提问作者Mohammad Kargar