如何获取带active类的DOM元素的data-field属性值

给定的HTML代码片段如下：

<a class="sort-type active " data-type="desc" data-field="relevance" href="#" title="" target="_self">relevance</a>
<a class="sort-type " data-type="desc" data-field="most-viewed" href="#" title="" target="_self">most viewer</a>
<a class="sort-type " data-type="desc" data-field="high-price" href="#" title="" target="_self">high-price</a>

原生JavaScript实现 #

直接通过标准CSS选择器定位目标元素即可，不建议手动拆分class字符串做包含判断，很容易出现类名误匹配（比如类名带active-前缀的元素会被错误识别）的问题：

// 匹配第一个符合要求的a标签，读取data-field值
const targetField = document.querySelector('a.sort-type.active').dataset.field;
console.log(targetField); // 输出: relevance

如果页面中可能存在多个带active类的排序链接，用querySelectorAll遍历取值：

const allActiveLinks = document.querySelectorAll('a.sort-type.active');
allActiveLinks.forEach(link => {
  console.log(link.dataset.field);
})

jQuery实现 #

如果项目中已经引入了jQuery，可以用更简洁的写法实现：

// 读取第一个匹配元素的data-field值
const targetField = $('a.sort-type.active').data('field');
console.log(targetField); // 输出: relevance

// 遍历所有匹配元素取值
$('a.sort-type.active').each(function() {
  console.log($(this).data('field'));
})

注意：jQuery的data()方法读取的是内部缓存的data属性值，如果属性是页面渲染完成后动态修改的，用原生方法getAttribute('data-field')读取DOM上的实际属性值会更准确。

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