如何在HTML中使用自定义数据属性（data-*）？

```html

```

2. 通过 JavaScript 访问自定义数据属性：

在 JavaScript 中，可以使用`dataset`属性来访问自定义数据属性。`dataset`属性是一个 DOMStringMap 对象，它包含了所有以"data-"开头的属性及其对应的值。可以通过属性名来访问属性值，属性名中的连字符会被转换为驼峰命名法。例如：

```javascript

const div = document.querySelector('div');

const customValue = div.dataset.custom;

console.log(customValue); // 输出 "value"

```

3. 设置和更新自定义数据属性的值：

可以通过 JavaScript 来设置和更新自定义数据属性的值。可以直接修改`dataset`对象中的属性值，或者使用`setAttribute`方法来添加或更新属性。例如：

```javascript

const div = document.querySelector('div');

div.dataset.custom = 'new value';

// 或者

div.setAttribute('data-custom', 'new value');

```

4. 遍历元素的所有自定义数据属性：

如果需要遍历一个元素的所有自定义数据属性，可以使用`Object.keys`方法来获取`dataset`对象的键，然后遍历这些键。例如：

```javascript

const div = document.querySelector('div');

const customAttributes = Object.keys(div.dataset);

customAttributes.forEach(attr => {

const value = div.dataset[attr];

console.log(attr, value);

});

```

使用自定义数据属性时，需要注意以下几点：

1. 自定义数据属性应该用于存储与元素相关的自定义数据，而不是用于替代 HTML 的语义和结构。

2. 自定义数据属性的命名应该具有描述性，以便于理解和维护。

3. 在使用自定义数据属性时，应该遵循 HTML 和 CSS 的规范，避免与其他标准属性或 CSS 选择器冲突。

自定义数据属性是 HTML 中一个非常实用的功能，它可以帮助我们在 HTML 元素上存储和传递额外的信息，并且可以通过 JavaScript 进行访问和操作。通过合理使用自定义数据属性，我们可以实现更灵活、可扩展的 Web 应用程序。