我们可以在没有jQuery的情况下将一个对象分配给纯JavaScript中的html元素吗?

Question

我想将对象存储为 HTML 元素的属性！假设我有一个div 元素，当我单击div 元素时，我想从div 元素中获取对象的值，以便我可以在单击函数中使用它。

我见过有人用jquery做这件事，但我希望它在纯javascript中，因为我正在编写打字稿代码，我不想要jQuery

ex: 
var myNewObject={
"first_name": "Sam",
"last_name": "carter"
}
var div=document.getElementByID("myID");
div.setAttribute("myobject",myNewObject);
<div onclick="somefunc()>
</div>
function somefunc()
{
console.log(document.getAttribute("myobject").first_name);
}

预期产出： 山姆
实际输出： 错误

Answer 1

这是另一种方法。这是了解 Map 的好时机，它类似于对象，但键可以是任何类型，而不仅仅是字符串。可以将元素用作键，将对象用作值。

const elementMap = new Map();
const myElement = document.querySelector("#myElement");
const myObject = {x: 0, y: 0, z: 0};
elementMap.set(myElement, myObject);
...
//later we can access the object by that element
const myElement = document.querySelector("#myElement");
const myObject = elementMap.get(myElement);

以下是这种方法的两大优势。
1.无需担心与HTML元素属性的名称冲突，或者可能修改元素属性的其他代码。
2.该对象与您最初拥有的对象相同，如果您关心使用JSON字符串解决方案时未保留的引用，则这一点很重要。

Answer 2

你可以直接将任何 Javascript 对象存储在HTMLElement上：

const div = document.createElement('div');
div.myobject = { hello: 'world' };

属性中只能存储字符串，对象的字符串表示形式[object Object]。如果必须使用属性，则可以序列化对象并存储它，然后在再次检索它时对其进行反序列化：

const obj = { hello: 'world' };
const a = document.querySelector('#a');
a.setAttribute('myobject', JSON.stringify(obj));
const obj2 = JSON.parse(a.getAttribute('myobject'));
console.log(obj2.hello);

<div id="a">Hello</div>

在任何情况下，在 DOM 中存储状态通常被认为是不好的做法。