元素值和数据属性有什么区别？

在 JavaScript 中，有时候我们需要给某个元素添加一些额外的信息，例如用于某些计算、触发事件等等。这时候我们可以利用元素值和数据属性来实现。

元素值（value）

元素值通常用于输入框和表单中，用于表示输入框中的内容。例如以下代码中的输入框：

<input type="text" id="input" value="这是默认值">

这里的 value 属性表示输入框中显示的默认值。我们可以通过 JavaScript 来获取和设置该属性的值：

// 获取元素属性值
let inputValue = document.getElementById('input').value;
console.log(inputValue); // 输出：这是默认值

// 设置元素属性值
document.getElementById('input').value = '新的值';

需要注意的是，对于非表单元素，例如 div、span 等等，它们虽然也有 value 属性，但是默认设置该属性是无效的。如果非要通过 JavaScript 去设置某个元素的 value 属性，可以使用 setAttribute 函数：

<div id="div">这是一个 div 元素</div>

document.getElementById('div').setAttribute('value', '新的值');
let divValue = document.getElementById('div').value; // value 属性的值仍然是空

数据属性（data-*）

如果我们需要为元素赋予一些额外的信息，而这些信息又不方便通过元素本身的属性来表示，那么可以考虑使用数据属性。

数据属性通常以 data- 为前缀，例如以下代码中的数据属性：

<div id="div" data-name="小明" data-age="28"></div>

这里使用了 data- 前缀，表示该属性是自定义的数据属性。我们可以通过 JavaScript 来获取和设置该属性的值：

// 获取数据属性值
let divName = document.getElementById('div').dataset.name;
console.log(divName); // 输出：小明

// 设置数据属性值
document.getElementById('div').dataset.age = '29';

需要注意的是，数据属性的值会保存在 DOM 中，但是并不会影响元素的渲染。如果需要在 CSS 中使用数据属性，可以使用 attr() 函数：

div:before {
  content: attr(data-name);
}

区别

综上可知，元素值和数据属性的区别如下：

• 元素值通常用于表单元素中，可以通过相应属性来获取和设置。
• 数据属性以 data- 为前缀，可以为元素赋予自定义信息，可以通过 dataset 对象来获取和设置。