在 JavaScript 的 HTML 标记中存储任意信息？答案

【问题标题】：Storing arbitrary info in HTML tags for JavaScript?在 JavaScript 的 HTML 标记中存储任意信息？
【发布时间】：2009-10-21 10:59:59
【问题描述】：

一个非常笼统的问题。

我正在动态生成一个表单，该表单使用 HTML / JavaScript 拆分为多个级别的选项卡。

我想使用 CSS 和 background-image 用星 * 符号突出显示一些字段（值与全局模板不同的字段）。

JS 字段遍历每个字段，比较其值，并在必要时为其设置 CSS 类。到目前为止，一切顺利。

现在，我不仅希望每个更改的字段都用星号标记，而且还希望它所在的选项卡。

因为我喜欢它简单，所以我想将选项卡的元素 ID 作为属性存储在每个字段的 HTML 标记中的某处（类似于“parentTab”）。然后，JS 函数会突出显示该字段及其“parentTab”元素（也可能是那个“parentTab”元素）。

我的第一种方法是滥用“title”属性或其他东西来存储 parentTab。当然，这很脏。但是，如果我只是在 DIV 或 INPUT 标记中随意添加任意属性，它将不再验证，并且我觉得访问这些属性不太安全 - 谁知道不同的浏览器如何处理它，并且将来会处理它？

所以我的问题是：是否有一种有效的、符合标准的方式——某种属性——将任意数据存储在 HTML 标记中，以供 JavaScript 进一步处理？

当然，我可以创建一个“parentTabs”JS 数组并完成它。但是将其存储在输入本身中会更加优雅。

【问题讨论】：

【解决方案1】：

随着 html5 的引入，您可以使用attributes that start with data-，他们仍然会验证。

<input type="text" name="username" data-parentTab="tab1" value="non-default">

【讨论】：

这对于 5-10% 的拥有 HTML5 浏览器的人群来说非常棒。
正确。 @OP：而且您可以立即开始使用它，即使规范尚未完成。只需将您的 doctype 声明更改为 <DOCTYPE HTML>（这就是全部内容；HTML5 使 doctypes 很多更容易记住）。
@cletus：这对于旧版浏览器来说无关紧要，因为它除了保存信息之外并没有真正做任何事情。这将在 IE6 中完美运行。它只是不会验证为 XHTML 或 HTML4...
@cletus：不是这样，非 HTML5 浏览器普遍会忽略他们不理解的属性，所以你现在可以使用这种技术，知道它是面向未来的安全。这里有一些很好的阅读：ejohn.org/blog/html-5-data-attributes
@T.J.Crowder，这是<!DOCTYPE html> ;-)

【解决方案2】：

您可以通过编写 isChildOf 函数来找出字段属于哪个选项卡式元素，如下所示：http://jimkeller.blogspot.com/2008/07/jquery-ischildof-is-element-child-of.html

使用 DOM 来解决这个问题总是比以某种自定义格式复制数据更“优雅”。

【讨论】：

需要 jQuery，虽然...但是如果没有 jQuery，这也应该相当容易。
“使用 DOM 来解决这个问题总是比以某种自定义格式复制数据更“优雅”。” - 点。我现在可能会选择“rel”属性，因为它做起来太快了；从长远来看，DOM 方法是正确的。

【解决方案3】：

rel 属性通常是存储此类数据的绝佳选择。

【讨论】：

【解决方案4】：

在 jQuery 中，您可以使用 Data API。 http://docs.jquery.com/Internals/jQuery.data

如果您不使用 jQuery，您可以添加自己的标签并在其中存储任何内容。每个人都会告诉你这不好等等，但是所有伟大的网络公司都在这样做。所以你最终会进入一家伟大的公司;-)

【讨论】：

【解决方案5】：

我喜欢John Resig 的做法：任意类型的脚本标签。他的例子是关于模板的，但你真的可以将它用于任何事情。

【讨论】：