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>

您可以使用getAttribute()通过JavaScript访问：

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

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正在data中做到这一点。只需选择面向未来的名称，如供应商前缀或基于时间的随机后缀（jQuery）。

Answer 5

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

您可以使用setAttribute

添加属性

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

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

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

Answer 6

如果必须，请不要使用标准HTML属性。这是一个使用自定义属性的教程：

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

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

Answer 7

我正在探索答案，并且想补充一点，我们可以使用domElements属性在dataset上设置属性，也可以在HTMLOrForeignElement上使用（这是多个功能的混合体） HTMLElement，SVGElement和MathMLElement接口共有）。

根据mdn

HTMLOrForeignElement接口上的dataset属性提供对元素上设置的所有自定义数据属性(data-*)的读/写访问。此访问权限在HTML和DOM中均可用。它是DOMStrings的映射，每个自定义数据属性都有一个条目。

let element = document.getElementById("test");
let footer = document.querySelector("#output");

/* get element values using camelCase names through .dataset */
let sample = element.dataset.sample;
let sampleNumber = element.dataset.sampleNumber;

let dataFromElement = sample + " :: " + sampleNumber;

footer.innerHTML = element.innerHTML  + dataFromElement;

<input type="hidden" id="test" data-sample="Sample" data-sample-number=34 />
<div id="output"> </div>

尽管对于Internet Explorer的支持和性能存在担忧，但是您可以检查here。

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

7 个答案: