dataset 在 HTML 元素上存储和操作自定义数据

2024-08-13 暂无评论

在JavaScript中，dataset 是一个 HTMLElement 对象的属性，用于访问和操作元素的自定义数据属性（data-* 属性）。通过 dataset，你可以轻松地读取、写入和删除元素上的自定义数据。

1. `data-*` 属性

data-* 属性是 HTML5 引入的一种自定义属性，允许你在 HTML 元素上存储自定义数据。这些属性的名称必须以 data- 开头，后面可以跟随任意字符串。例如：

<div id="myDiv" data-user-id="123" data-username="john_doe">
  Hello, World!
</div>

2. `dataset` 的使用

通过 dataset 属性，你可以访问和操作这些 data-* 属性。dataset 是一个对象，它的属性名是 data-* 属性名的驼峰形式。

2.1 读取数据

const div = document.getElementById('myDiv');

// 读取 data-user-id 属性
console.log(div.dataset.userId); // 输出: "123"

// 读取 data-username 属性
console.log(div.dataset.username); // 输出: "john_doe"

2.2 设置数据

// 设置 data-user-id 属性
div.dataset.userId = "456";

// 设置 data-username 属性
div.dataset.username = "jane_doe";

console.log(div.dataset.userId); // 输出: "456"
console.log(div.dataset.username); // 输出: "jane_doe"

2.3 删除数据

// 删除 data-user-id 属性
delete div.dataset.userId;

console.log(div.dataset.userId); // 输出: undefined

3. 注意事项

dataset 属性名是 data-* 属性名的驼峰形式。例如，data-user-id 对应 dataset.userId。
dataset 返回的值始终是字符串类型。如果你需要其他类型的数据（如数字或布尔值），需要手动转换。
dataset 只适用于 HTMLElement，不能用于其他类型的节点（如文本节点或注释节点）。

4. 示例

<div id="myDiv" data-user-id="123" data-username="john_doe">
  Hello, World!
</div>

<script>
  const div = document.getElementById('myDiv');

  // 读取数据
  console.log(div.dataset.userId); // 输出: "123"
  console.log(div.dataset.username); // 输出: "john_doe"

  // 设置数据
  div.dataset.userId = "456";
  div.dataset.username = "jane_doe";

  console.log(div.dataset.userId); // 输出: "456"
  console.log(div.dataset.username); // 输出: "jane_doe"

  // 删除数据
  delete div.dataset.userId;
  console.log(div.dataset.userId); // 输出: undefined
</script>

通过 dataset，你可以方便地在 HTML 元素上存储和操作自定义数据，这在构建动态网页或单页应用时非常有用。