标签： 自定义属性

固有属性

标签天生自带的属性 比如class id title等, 可以直接使用点语法操作

自定义属性

自己添加的属性，在DOM对象中找不到，无法使用点语法操作，必须使用专门的API.

getAttribute('属性名') // 获取自定义属性

setAttribute('属性名', '属性值') // 设置自定义属性

removeAttribute('属性名') // 删除自定义属性

注意点：attribute方法可以操作标签的自定义属性和固有属性

data-自定义属性

传统的自定义属性没有专门的定义规则，开发者随意定值，不够规范，所以在html5中推出来了专门的data-自定义属性 在标签上一律以data-开头

dataset属性存取data-*自定义属性的值

这种方式通过访问一个元素的dataset属性来存取data-*自定义属性的值。这个dataset属性是HTML5 Javascript API的一部分，用来返回一个所有选择元素的data-*属性的DOMStringMap对象。

使用这种方法时，不是使用完整的属性名，如data-id来存取数据，应该去掉data-前缀。

还有一点特别注意的是：data-属性名如果包含了连字符，例如 data-id-and-class，连字符将被去掉，并转换为驼峰式的命名，前面的属性应该写成idAndClass。

<div id="div1" class="div1" data-id = "myId" data-class = "myClass" data-id-and-class = "Hello"></div>
<script>
    var div = document.getElementById("div1");

    var attr = div.attributes;
    console.log(attr);      //NamedNodeMap对象
    var data = div.dataset;
    console.log(data);      //DOMStringMap对象

    var id = div.id;
    console.log(id);        //div1

    var myId = div.dataset.id;
    console.log(myId);      //myId
    var iac = div.dataset.idAndClass;
    console.log(iac);       //Hello
</script>

如果你想删掉一个data-属性，可以这么做：

delete div.dataset.id;

HTML5中的data-*自定义属性 – 知乎