我可以向DOM对象添加任意属性吗?

当然,人们这么做已经很久了。不建议这样做,因为它很乱,可能会弄乱现有的属性。

如果用循环代码 for..in 您的代码可能会中断,因为您现在将通过这些新附加的属性进行枚举。

我建议使用类似jquery的 .data 它将元数据附加到对象上。如果不想使用库,请重新实现 jQuery.data

是的,您可以向DOM对象添加自己的属性,但请记住要小心避免命名冲突和循环引用。

document.getElementById("myElement").myProperty = "my value";

HTML5引入了通过标记将数据附加到元素的有效方法-使用 data- 属性前缀。您可以在HTML 4文档中使用此方法,但不会验证:

<div id="myElement" data-myproperty="my value"></div>

您可以通过javascript使用 getAttribute() :

document.getElementById("myElement").getAttribute("data-myproperty");

ECMAScript 6具有weakmap,允许您将私有数据与一个dom元素(或任何其他对象)关联,只要该对象存在。

const wm = new WeakMap();
el = document.getElementById("myelement");
wm.set(el, "my value");
console.log(wm.get(el)); // "my value"

与其他答案不同,此方法保证不会与任何属性或数据的名称发生冲突。

如果有人想知道2015年,是的,你可以- 和 jquery就是这么做的 data . 只需选择未来的证明名称,如供应商前缀或基于时间的随机后缀(jquery)。

要向对象添加属性,还是向元素添加属性?

可以使用添加属性 setAttribute

var el = document.getElementById('myelement');
el.setAttribute('custom', 'value');

或者只需向javascript对象添加属性:

var el = document.getElementById('myelement');
el.myProperty = 'myValue';

如果必须,请不要使用标准的HTML属性。以下是使用自定义属性的教程:

http://www.javascriptkit.com/dhtmltutors/customattributes.shtml

它是HTML5,但它是向后兼容的。