使用JavaScript/jQuery获取data-*属性列表

基础概念

data-*属性是HTML5引入的自定义数据属性，允许开发者在HTML元素上存储额外的信息。这些属性以"data-"开头，后面可以跟任何自定义名称。

获取data-*属性的方法

原生JavaScript方法

1. dataset属性：
2. dataset属性：
3. getAttribute()方法：
4. getAttribute()方法：

jQuery方法

1. data()方法：
2. data()方法：
3. attr()方法结合属性选择器：
4. attr()方法结合属性选择器：

方法比较

| 方法 | 优点 | 缺点 | |------|------|------| | dataset | 原生支持，性能好 | 不兼容IE10以下 | | getAttribute | 兼容性好 | 需要手动筛选data-属性 | | jQuery.data() | 简洁易用 | 需要引入jQuery | | jQuery.attr() | 兼容性好 | 需要手动筛选data-属性 |

应用场景

1. 在元素上存储配置信息
2. 传递数据给JavaScript代码
3. 存储临时状态信息
4. 实现自定义组件间的数据通信

注意事项

1. data-*属性名会自动转换为驼峰式命名法（如data-user-id变为userId）
2. jQuery的data()方法会缓存数据，后续调用不会从DOM重新读取
3. 属性值会自动转换为适当类型（如"123"会转为数字123）
4. 对于动态添加的元素，需要确保在元素存在后再获取属性

完整示例

<div id="product" data-id="123" data-name="Laptop" data-price="999.99" data-in-stock="true"></div>

<script>
// 原生JavaScript
const product = document.getElementById('product');
console.log('Native dataset:');
console.log(product.dataset); // {id: "123", name: "Laptop", price: "999.99", inStock: "true"}

// jQuery
$(function() {
  console.log('jQuery data():');
  console.log($('#product').data()); // {id: 123, name: "Laptop", price: 999.99, inStock: true}
});
</script>