在前端开发中，我们经常需要访问 HTML 元素的数据属性来获取或设置元素的一些状态或信息。使用 jQuery，可以方便地进行这些操作，但是如果你希望不依赖 jQuery，该怎么办呢？本文将介绍如何使用原生 JavaScript 访问 HTML 元素的数据属性。
什么是数据属性？
数据属性（Data Attributes）是 HTML5 中引入的一种自定义属性，以 "data-" 开头，并且可以存储任意字符串。例如：
<div id="myDiv" data-info="some information"></div>
上面的代码中，data-info 就是一个数据属性，它的值为 "some information"。
通过数据属性，我们可以把一些与元素相关联的信息存储在元素上，方便后续脚本操作时使用。
使用 getAttribute() 方法访问数据属性
要想使用 JavaScript 访问数据属性，最简单的方法就是使用 getAttribute() 方法。该方法接受一个参数，即要获取的属性名，返回该属性的值。
const myDiv = document.querySelector('#myDiv');
const info = myDiv.getAttribute('data-info');
console.log(info); // 输出："some information"上面的代码中，我们首先通过 querySelector() 方法获取了 id 为 "myDiv" 的元素，然后使用 getAttribute() 方法获取了它的 data-info 属性的值。结果会被输出到控制台上。
需要注意的是，getAttribute() 方法返回的始终是字符串类型，如果属性不存在，则返回 null。
使用 dataset 属性访问数据属性
除了使用 getAttribute() 方法之外，还可以使用 dataset 属性来访问数据属性。该属性返回一个对象，包含了元素所有以 "data-" 开头的属性名和对应的属性值。
const myDiv = document.querySelector('#myDiv');
const data = myDiv.dataset;
console.log(data.info); // 输出："some information"上面的代码中，我们使用 dataset 属性获取了 id 为 "myDiv" 的元素的所有数据属性，并通过属性访问的方式获取了它的 data-info 属性的值。
需要注意的是，dataset 属性的属性名会自动转换成驼峰式命名，例如 data-info 转换为 info。
使用 setAttribute() 方法修改数据属性
如果要修改元素的数据属性，可以使用 setAttribute() 方法。该方法接受两个参数，第一个参数为要设置的属性名，第二个参数为要设置的属性值。
const myDiv = document.querySelector('#myDiv');
myDiv.setAttribute('data-info', 'new information');
const newInfo = myDiv.getAttribute('data-info');
console.log(newInfo); // 输出："new information"上面的代码中，我们首先使用 querySelector() 方法获取了 id 为 "myDiv" 的元素，然后使用 setAttribute() 方法将它的 data-info 属性值修改为了 "new information"，最后使用 getAttribute() 方法获取修改后的属性值并输出。
总结
本文介绍了如何使用原生 JavaScript 访问 HTML 元素的数据属性。我们可以使用 getAttribute() 方法获取单个属性的值，使用 dataset 属性获取所有数据属性的键值对，使用 setAttribute() 方法修改数据属性的值。这些方法可以帮助我们在不依赖 jQuery 的情况下进行前端开发，提高代码的可维护性和灵活性。
示例代码：CodePen链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15539