在HTML中，元素通常会有一些预定义的属性，如 id、class、name 等。然而，有时候我们可能需要为元素添加一些自定义的属性，以便存储额外的信息。在JavaScript中，我们可以使用几种方法来获取这些自定义属性的值。
1. 使用 getAttribute() 方法
getAttribute() 方法是获取元素自定义属性值的一种常用方法。它可以获取元素任何属性（无论是自定义属性还是标准属性）的值。
// 假设有一个元素 <div data-user-id="12345"></div>
var divElement = document.querySelector('div[data-user-id]');
var userId = divElement.getAttribute('data-user-id');
console.log(userId); // 输出: 12345
在这个例子中，我们通过 querySelector 获取到具有 data-user-id 属性的 <div> 元素，然后使用 getAttribute 方法获取其值。
2. 直接访问属性
对于自定义属性，如果属性名以 data- 开头，那么我们可以直接通过元素对象访问它，就像访问标准属性一样。
// 假设有一个元素 <div data-user-id="12345"></div>
var divElement = document.querySelector('div');
var userId = divElement.dataset.userId;
console.log(userId); // 输出: 12345
这里，我们使用了 dataset 属性，它是 getAttribute() 方法的简化版本，专门用于访问以 data- 开头的自定义属性。
3. 使用 Element.dataset 属性
Element.dataset 是一个集合，包含了元素上所有以 data- 开头的自定义属性。它是一个 DOMStringMap 对象，我们可以使用方括号语法来访问其中的属性值。
// 假设有一个元素 <div data-user-id="12345" data-name="John"></div>
var divElement = document.querySelector('div');
console.log(divElement.dataset.userId); // 输出: 12345
console.log(divElement.dataset.name); // 输出: John
使用 Element.dataset 属性的好处是，它允许我们通过属性名而不是属性值来访问自定义属性，这在属性值包含特殊字符时特别有用。
总结
获取自定义属性值的方法有很多，其中 getAttribute()、dataset 和 Element.dataset 属性是最常用的。根据实际情况选择合适的方法，可以让我们的代码更加简洁和易读。