js: 获取标签元素data-*属性值的方法

这篇文章将为大家详细讲解有关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-*属性值的方法的详细内容，更多请关注编程学习网其它相关文章！