本教程详细介绍了如何在javascript中，不依赖html元素的id或class属性，通过html5的`data-*`自定义属性和`htmlelement.dataset` api来获取元素上的特定数据。文章将演示如何利用css属性选择器配合`queryselector`和`queryselectorall`方法，精准定位并提取所需的数据，适用于需要灵活dom操作的场景。
在现代Web开发中，我们经常需要在HTML元素上存储一些与样式或行为相关的自定义数据，但又不想污染id或class属性。HTML5引入的data-*自定义属性提供了一种优雅的解决方案。本文将深入探讨如何在不依赖传统id和class选择器的情况下，有效地获取这些自定义数据。
理解 data-* 自定义属性
data-* 属性是HTML5规范的一部分，允许开发者在任何HTML元素上嵌入自定义数据。这些属性的名称必须以data-开头，后面跟着一个或多个小写字母、数字、连字符、点、冒号或下划线组成的字符串。例如：
这些属性主要用于存储页面私有数据，可以被JavaScript脚本访问，而不会影响元素的布局或样式。
使用 HTMLElement.dataset 访问数据
JavaScript提供了一个名为dataset的DOM属性，它是HTMLElement接口的一部分，专门用于访问和操作data-*属性。dataset返回一个DOMStringMap对象，其中包含了元素所有data-*属性的键值对。
值得注意的是，当通过data
set访问时，data-*属性的名称会自动进行驼峰式转换。例如，data-target-id会转换为dataset.targetId，data-user-id会转换为dataset.userId。
以下是一个简单的示例，展示如何获取一个已知元素的data-target-id值：
无需 ID 或 Class 的元素选择
在实际应用中，我们可能需要获取页面中所有或特定data-*属性的元素，而这些元素可能没有id或class。这时，CSS属性选择器就显得尤为重要。
1. 选择第一个匹配元素 (querySelector)
如果你只需要获取页面中第一个具有特定data-*属性的元素，可以使用document.querySelector()方法配合属性选择器。属性选择器的语法是[attribute]或[attribute="value"]。
例如，要选择第一个具有data-target-id属性的div元素并获取其值：
2. 选择所有匹配元素 (querySelectorAll)
如果页面中存在多个具有相同data-*属性的元素，并且你需要获取它们所有的数据，可以使用document.querySelectorAll()方法。该方法返回一个NodeList，你可以通过循环遍历它来访问每个元素。
3. 组合属性选择器
你还可以结合其他元素类型或属性值来更精确地定位元素。例如，如果你只想选择那些data-id属性值为legacy的div元素，然后获取它们的data-target-id值：
这个例子展示了如何通过div[data-id="legacy"]选择器，精准地筛选出特定的div元素，并进一步访问其data-target-id属性。
注意事项
- 驼峰命名转换： 记住data-*属性名在dataset中会自动转换为驼峰命名。例如，data-my-attribute会变成dataset.myAttribute。
- 属性不存在： 如果尝试访问一个不存在的data-*属性，dataset会返回undefined。在处理数据时，最好进行存在性检查。
- 性能： querySelectorAll在大型DOM结构中可能会有轻微的性能开销，但对于大多数Web应用来说，其影响可以忽略不计。
- 修改数据： dataset不仅可以读取数据，也可以修改或添加数据。例如：element.dataset.newAttribute = 'someValue';。
总结
通过HTML5的data-*自定义属性和JavaScript的HTMLElement.dataset API，结合强大的CSS属性选择器（如querySelector和querySelectorAll），我们可以在不依赖id或class的情况下，灵活、高效地从DOM元素中获取和管理自定义数据。这种方法使得前端开发更加整洁、可维护，并为动态Web应用提供了强大的数据存储和访问机制。掌握这些技巧，将极大地提升你在DOM操作方面的能力。
