这篇文章将为大家详细讲解有关js: 获取标签元素data-*属性值的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
方法 1：使用 getAttribute() 方法
const element = document.querySelector("div");
const dataValue = element.getAttribute("data-my-attribute");方法 2：使用 dataset 对象
const element = document.querySelector("div");
const dataValue = element.dataset.myAttribute;方法 3：使用 CSSOM（CSS Object Model）
const element = document.querySelector("div");
const dataValue = window.getComputedStyle(element).getPropertyValue("--my-attribute");方法 4：使用正则表达式
const element = document.querySelector("div");
const dataValue = element.outerHTML.match(/data-my-attribute="([^"]+)"/)[1];方法 5：使用框架（如 jQuery）
const element = $("div");
const dataValue = element.data("my-attribute");性能比较
根据 MDN 测试，使用 getAttribute() 方法是最快的。
最佳实践
- 优先使用
dataset对象，因为它提供了对所有数据属性的统一访问。 - 避免使用 CSSOM，因为它性能较差。
- 如果需要查询大量数据属性，则可以考虑使用正则表达式。
- 仅在必要时使用框架，因为它们会增加代码大小和复杂性。
其他注意事项
- 数据属性名必须遵循 驼峰命名法（即 data-my-attribute）。
- 数据属性值可以是任何类型（字符串、数字、布尔值、JSON）。
- 数据属性可以用于存储自定义数据、配置选项或状态信息。
示例
假设我们有一个 div 元素，带有 data-my-name 数据属性：
<div id="myDiv" data-my-name="John Doe"></div>我们可以使用以下任何一种方法获取数据属性值：
const element = document.querySelector("div");
// 方法 1：getAttribute()
const name1 = element.getAttribute("data-my-name");
// 方法 2：dataset 对象
const name2 = element.dataset.myName;
// 方法 3：CSSOM
const name3 = window.getComputedStyle(element).getPropertyValue("--my-name");
// 方法 4：正则表达式
const name4 = element.outerHTML.match(/data-my-name="([^"]+)"/)[1];
// 方法 5：jQuery
if ($) {
const name5 = $("#myDiv").data("my-name");
}所有这些方法都将返回 "John Doe"。
以上就是js: 获取标签元素data-*属性值的方法的详细内容，更多请关注编程学习网其它相关文章！
