JavaScript dataset

小灰灰 2020-06-01 13:13 614阅读 0赞

# JavaScript dataset

dataset属性用来管理HTML元素自定义属性。

特别说明：仅对符合HTML5规范，通过data-*语法格式规定的自定义属性有效。

**一.HTML属性：**

HTML属性分为内置标准属性与自定义属性。

内置标准属性，例如：

（1）.id：元素的唯一标识。

（2）.title：为元素附加额外的信息，通常鼠标悬浮会显示。

（3）.class：与css的样式类关联。

自定义属性：

HTML5之前没有自定义属性的标注规范，基本上可以是随意定义。

代码如下：

```html
<div antzone="蒲公英云"></div>
```

上面代码为div元素添加一个自定义属性antzone，属性值为"蒲公英云"。

为了便于管理HTML5对自定义属性进行了规范，通过dataset属性可以实现对其管理。

**二.dataset属性：**

利用此属性可以自定义属性的获取、添加或者修改操作。

语法结构一：

```javascript
string = element.dataset.camelCasedName;
```

获取指定名称自定义属性的值，

语法结构二：

```javascript
element.dataset.camelCasedName = string;
```

修改或者添加指定名称的自定义属性。

特别说明：属性名称如果有必要，需要用驼峰写法，后面会有详细介绍。

**浏览器支持：**

（1）.IE11+浏览器支持此方法。

（2）.edge浏览器支持此方法。

（3）.谷歌浏览器支持此方法。

（4）.opera浏览器支持此方法。

（5）.火狐浏览器支持此方法。

（6）.safria浏览器支持此方法。

**代码实例：**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
[data-dandelioncloud]{
  color:red;
}
</style>    
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.dataset.dandelioncloud="蒲公英云";
  }
}
</script>
</head>
<body>
<div id="ant">蒲公英云dandelioncloud.cn</div>
<input type="button" id="bt" value="查看演示"/>
</body>
</html>
```

点击按钮可以为div元素添加一个名称为"dandelioncloud"的自定义属性。

代码分析如下：

（1）.添加自定义属性data-dandelioncloud。

（2）.但是在通过dataset添加自定义属性的时候，不能带有"data-"。

（3）.添加此自定义属性后，会通过属性选择器div的字体颜色设置为红色。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
div{
  width:120px;
  height:60px;
  text-align:center;
}
</style>    
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.innerHTML=odiv.dataset.antAone;
  }
}
</script>
</head>
<body>
<div id="ant" data-ant-zone="蒲公英云">蒲公英云dandelioncloud.cn</div>
</body>
</html>
```

代码分析如下：

（1）.data-前缀后面的属性名称也可以带有连字符。

（2）.当使用dataset属性进行动态操作的时候，需要转换为驼峰写法。

**三.与getAttribute/setAttribute的区别:**

getAttribute和setAttribute方法也可以设置和获取元素的属性，主要区别如下：

（1）.上述两方法更加博爱，无论是否符合data-*语法格式，都可以顺利获取或者设置。

（2）.dataset则是专门针对符合HTML5规范的自定义属性的管理，更加方便。

（3）.dataset属性返回值是DOMStringMap对象，也就是说针对DOMStringMap对象的操作，然后影响到HTML元素，而getAttribute/setAttribute方法则是针对字符串的操作。