javascript - 我应该通过 id/class 名称还是数据属性来选择 DOM 元素？

Question

一位同事建议更改我们的完整 JavaScript 代码，以仅通过数据属性而不是 id/类名称来选择 DOM 元素。

他说，这很糟糕:

$('#foo')
$('.bar')

这很好:

$('[data-foo]')

我不知道这样做有什么好处，所以我用谷歌搜索了一下，找到了这两篇博文:

• 反数据属性:http://intuio.at/en/blog/dont-use-data-attributes-to-find-html-elements-with-js/
• 亲:http://roytomeij.com/blog/2012/dont-use-class-names-to-find-HTML-elements-with-JS.html

由于这些博客文章只是两个开发人员的意见，我想知道这方面的实际实践经验是什么？使用数据属性进行 DOM 选择是否真的有好处，还是一个愚蠢的想法？

Answer 1

$('#foo') 是最快的，但是只有一个元素可以有一个 id

$('.bar') 比数据属性快，但是很乱，因为类通常与 css 样式相关联

$('[data-foo]') 是最慢的(略微)但最不可能干扰其他操作

速度测试 - http://jsperf.com/data-selector-performance