如何用JavaScript或jQuery获取HTML中data属性列表及统计总数

嘿，我来帮你搞定这个问题！针对你提出的「获取HTML元素的data属性列表」「统计带指定名称的data属性总数」这两个需求，我分别用原生JavaScript和jQuery两种方式来演示，结合你提供的HTML代码来写示例~

1. 获取单个元素的所有data属性 #

如果你想拿到某个元素上所有以data-开头的属性，可以用DOM元素的dataset属性，它会返回一个DOMStringMap对象，包含所有data属性（自动去掉data-前缀，转成驼峰命名）。比如针对你的某个带data-pccompare的div：

// 获取第一个带data-pccompare的元素
const targetDiv = document.querySelector('[data-pccompare]');
// 获取所有data属性
const allDataAttrs = targetDiv.dataset;
// 转成数组形式方便查看
const dataAttrsList = Object.entries(allDataAttrs);
console.log('单个元素的data属性列表：', dataAttrsList);

2. 统计页面中带指定data属性的元素总数 & 获取属性值列表 #

你的HTML里所有目标元素都带data-pccompare属性，咱们可以把逻辑写进你已有的compare函数里，点击按钮就能看到结果：

function compare() {
  // 获取所有带data-pccompare属性的元素
  const allElements = document.querySelectorAll('[data-pccompare]');
  // 统计总数
  const totalCount = allElements.length;
  console.log('带data-pccompare的元素总数：', totalCount);
  
  // 获取所有data-pccompare的属性值列表
  const attrValues = Array.from(allElements).map(el => el.dataset.pccompare);
  console.log('data-pccompare属性值列表：', attrValues);
}

如果你项目里已经引入了jQuery，用它来实现会更简洁：

1. 获取单个元素的所有data属性 #

jQuery的data()方法可以拿到元素的所有data属性，同样会把data-前缀去掉转成驼峰：

const targetDiv = $('[data-pccompare]:first');
const allDataAttrs = targetDiv.data();
console.log('单个元素的data属性列表：', allDataAttrs);

2. 统计总数 & 获取属性值列表 #

同样把逻辑放进compare函数里：

function compare() {
  // 统计总数
  const totalCount = $('[data-pccompare]').length;
  console.log('带data-pccompare的元素总数：', totalCount);
  
  // 获取属性值列表
  const attrValues = $('[data-pccompare]').map(function() {
    return $(this).data('pccompare'); // 注意这里用驼峰命名pccompare
  }).get(); // 用get()把jQuery对象转成普通数组
  console.log('data-pccompare属性值列表：', attrValues);
}

另外补充一点：如果你想获取页面中所有类型的data属性（不只是data-pccompare），可以遍历页面所有元素提取它们的dataset，不过这种场景比较少，有需要的话可以随时问我~

内容的提问来源于stack exchange，提问作者Lakshmi