最佳实践：类或数据属性作为标识符答案

【问题标题】：Best practice: class or data attribute as identifier最佳实践：类或数据属性作为标识符
【发布时间】：2013-06-19 07:07:02
【问题描述】：

最近我一直在想最好的方法是对多个元素执行 javascript 操作。

我认为有两种可能性：

要么向我的元素添加一个 css 类，它不一定对应于任何现有的 css 规则：<div class="validation-required"></div>
或者我使用这样的数据属性：<div data-validation-required></div>

在我的 IDE（使用 R# 的 Visual Studio 2012）中，如果我使用第一种方法，我会收到警告说我不应该使用未定义的 css 类。这让我相信这可能不是最好的主意。然而，这是我最常看到使用的方法，尽管这可能只是我们可以使用 data- 属性前几天的遗留物。

所以我的问题很简单，我应该用哪种方式简单地“标记”一个元素以进行进一步处理？

感谢您的任何回答

PS：我意识到这个问题可能容易产生主观意见，但我确实希望对在现代浏览器中使用什么有一个共识。

PPS：我已经对这个问题进行了搜索，但大多数问题都是关于性能的，这不是我对一次性情况的主要关注。

【问题讨论】：

+1 到数据属性 :)
@karaxuna 你喜欢这个有什么特别的原因吗？还是只是个人口味？
我无法说出任何具体的论据。但我认为 css 类用于分配样式，而数据属性正是用于将数据分配给元素。这对我来说更自然
+1 上课。类已经充当某种布尔标志，而属性通常具有与之关联的值。此外，按班级选择更快。
+1 : 我喜欢深入的基础设施问题

标签： javascript html

【解决方案1】：

根据 W3C

data-*

自定义数据属性旨在存储页面或应用程序私有的自定义数据，没有更合适的属性或元素。这些属性不适用于独立于使用这些属性的站点的软件。

class

class 属性在 HTML 中具有几个角色：作为样式表选择器（当作者希望将样式信息分配给一组元素时）。供用户代理进行通用处理。

上面的粗体文本是自动保证可以使用没有在 CSS 中定义的类属性。来自 VS 2012 的警告过于热心了。

如果您使用class 属性，您可以受益于原生getElementsByClassName 搜索（具有O(1) 时间复杂度）和classList 对象来切换、添加和删除类。 ~~没有什么比得上getElementsByAttributeValue。~~ 相对较慢的是Element.querySelectorAll('[data-attr="value"]') ref _{参见 Oliver Moran 的评论}。它的时间复杂度为 O(n)。

另一方面，如果需要存储多个数据，可以使用dataset attribute。所以如果你想搜索或者如果数据影响元素的外观，我会使用class。如果您需要存储多个数据，data 会更合适。

在您的特定情况下，我会考虑 required 或 pattern 输入属性（因为 HTML5 大部分输入验证从 JS 转移到 HTML）。为了设置此类元素的样式，CSS 选择器使用与 querySelectorAll 相同的语法。

【讨论】：

您可以在 jQuery 中使用 data-* 选择器来获取所有使用 that data-attribute 的元素的列表
@badZoke 这个问题不是关于 jQuery 的，所以你的注释是 OT。我的观点是关于原生支持。框架应该用于特定的架构。如果任何 JS 框架想要添加一些通用的伪原生特性（如 data-* 选择器），那只是意味着创建者不了解背后的一些原理。
最后，我根据指定的 W3C 标准选择了这个答案。它没有提到类解析为特定样式的要求。特别是“用于用户代理的通用处理”。让我觉得我可以使用它，而不是一个空的数据属性。
"没有像 getElementsByAttributeValue 这样的东西，你需要迭代。"就在这里。尝试document.querySelectorAll(tag[data-attr="value"]);，它将选择所有<tag data-attr="value" /> 标签。见developer.mozilla.org/en-US/docs/Web/API/…

【解决方案2】：

如果您只是想将“值”与 DOM 元素关联以进行计算，那么data-attribute 是您的最佳选择，

任何“数据”的东西都将被视为私有的存储区域数据（在最终用户看不到它的意义上是私有的——它看不到影响布局或展示）

此外，jQuery 提供了.data()，这让生活更轻松，因此您不必为使用[data-*] 选择器而烦恼。

如果您提供一个类名，那么考虑到语义，它应该有一些与之相关的样式。

John Resig 写过关于data-attributes

【讨论】：

我理解你的意思，但在我的场景中，我没有存储任何数据。我正在使用一个空的数据属性来标记我的元素以供我的脚本拾取。如果我将它用于此，您的答案是否仍然有效？
是的，因为您仍在使用它作为脚本的访问点，而不是其他任何东西（不适用于样式和/或演示）。此外，您正在存储数据（告诉脚本获取数据的数据）。

【解决方案3】：

测试这些东西的最佳方法是在 jsperf.com 上搜索测试套件

这是您感兴趣的： http://jsperf.com/id-vs-class-vs-data-attribute

最有效的选择器是使用类。

这可能是类被更多地用于选择的结果，所以浏览器会对其进行更多优化？

【讨论】：

大多数情况下没关系。我刚刚在最新的 Chrome 上测试过，id 有 1300000 ops/s，data-id 有 90000 ops/s。尽管如此，在 90000ops/s 下，执行只需要 0.01ms。在一个典型的例子中，你想通过数据属性选择一个元素，你一次只做一次。
请不要忘记您正在快速机器上测试它。有些人使用速度较慢的计算机或移动设备。因此，在 2010 年的旧 Android 平板电脑上速度提高 14 倍可能会有所不同。

【解决方案4】：

如果您决定使用data-* 方法，此处提供了自定义数据元素的使用规范以及示例用法：

W3 spec on embedding custom non visible data with the data attribute

这是一个简短的相关摘录：

3.2.3.8 使用 data-* 属性嵌入自定义不可见数据自定义数据属性是无命名空间中的属性，其名称以字符串“data-”开头，连字符后至少有一个字符，与 XML 兼容，并且不包含 U+0041 到 U+005A 范围内的字符（拉丁文大写字母 A 到拉丁文大写字母 Z)。

HTML 文档中 HTML 元素的所有属性都会自动变为 ASCII 小写字母，因此对 ASCII 大写字母的限制不会影响此类文档。

自定义数据属性旨在存储页面或应用程序私有的自定义数据，没有更合适的属性或元素。

【讨论】：

仅提供链接是不够的。引用回答 OP 问题的相关信息。
@FrederikKrautwald：答案已更新。感谢您的提示。