50

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

在我看来，有两种可能性：

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

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

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

感谢您的任何回答

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

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

4

4 回答 4

23

根据 W3C

数据- *

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

班级

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

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

如果您使用class属性，您可以受益于本机getElementsByClassName搜索（具有 O(1) 时间复杂度）和classList用于切换、添加和删除类的对象。没有什么像getElementsByAttributeValue。Element.querySelectorAll('[data-attr="value"]') 参考 速度相对较慢，请参阅 Oliver Moran 的评论。它具有 O(n) 时间复杂度。

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

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

于 2013-06-19T07:26:57.593 回答
15

如果您只是想将“值”与 DOM 元素相关联以用于计算目的，那么data-attribute就是要走的路，

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

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

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

John Resig 写过关于数据属性的文章

于 2013-06-19T07:14:54.653 回答
14

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

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

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

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

JsPerf.com 根据 ID、Class 或属性进行选择的结果

于 2015-03-26T01:12:34.853 回答
0

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

W3 规范使用 data 属性嵌入自定义不可见数据

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

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

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

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

于 2015-01-29T23:16:52.333 回答