JS获取data属性|极客笔记

JS获取data属性

在前端开发中，我们经常会使用自定义的data属性来存储一些额外的信息，例如在HTML标签上添加data-*属性来存储一些元素的相关数据。在使用JavaScript操作这些自定义属性时，我们需要知道如何获取和设置这些data属性的值。

什么是data属性

在HTML5中，我们可以在任何HTML元素上添加自定义的data-属性，用来存储额外的数据。这些自定义的data属性可以通过dataset属性来访问，dataset属性是一个DOMStringMap对象，包含了所有以data-开头的属性及其对应的值。

举个示例，我们可以给一个button元素添加一个data-id属性来存储该按钮的ID：

<button id="myButton" data-id="123">Click me</button>

如何获取data属性的值

我们可以使用JavaScript来获取data属性的值，通常有两种方法：

1. 使用dataset属性

通过元素的dataset属性，我们可以获取到该元素上所有以data-*开头的属性及其对应的值。例如，我们可以通过dataset.id来获取上面示例中按钮元素的data-id属性值：

const myButton = document.getElementById('myButton');
const buttonId = myButton.dataset.id;

console.log(buttonId); // 输出：123

2. 使用getAttribute方法

除了使用dataset属性外，我们还可以使用getAttribute方法来获取data属性的值。使用getAttribute方法可以获取任何属性的值，包括自定义的data属性。例如，我们可以通过getAttribute(‘data-id’)来获取按钮元素的data-id属性值：

const myButton = document.getElementById('myButton');
const buttonId = myButton.getAttribute('data-id');

console.log(buttonId); // 输出：123

示例代码

下面是一个完整的示例代码，演示了如何获取一个按钮元素的data-id属性值：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get data attribute value</title>
</head>
<body>
<button id="myButton" data-id="123">Click me</button>

<script>
const myButton = document.getElementById('myButton');

// 使用dataset属性获取data属性值
const buttonIdUsingDataset = myButton.dataset.id;
console.log(buttonIdUsingDataset); // 输出：123

// 使用getAttribute方法获取data属性值
const buttonIdUsingGetAttribute = myButton.getAttribute('data-id');
console.log(buttonIdUsingGetAttribute); // 输出：123
</script>
</body>
</html>