HTML5中的自定义属性

自定义属性（Custom Attributes） 允许在标准 HTML 属性之外，为元素添加额外的元数据（metadata）。

1. 标准方式：data-* 属性

HTML5 引入了 data-* 前缀的自定义属性规范，所有以 data- 开头的属性都会被浏览器视为自定义数据。

基本语法：

<div id="user" data-id="123" data-name="张三" data-is-admin="true">
  用户信息
</div>

• 可访问性：可通过 JavaScript 的 dataset 属性访问。

2. JavaScript 访问 data-* 属性

可以通过 element.dataset 对象访问 data-* 属性的值：

示例：

const userElement = document.getElementById('user');

// 获取 data-id 属性值（自动转换为驼峰命名）
const userId = userElement.dataset.id; // "123"

// 获取 data-is-admin 属性值
const isAdmin = userElement.dataset.isAdmin; // "true"（字符串类型）

// 修改属性值
userElement.dataset.age = '28'; // 会创建 data-age="28"

// 删除属性
delete userElement.dataset.name; // 移除 data-name

注意事项：

• 命名转换：data-* 中的连字符（如 data-first-name）会自动转换为驼峰命名（dataset.firstName）。
• 数据类型：所有值都以字符串形式存储，如需其他类型需手动转换（如 parseInt）。

3. 实际应用场景

（1）组件化数据传递

在自定义组件中存储配置信息：

<video-player data-src="video.mp4" data-autoplay="false"></video-player>

（2）DOM 与数据绑定

在列表渲染中关联数据 ID：

<ul>
  <li data-item-id="1">项目 1</li>
  <li data-item-id="2">项目 2</li>
</ul>

（3）事件驱动逻辑

在按钮中存储操作类型：

<button data-action="delete">删除</button>
<button data-action="edit">编辑</button>

document.querySelectorAll('[data-action]').forEach(button => {
  button.addEventListener('click', () => {
    const action = button.dataset.action;
    // 根据 action 执行不同逻辑
  });
});

4. 非标准自定义属性

除了 data-*，HTML 还允许使用非标准的自定义属性，但存在一些限制：

<div my-custom-attr="value">非标准属性</div>

访问方式：

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

// 使用 getAttribute/setAttribute
const value = div.getAttribute('my-custom-attr'); // "value"
div.setAttribute('my-custom-attr', 'new-value');

// 直接访问（不推荐，可能不被所有浏览器支持）
div.myCustomAttr; // undefined（非标准方式）

注意事项：

• 验证问题：HTML 验证工具可能报错。
• 样式兼容性：无法通过 CSS 选择器直接匹配（如 [my-custom-attr]）。
• 最佳实践：尽量使用 data-* 属性而非非标准属性。

5. 自定义属性 vs. 其他存储方式

注意

1. 优先使用 data-*：避免使用非标准自定义属性。
2. 保持属性名简洁：如 data-user-id 而非 data-the-id-of-the-current-user。
3. 避免敏感数据：不要在自定义属性中存储密码、token 等敏感信息。
4. 结合组件化：在自定义组件中使用 data-* 传递配置参数。
5. 数据类型转换：使用时注意将字符串转换为合适的类型（如 Number()、JSON.parse()）。