本文详细介绍了如何在javascript中有效地获取html元素的自定义`data-*`属性值，以及如何利用css属性选择器来定位和操作不依赖`id`或`class`的html元素。通过`htmlelement.dataset` api和`document.queryselector`/`queryselectorall`方法，开发者可以灵活地处理动态数据，增强网页交互性，并实现更精细的元素管理。
在现代Web开发中，我们经常需要在HTML元素上存储一些额外的数据，供JavaScript脚本使用，而这些数据又不适合作为标准的HTML属性（如id、class、name等）。HTML5引入的data-*自定义数据属性正是为了解决这一问题。它们允许开发者在HTML元素上嵌入自定义数据，并通过JavaScript轻松访问。本文将详细讲解如何利用JavaScript获取这些data-*属性的值，以及如何在不依赖id和class的情况下，通过这些属性来选择HTML元素。
什么是HTML Data属性？
data-*属性是HTML5规范的一部分，允许我们在任何HTML元素上添加自定义属性，其名称必须以data-开头。例如：
<div class="" data-target-id="VALUE" data-id="legacy"></div>
在这个例子中，data-target-id和data-id就是自定义数据属性。它们通常用于存储与元素相关的、仅供脚本使用的信息，例如组件状态、配置选项、或用于后续处理的标识符。
使用JavaScript访问Data属性值
要通过JavaScript访问HTML元素的data-*属性值，最推荐且标准的方法是使用HTMLElement接口的dataset属性。dataset属性返回一个DOMStringMap对象，其中包含了元素所有data-*属性的键值对。
立即学习“Java免费学习笔记（深入）”；
访问规则：
- data-前缀会被移除。
- 属性名中的连字符（-）会被转换为驼峰命名法。例如，data-target-id会变成targetId。
示例：获取特定元素的data-target-id值
假设我们有一个HTML元素：
<div class="" data-target-id="UNIQUE_VALUE_123" data-id="legacy"></div>
我们可以通过以下JavaScript代码获取data-target-id的值：
// 首先，需要获取到这个DOM元素
// 这里我们假设已经通过某种方式获取到了该元素，例如通过其它的选择器
const myDiv = document.querySelector('div[data-target-id="UNIQUE_VALUE_123"]');
if (myDiv) {
const targetIdValue = myDiv.dataset.targetId;
console.log(targetIdValue); // 输出: UNIQUE_VALUE_123
}根据Data属性选择HTML元素
在不使用id或class的情况下，我们可以利用CSS属性选择器来定位HTML元素。这些选择器可以直接匹配具有特定属性或特定属性值的元素。
1. 选择第一个具有特定Data属性的元素
如果你只需要获取DOM中第一个具有某个data-*属性的元素，可以使用document.querySelector()配合属性选择器。
示例：获取第一个具有data-target-id属性的div元素
<div data-target-id="VALUE_A"></div> <div data-id="other"></div> <div data-target-id="VALUE_B"></div>
const firstTargetIdDiv = document.querySelector('[data-target-id]');
if (firstTargetIdDiv) {
console.log(firstTargetIdDiv.dataset.targetId); // 输出: VALUE_A
}这里的[data-target-id]选择器会匹配任何包含data-target-id属性的元素，querySelector则返回第一个匹配项。
2. 选择所有具有特定Data属性的元素
如果页面上存在多个具有相同data-*属性的元素，并且你需要对它们进行遍历或统一处理，应使用document.querySelectorAll()。它会返回一个NodeList，你可以像数组一样对其进行迭代。
示例：获取所有具有data-target-id属性的div元素
<div data-target-id="ITEM_1"></div> <span data-target-id="ITEM_2"></span> <p data-target-id="ITEM_3"></p>
const allElementsWithTargetId = document.querySelectorAll('[data-target-id]');
allElementsWithTargetId.forEach(element => {
console.log(element.tagName + ": " + element.dataset.targetId);
});
// 可能输出:
// DIV: ITEM_1
// SPAN: ITEM_2
// P: ITEM_33. 根据Data属性的特定值选择元素
有时，我们不仅要选择具有某个data-*属性的元素，还要确保该属性的值是特定的。这时，可以使用[attribute="value"]形式的属性选择器。
示例：选择所有data-id属性值为"legacy"的div元素
<div data-target-id="OLD_A" data-id="legacy"></div> <div data-target-id="NEW_B" data-id="modern"></div> <div data-target-id="OLD_C" data-id="legacy"></div>
const legacyDivs = document.querySelectorAll('div[data-id="legacy"]');
legacyDivs.forEach(div => {
console.log(`Legacy Div Target ID: ${div.dataset.targetId}`);
});
// 输出:
// Legacy Div Target ID: OLD_A
// Legacy Div Target ID: OLD_C这里，div[data-id="legacy"]选择器精确地匹配了所有data-id属性值为legacy的div元素。
注意事项与总结
- 命名规范： data-*属性名应遵循小写字母和连字符的约定，以确保在JavaScript中通过dataset访问时能正确转换为驼峰命名。
- 性能考量： querySelector和querySelectorAll是强大的选择器，但在大型DOM结构中频繁使用复杂的属性选择器可能会影响性能。在可能的情况下，结合id或class进行选择会更高效。
- 语义化： data-*属性旨在存储自定义数据，而不是用于定义元素的样式或行为。对于样式和行为，优先使用class和id。
- 浏览器兼容性： dataset API和CSS属性选择器在现代浏览器中都有良好的支持。
通过掌握HTMLElement.dataset API和CSS属性选择器，开发者可以更加灵活和强大地处理HTML元素上的自定义数据，实现更复杂的交互逻辑，而无需依赖传统的id或class属性，从而提高代码的整洁性和可维护性。
