Why You Should Use Data Attributes data-*

为什么你应该使用数据属性 data-*

HTML 元素属性介绍

HTML 元素可以拥有自己的属性，用于表达各种类型的信息，如下：

<div class="names" role="region" aria-label="Names"></div>

但当要给一些元素新增客制化的数据时，能不能将事件的状态与数据记录在 HTML 中呢？具体来说：窗口的显示状态、按钮的功能种类？答案是可以的，但做法并非直观的直接将属性写在标签上，如下：

 <!-- `highlight` 并不是合法的属性 -->
<div highlight="true"></div>

<!-- `large` 并不是一个合法的属性 -->
<div width="large"></div>

以上的做法虽然能达成在 HTML 中新增自定义数据的目的，但会出现几个问题，强烈不建议：

好消息是，只要新增 data-*🔗 前缀，HTML 就知道这是一种「自定义的属性」，解决了以上两个问题。

<!--想怎么定义数据，就怎么定义-->
<div
  data-name-item
  data-first-name="Joe"
  data-last-name="Doe"
  data-active
></div>

相较于将数据的状态记载在 id 或 class 上，除了受既定用途的影响与局限性外，建议选择元素、记录数据都使用 data 属性会是更为妥当的做法。

延续前面在 <div> 中自定义的三笔数据，可以先借由 querySelector 选择具有该自定义属性的节点：

const foobar = document.querySelector('[data-name-item]');

再使用 dataset 这个属性来获取其所有自定义的 data 属性(返回对象)：

// 输入
console.log(foobar.dataset)
// 输出
{
  "nameItem": "",
  "firstName": "Joe",
  "lastName": "Doe",
  "active": ""
}

我们可以使用点记法(Dot Notation)或括号记法(Bracket Notation) 来读取这个对象。

console.log(foobar.dataset.firstName); // Joe
console.log(foobar.dataset[lastName]); // Doe

有趣的是，原先是烤肉串 (Kebab Case) 的数据值被转换成了小驼峰式 (Lower Camel Case) 的显示方式，再来没有值的 data 属性会被自动指派一个空的字符串为内容，完全不存在的属性将会返回 undefined，需特别留意。

更动 data 属性就和修改一般对象一样容易，一样可以用以上两种方法去更改。

foobar.dataset['firstName'] = 'new';
foobar.dataset.firstName = 'new';

删除 data 属性就和删除一般对象一样容易，可以使用 delete🔗 方法。

delete foobar.dataset;

data 属性是一个正式存储资料于 HTML 的做法，让 Javascript 与 CSS 都能读取到元素的资料，直接把资料置于客户端的元素中。