写在前面

有些知识点，自己没有实际用到时，永远不知道其的真正作用是什么，有了解到html中有提供data-这个全局属性，也知道其属性值获取方法是dataset有点特别，但并不清楚能用来干嘛。在自己做项目时，需求是一段html内容是在js中动态创建的，有些数据内容是在创建那一时刻才确定的，后面在事件绑定时，需要获取到数据创建当时的一些信息，因此就想到了用data-属性将当时的数据带出去，后续用js获取html全局属性的方式获取数据，就这样用到了data-*。

如果想在 html 元素上添加数据，请务必使用 data-* 属性，否则添加自定义属性，比如

，在 js 中设置改变 xxx 属性的时候，结果并不会反显到 dom 上。例如改成 test.xxx = “bbb”，在 dom 上这个属性不会变成期望的 bbb，因为这个非 dom 标准的属性的修改不会触发 dom 的重新渲染。除非使用 setAttribute 修改。

1. 是什么

HTML5 是具有扩展性的设计，它初衷是数据应与特定的元素相关联，但不需要任何定义。data-* 属性允许我们在标准内于HTML元素中存储额外的信息，而不需要使用类似于 classList 的标准外属性。

通过添加 data-* 属性，即使是普通的 HTML 元素也能变成相当复杂且强大的编程对象。

简单来说就是data-*是在html元素存储相关数据信息的。

2. 用法

2.1 命名

说了那么多，data-到底是什么？是什么？其实就是data-xxx，xxx为你定义的数据信息名，*是通配符，即统指自定义命名的数据信息名，但该命名需要遵守一定的规范。

  • 可以使用遵循 xml名称生产规则 的任何名称来被替换，并具有以下限制：
  • 该名称不能以xml开头，无论这些字母是大写还是小写；
  • 该名称不能包含任何分号 (U+003A)；
  • 该名称不能包含A至Z的大写字母。

例如记录一篇文章的相关信息如下：

  1. <article
  2.   id="electriccars"
  3.   data-columns="3"
  4.   data-index-number="12314"
  5.   data-parent="cars">
  6. ...
  7. </article>

2.2 DOM访问

说是通过JS访问，倒不如说是js通过DOM接口访问说的准确。在使用JS通过DOM访问时有如下几种方法：

1) 用Element原型的获取全局属性的方式

getAttribute和setAttribute方法，属性名要一模一样

  1. //实例
  2. const article = document.querySelector('#electriccars');
  4. let column = article.getAttribute('data-columns')// "3"
  5. let index = article.getAttribute('data-index-number') //12314
  6. let parent = article.getAttribute('data-parent')// "cars"

2) 用HTMLElement原型专门提供的data-*获取方式

为了使用dataset对象去获取到数据属性，需要获取属性名中data-之后的部分(要注意的是破折号连接的名称需要改写为骆驼拼写法(如”index-number”转换为”indexNumber”))。

  1. //语法
  2. string = element.dataset.camelCasedName;
  3. element.dataset.camelCasedName = string;
  1. //实例
  2. const article = document.querySelector('#electriccars');
  4. article.dataset.columns // "3"
  5. article.dataset.indexNumber // "12314"
  6. article.dataset.parent // "cars"
  8. article.dataset.columns = 5 //修改属性值为5

2.3 jQuery访问

在jQuery库中，访问data-属性提供的API是 data( )，jQuery最大的特点是getter和setter统一，因此获得和设置data-属性都是data()，即data(key, value )和data(key)

  1. const article = $('#electriccars');
  3. article.data('columns') //获得属性值
  4. atricle.data('columns',5) //设置属性值

3. 注意事项

在使用 data 属性时，犯了好几次这样的错误了，就是，在设置data名字使不要使用驼峰式命名，要全小写命名或者中间用横线“-”隔开，有横线“-”的命名在获取时转化为驼峰式名字获取，但是不要使用驼峰式命名，如

  1. <div class="test" data-testOne></div>
  3. $(".test").data("testOne"); //获取不到，因为会被认为成是data-test-one，因此不要这样写
  5. //改正
  6. <div class="test" data-test-one></div>