javascript中dataset属性详解

在JavaScript中有一个用于访问与操作html元素数据属性的快捷方法，此方法就是 dataset ，它可以轻松的读取与修改元素的自定义数据属性，从而可以灵活的操作与DOM绑定的数据。

js中的 dataset 属性是一个对象，其键是数据属性的名称（不带 data- 前缀，并且转换为 camelCase 格式），而值是相应的数据属性值。

dataset基本用法：

例：通过dataset获取元素的属性值

<div data-host="https://www.73so.com" data-name="73so博客" data-sub-name="一个技术博客" class="aa"></div>
<script>
    const aa = document.querySelector('.aa');
    // 属性值不要带 “data-” , 别外只能获取以 “data-” 开头元素属性
    console.log(aa.dataset.host);
    console.log(aa.dataset.name);
   // 注意下面的属性，data-sub-name 要使用 camelCase 格式，也就是 subName
    console.log(aa.dataset.subName);
</script>

例：通过dataset修改属性

<div data-host="https://www.73so.com"  class="aa"></div>
<script>
    const aa = document.querySelector('.aa');
    console.log(aa.dataset.host);
    //输出结果; https://www.73so.com
    aa.dataset.host = 'https://www.baidu.com';
    console.log(aa.dataset.host); 
    //输出结果; https://www.baidu.com
</script>

注意：

1、dataset 属性只能获取元素中以“data-”开头的属性。

2、dataset 属性输出数据时，不需要“data-”为开头。

3、dataset 属性不仅可以获取属性值，也可以修改属性值。

4、dataset 属性修改值时，是动态修改，也会更新到HTML元素上。

5、dataset 属性名对大小写不敏感，也就是不区分大小写。