data-*属性

data-*属性用于存储页面或应用程序的私有自定义数据。

data-*属性赋予我们在所有HTML元素上嵌入自定义data属性的能力。

存储的（自定义）数据能够被页面的javascript中利用，以创建更好的用户体验（不进行Ajax调用或服务器端数据库查询）。

data-*属性包括两部分：

• 属性名不应该包含任何大写字母，并且在前缀“data-”之后必须有至少一个字符
• 属性值可以是任意字符串

在HTML元素上直接添加以‘data-’开头的属性，例如

<div data-mydata='this is my data'></div>

操作他的方式有classList 和dataset：

classList

用法：

const div = document.querySelector('div')


div.classList.add('myclass')
// 添加类名

div.classList.remove('myclass')
// 移除类名

div.classList.replace('myclass','myclass2')
// 替换类名，注意只能一个替换一个

div.classList.toggle('myclass')
// 切换类名，有这个类名就移除它，没有就添加

dataset

用法：

// H5 里面规定了自定义属性的书写，要求以 data- 开头

<div data-myvalue='这是我自定义属性的值'></div>

const div = document.querySelector('div')

console.log(div.dataset.myvalue)

div.dataset.name = 'kiss'
// <div data-name='kiss'></div> 

// 如果在设置的时候写成驼峰形式，会被转成用 '-' 连接的
// 获取的时候如果是多个 '-' 连接的，获取的时候要用驼峰获取
div.dataset.userName = 'kiss'
// <div data-user-name='kiss'></div>

dataset与getAttribute/setAttribute的区别是：

   dataset只可以操作‘data-’开头的自定义属性，而getAttribute/setAttribute可以操作所有

setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：

elementNode.setAttribute(name,value)

说明：

1.name: 要设置的属性名。

2.value: 要设置的属性值。

getAttribute()方法通过元素节点的属性名称获取属性的值。

语法：

elementNode.getAttribute(name)

说明:

1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。

2. name：要想查询的元素节点的属性名字

转自：https://www.cnblogs.com/Berlinli/p/6629233.html

转自：https://www.cnblogs.com/yummylucky/p/10685650.html