我可以为DOM对象添加任意属性吗？

Question

我可以任意属性为JavaScript DOM对象,如添加<INPUT>或<SELECT>元素？或者,如果我不能这样做,有没有办法通过引用属性将我自己的对象与页面元素相关联？

Answer 1

当然,人们已经做了很多年了.它不推荐,因为它很乱,你可能会搞乱现有的属性.

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

我建议使用类似jQuery的东西.data来保持元数据附加到对象上.如果您不想使用库,请重新实现jQuery.data

Answer 2

是的,您可以将自己的属性添加到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");

data- attributes只能存储字符串(或可串行化/可串行化的字符串),而不是通用运行时对象,而在dom对象上设置新属性则可以. (9认同)
@matteo - 早在 2010 年，当 Andy 写下这个答案时，Internet Explorer 中存在一个与 DOM 元素相关的问题，该元素在任意属性上引用了 JavaScript 对象。但这在 IE 的更高版本中得到了修复，因此循环引用不再是问题。 (2认同)

Answer 3

ECMAScript 6具有WeakMap,只要该对象存在,您就可以将私有数据与DOM元素(或任何其他对象)相关联.

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

与其他答案不同,此方法可确保永远不会与任何属性或数据的名称发生冲突.

Answer 4

如果有人在2015年想知道,是的,你可以 - 而 jQuery就是在数据中做到这一点.只需选择面向未来的名称,如供应商前缀或基于时间的随机后缀(jQuery).

Answer 5

您要向对象添加属性，还是向元素添加属性？

您可以使用添加属性 setAttribute

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

或者您可以仅将属性添加到javascript对象：

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