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转储中(与属性不同),但这纯粹是一个整容的弱点.