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

Question

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

Answer 1

否。

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

如果您滥用ID属性，则可能是个例外：在其中存储的不仅仅是标识符的内容（例如，复合数据或不唯一的内容）。选择部分ID值（如果支持）会带来糟糕的性能。我建议使用数据属性代替滥用ID属性。

Answer 2

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

因此，是，您可以使用 data-* 属性代替 id 属性，并提供该元素是唯一标识的。

---

HTML data-* Attributes

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