使用“data-*”属性替换 HTML 标记中的“id”属性以进行 CSS 选择答案

【问题标题】：Using "data-*" attributes to replace the "id" attributes in HTML tags for CSS-Selecting Purpose使用“data-*”属性替换 HTML 标记中的“id”属性以进行 CSS 选择
【发布时间】：2019-05-31 20:59:20
【问题描述】：

使用“data-”属性替换元素（标签）中的“id”属性以进行 css 选择，然后在自动化测试脚本中使用这些“data-*”属性是个好主意吗？

【问题讨论】：

为什么有必要这样做？

标签： html selenium css-selectors custom-data-attribute

【解决方案1】：

没有。

id 上的 CSS 选择和 DOM 树选择比选择任何其他属性要快得多。在某些浏览器中，数据属性选择的效率可能低于其他属性的选择。

如果您滥用 id 属性，则可能会出现例外情况：在其中存储不仅仅是标识符的东西（例如复合数据或不唯一的东西）。如果支持，选择部分 id 值会带来糟糕的性能。我建议使用数据属性而不是滥用 id 属性。

【讨论】：

【解决方案2】：

实际上，您可以使用元素的任何属性。

所以，是的，您可以使用 data-* 属性代替 id 属性，前提是元素是唯一标识的。

HTML data-* Attributes

data-* 属性用于存储页面或应用程序私有的自定义数据。
data-* 属性使我们能够在所有 HTML 元素中嵌入自定义数据属性。
然后可以在页面的 JavaScript 中使用存储的（自定义）数据来创建更具吸引力的用户体验（无需任何 Ajax 调用或服务器端数据库查询）。
data-* 属性由两部分组成：
- 属性名称不能包含任何大写字母，并且必须在前缀data-之后至少一个字符长
- 属性值可以是任意字符串
注意：以data- 为前缀的自定义属性将被用户代理完全忽略。

【讨论】：

问题是，“这是个好主意吗？”不是“可以做到吗？”这完全是题外话。