HTML5的自定义属性data-*详细介绍和JS操作实例

HTML5的自定义属性data-*是在HTML5标准化过程中新增加的一种方式，它可以通过在HTML元素上添加data-前缀的属性，来给元素附加自定义的数据。这些数据既可以用于增强现有的HTML特性，也可以用于JavaScript操作。

什么是自定义属性data-*？

自定义属性data-*的命名规则要求属性名必须以"data-"开头，并在开头后加上自己定义的属性名，例如data-index、data-name等。在属性名后可以添加任意的字符，比如data-id、data-info等都是合法的。

自定义属性data-*可以使用任意字符和任意数量的属性值，每个属性值之间用空格分隔。比如：

<div data-info="Joe" data-age="20">John Doe</div>

在这个例子中，我们定义了一个data-info和一个data-age属性，分别赋值为"Joe"和"20"。

自定义属性data-*的JS操作实例

在JavaScript中，我们可以通过HTMLElement.dataset来访问元素的自定义属性data-*。例如：

const div = document.querySelector("div");
// 获取 data-info 属性的值
const info = div.dataset.info;
// 获取 data-age 属性的值
const age = div.dataset.age;

在这个例子中，我们首先使用querySelector获取一个div元素，然后通过dataset对象分别获取了data-info和data-age属性的值。

除此之外，我们还可以通过HTMLElement.dataset来设置元素的自定义属性data-*。例如：

const div = document.querySelector("div");
// 设置 data-info 属性的值
div.dataset.info = "Lisa";
// 设置 data-age 属性的值
div.dataset.age = "25";

在这个例子中，我们首先获取了一个div元素，然后通过dataset对象分别设置了data-info和data-age属性的值。

自定义属性data-*的示例说明

在实际开发中，自定义属性data-*通常用于以下场景：

1. DOM操作：通过自定义属性data-来存储额外的数据，以便在JavaScript中进行DOM操作和页面更新。
   例如，我们可以在页面中添加一个列表，通过自定义属性data-来存储每个列表项的信息：

<ul>
  <li data-id="1" data-info="Peter" data-age="30">Peter</li>
  <li data-id="2" data-info="Lucy" data-age="25">Lucy</li>
  <li data-id="3" data-info="John" data-age="18">John</li>
</ul>

然后在JavaScript中就可以通过dataset和querySelector等API来获取元素的数据，进行DOM操作和页面更新。

1. 数据存储：通过自定义属性data-来存储一些需要在页面加载后自动初始化的数据。
   例如，我们可以在页面中添加一个表单，通过自定义属性data-来存储一些默认值和一些必要的信息：

<form action="#" method="POST">
  <input type="text" name="username" placeholder="Enter your username" data-default="<%=username%>" required />
  <input type="email" name="email" placeholder="Enter your email" data-placeholder="[e-mail]" />
</form>

然后在JavaScript中就可以通过dataset和defaultChecked、placeholder等属性来设置表单元素的默认值或占位符等相关信息。