将 DOM 节点链接到（浏览器内）域对象的选项：直接引用可以吗？

Question

对于单页应用程序：我希望每个 DOM 节点都有对单个（浏览器内）域对象的引用。只存储这样的直接引用是否可以：

var myDomainObject = ...;
var DOMNode = document.getElementById("myId");
DOMNode.domain_object = myDomainObject;

这安全、可重复吗？浏览器可以通过附加的 JavaScript 属性来做一些神秘的事情吗？

谢谢。

Answer 1

从经验的角度来看：我已经将数据直接附加到节点，没有出现任何问题，并且从未遇到过问题。从规范的角度来看，我的解释是，不一定建议这样做，但在自定义属性不与其他任何内容冲突的情况下是安全的。

在通用基础设施 - 可扩展性中，对作者（即您）的建议是仅使用 [data-*] 属性：

作者可以包含内联客户端脚本或服务器端站点范围脚本的数据，以使用 data-*="" 属性进行处理。这些保证永远不会被浏览器触及，并允许脚本包含 HTML 元素上的数据，然后脚本可以查找和处理这些数据。

有效的用户代理的要求是在 DOM 中保留它无法识别的任何内容。

用户代理必须将他们不理解的元素和属性视为语义中立；将它们保留在 DOM 中（对于 DOM 处理器），并根据 CSS 设置它们的样式（对于 CSS 处理器），但不从中推断出任何含义。

因此，我的建议与 W3C 避免冲突的目标一样，是创建引用DOM元素的对象。但是，如果您“必须”将奇怪的东西标记到 DOM 上，请放心，用户代理需要将其留在那里。但如果您确实必须这样做，那么使用这些data-*属性可能是明智的！

（我个人不使用它们，并且倾向于将对象和值放在当时最方便的东西上。但是，我可能对大约 15 年的黑客行为和用户代理不合规的“功能检测”感到厌倦。即使现在，我也不认为 IE 支持该data-*标准...）