自定义属性 data-*

HTML5 自定义属性

[TOC]

## 1. 自定义属性 data-*

### 1.1. data-\* 介绍

`data-*` 属性是 HTML5 中引入的一种自定义属性，它允许我们在 HTML 元素上附加任何我们想要的数据。这些数据可以由 JavaScript 或其他脚本语言使用，以便在页面上实现更复杂的功能或交互。

`data-*` 属性以 `data-` 开头，后面跟着任意我们想要的数据名称。这个名称应该是没有空格的，并且全部由字母或数字组成。例如，`data-user-id`、`data-user-name` 等都是有效的 `data-*` 属性名称。

### 1.2. data-\*使用示例

以下是一个使用 `data-*` 属性的简单示例：

```html
<div id="myDiv" data-user-id="123" data-user-name="John Doe">Hello, world!</div>
```
在这个例子中，我们在 div 元素上附加了两个 `data-*` 属性：`data-user-id` 和 `data-user-name`。这些属性存储了有关用户的信息，但它们不会在页面上显示出来。

我们可以使用 JavaScript 和 Jquery 来操作这些属性

#### 1.2.1. 使用 JavaScript 操作 data-\* 的值

+ **使用 JavaScript 中 getAttribute 获取 data-\* 值**

```javascript
var myDiv = document.getElementById('myDiv');
console.log(myDiv.getAttribute('data-user-id')); // 输出：123
console.log(myDiv.getAttribute('data-user-name')); // 输出：John Doe
```

+ **使用 JavaScript 中 setAttribute 添加/修改 data-\* 属性**

```javascript
myDiv.setAttribute('data-user-email','1111111@qq.com')
myDiv.setAttribute('data-user-id', '456')
console.log(myDiv.getAttribute('data-user-id', '456'))
```
> Tips：使用 setAttribute 方法，如果元素上不存在自定义的data-\*属性，则新增，已存在则修改属性值，使用完 setAttribute 之后可以观察元素的DOM，属性会随之发生变化

+ **使用 JavaScript 中的 dataset 获取 data-\* 值**

```javascript
// 首先查看下 dataset 上都有那些值
console.log(myDiv.dataset)
// 输出：DOMStringMap 对象，对象中有userId和userName两个属性，它们的值分别对应了data-user-id和data-user-name属性值
//----------------------------------------------------------
// 获取元素上 id 和 name 的值
console.log(myDiv.dataset.userId) // 输出：123
console.log(myDiv.dataset.userName) // 输出：John Doe
```
> Tips：如果元素 `data-*` 属性中 `*` 包含了 `-` 符号，它存入到 dataset 属性值中时，会将 `-` 符号去除，并将后面的字母大写，这就是上面示例中获取id的方式是使用 myDiv.dataset.userId 而非 myDiv.dataset.user-id

+ **使用 JavaScript 中的 dataset 添加/修改 data-\* 属性**

```javascript
myDiv.dataset.userId = 456 // 修改属性值
myDiv.dataset.userEmail = 1111111@qq.com // 添加新的属性
console.log(myDiv.dataset.userId) // 输出：456
console.log(myDiv.dataset.userEmail) // 输出：1111111@qq.com
```
> Tips：myDiv.dataset 赋值的效果和 setAttribute 方法一致，如果元素上不存在自定义的data-\*属性，则新增，已存在则修改属性值，DOM 结构上也会随之改变

+ **使用 JavaScript 中的 delete 删除 data-\* 属性**

```javascript
delete myDiv.dataset.userId // 删除属性
console.log(myDiv.dataset.userId) // 输出：undefined
```
> Tips：myDiv.dataset 的值是 DOMStringMap 对象，因此可以使用 delete 来对属性进行删除，删除之后在 DOM 元素上 data-user-id 也会随之删除（其中原理暂时不清楚）

#### 1.2.2. 使用 Juery 操作 data-\* 的值

+ **使用 Juery 中的 data() 函数获取 data-\* 值**

```javascript
var myDiv = $("#myDiv")
console.log(myDiv.data("user-id")) // 输出：123
console.log(myDiv.data("user-name")) // 输出：John Doe
```

+ **使用 Juery 中的 data() 添加/修改 data-\* 属性**

```javascript
myDiv.data("user-email",'1111111@qq.com')
myDiv.data("user-id",'456')
console.log(myDiv.data("user-id")) // 输出：456
```
> Tips：使用 Juery 中的 data() 方法添加/修改 data-\* 属性时需要注意的是，添加和修改的值不会渲染到 DOM 元素上，data() 应该是将属性值存放到内存缓存起来了

+ **使用 Juery 中的 attr() 函数获取/添加/修改 data-\* 值**

```javascript
myDiv.attr("data-user-email", '1111111@qq.com')
myDiv.attr("data-user-id", '456')
console.log(myDiv.attr("data-user-id")) // 输出：456
console.log(myDiv.attr("data-user-email")) // 输出：1111111@qq.com
```
> Tips：使用 attr() 和 data() 的区别
> + attr() 不可以省略 data- 前缀，必须是完整的属性名，而 data() 可以省略前缀
> + attr() 可以在 DOM 元素上同步渲染变更的属性，data() 不行

### 1.3. data-\* 属性使用场景

1. **存储额外信息**：如果你需要在 HTML 元素上存储额外的信息，但又不想让这些信息显示在页面上，那么 `data-*` 属性就非常有用。例如，你可以使用 `data-*` 属性来存储一个元素的序列号、版本号或其他元数据。

2. **实现复杂交互**：如果你需要在页面上实现一些复杂的交互功能（例如，用户登录、表单验证等），那么可以使用 `data-*` 属性来存储用户输入的信息或状态。然后，你可以使用 JavaScript 或其他脚本语言来读取这些信息，并根据需要执行相应的操作。

3. **与后端通信**：当需要将数据从前端发送到后端时，可以使用 `data-*` 属性来存储这些数据。然后，可以使用 JavaScript 或其他脚本语言来将这些数据发送到后端服务器。在发送数据之前，也可以使用 JavaScript 来处理或格式化这些数据。

4. **实现响应式设计**：在实现响应式设计时，可以使用 `data-*` 属性来存储与设备或屏幕尺寸相关的信息。然后，可以使用 CSS 或 JavaScript 来根据这些信息调整页面布局或显示内容。