HTML自定义属性理解

以前我们需要自定义属性的时候一般是这样做的，在标签里面加上我们自己设置的一些属性：

<div id="myDiv" user-defined-attribute="value">在标签里设置自定义属性</div>

然后获取里面的值是使用getAttribute来获取自定义属性里面的值：

var myDiv = document.getElementById("myDiv");
 
var theValue = myDiv.getAttribute("user-defined-attribute");

现在H5为我们提供了一个data属性——“data-”前缀，可以让所有的HTML元素支持自定义属性，只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>

这个data属性还可以应用在CSS中，前提是你的浏览器支持after伪类，以及content的attr属性（低版本的IE不支持）：

<div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>

#myDiv{
  position: ralative;
}
 
#myDiv:hover:after{
  position: absolute;
  top: 0px;
  left: 0px;
  content: attr(data-attribute);
  color: red;
}

如何获取data属性的值？

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>
一、使用getAttribute来获取

var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");

二、使用Html5自定义属性对象Dataset来获取

var myDiv = document.getElementById("myDiv");
 
var theValue = myDiv.dataset.attribute;

注意：带连字符连接的名称在使用的时候需要命名驼峰化，即大小写组合书写，这与应用元素的style对象类似，dom.style.borderColor。例如data属性为data-other-attribute，则我们要获取相应的值可以使用：myDiv.dataset.otherAttribute

如果Html元素定义了多个自定义属性，如何获取？

<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>

一、使用循环遍历

var myDiv = document.getElementById("myDiv");
var attrs = myDiv.attributes,
var expense = {}, i, j;  
for (i = 0, j = attrs.length; i < j; i++) {
  if(attrs[i].name.substring(0, 5) == 'data-') {
    expense[attrs[i].name.substring(5)] = attrs[i].value;
  }
}

二、使用dataset属性

var expense = document.getElementById('myDiv').dataset;

注：dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量

1、让所有的自定义的属性值塞到一个数组中

var chartInput = [];
 
for (var item in expense) {
  chartInput.push(expense[item]);
}

2、删掉一个data属性

delete myDiv.dataset.attribute;

3、增加一个data属性

myDiv.dataset.attribute4 = 'value4';

dataset的兼容性处理

如果浏览器不支持dataset，有必要做一下兼容处理：

if(myDiv.dataset) {
  myDiv.dataset.attribute = "valueXX"; // 设置自定义属性
  var theValue = myDiv.dataset.attribute; // 获取自定义属性
} else {
  myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性
  var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性
}

参考：https://blog.csdn.net/qq_31851435/article/details/53100691

 

个人理解：用法

之前不是很懂为什么会有这样的功能的出现，知道我发现了个案例：
我想要在渲染出来了个列表数据之后，在最后面的一个button标签绑定一些操作，比如我点击这个button，这一行数据就会删除。
然而，我是循环渲染出来来了10行数据，当我点击第6行的时候，我又怎么知道我点的是第几行？总不能给某个元素写上自己第几行？
那么这时候自定义的数据就有用了，你渲染的时候直接写在html标签里面，不如叫做data-line-num="i"，那么当我点击这个按钮，就判断这个按钮的这个属性等于多少，就知道我要删除i为几的数据了，然后后面把所有数据第i个删了，再重新渲染就好了。

参考：https://www.jianshu.com/p/459f1b6d02e4