javascript - DOM 元素可以有一个值为任意对象(不是字符串)的属性吗？

Question

我想做这样的事情:

var elem = document.createElement("input");
elem.setAttribute("my-attribute", myObject);
document.getElementById("parent").appendChild(elem);

稍后，我将需要在对此(和类似)元素执行某些操作时获取 myObject。

注意:我需要它作为一个属性(而不是，例如，作为元素对象的成员，如 elem.myAttribute = myObject)，对于某些元素，该值是硬编码到页面 HTML 中的字符串。我需要的是能够以编程方式为其他元素设置此属性，并使用并非总是纯字符串的值。

我试过了，它在我的浏览器 (Firefox 14) 中工作，但我需要知道这是否可以跨浏览器工作，以及如果我决定，我是否能够使用 jQuery 获取这些属性的值稍后在我的页面中使用 jQuery。

Answer 1

否 - 根据定义，属性存储字符串值。显而易见的方法是将对象存储为属性，但您说这不合适。

或者:

1) 使用 jQuery 的数据 API(因为它不会按字面意思记录元素上的数据，因此您可以存储任何您想要的数据，而不仅仅是字符串)

2) 将对象字符串化并将其作为 HTML5 数据属性附加到元素。

var elem = document.querySelector('p'),
    obj = {foo: 'bar'};
elem.setAttribute('data-myObj', JSON.stringify(obj));
/* ...then, later... */
var data = JSON.parse(elem.getAttribute('data-myObj'));

但请注意，由于我们处理的是 JSON，因此您无法将方法存储为该对象的一部分。它们将被 JSON.stringify() 去除。

最后，使用属性意味着您会弄乱您的 HTML，因为它们出现在任何 HTML 转储中(与属性不同)，但这纯粹是一种表面上的弱点。