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

Question

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

我看到的方式有两种可能性：

• 我在我的元素中添加了一个css类，它不一定与任何现有的css规则相对应：<div class="validation-required"></div>
• 或者我使用如下数据属性：<div data-validation-required></div>

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

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

感谢您的回答

PS：我意识到这个问题可能容易产生主观意见，但我希望对现代浏览器中使用的内容有一致意见。

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

Answer 1

如果您只是想将“值”与DOM元素相关联以用于计算目的，那么data-attribute是可行的方法，

  

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

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

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

John Resig撰写了关于data-attributes

的文章

Answer 2

根据W3C

<强> data- *

  

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

<强> class

  

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

如果您使用class属性，则可以从本机 getElementsByClassName搜索和 classList对象中获益，以便切换，添加和删除类。 没有什么比getElementsByAttributeValue，你需要迭代。 _{见Oliver Moran的评论}

另一方面，如果您需要存储多个数据，可以使用dataset attribute。

因此，如果您想要搜索或者数据是否会影响元素的外观，我会使用class。如果您需要存储多个数据，data会更合适。

Answer 3

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

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

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

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

Answer 4

对于这个问题的未来旁观者：

这里给出了使用自定义数据元素的规范 - 以及示例用法：

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