如何利用 matches 筛选出长列表中所有包含特定自定义属性（data-*）的项

顺亿

2026-10-18 • 👁 0人浏览过

直接用 matches() 配合属性选择器可高效判断元素是否含特定 data-* 属性：el.matches('[data-category]') 检查存在性，'[data-price="99"]' 检查精确值，'[data-tag~="hot"]' 检查空格分隔值；批量筛选优先用 querySelectorAll('[data-category]')，特殊属性名需加引号，兼容场景可用 hasAttribute() 替代存在性检查。

直接用

matches()

配合属性选择器即可筛选出含特定

data-*

属性的元素，无需先遍历再判断——关键是写对 CSS 选择器。用

matches()

判断单个元素是否含指定 data 属性

matches()

是元素方法，接收一个 CSS 选择器字符串，返回布尔值。要检测是否拥有某个

data-

属性（不管值是什么），用存在性选择器：

[data-xxx]

。

el.matches('[data-category]')

→ 检查是否含有

data-category

属性（值任意）

el.matches('[data-price="99"]')

→ 检查是否含

data-price

且值严格等于

"99"

el.matches('[data-tag~="hot"]')

→ 检查

data-tag

是否包含空格分隔的单词

"hot"

（类似 class 匹配）在长列表中批量筛选匹配项对 NodeList 或数组调用

filter()

，内部用

matches()

做条件判断：

const list = document.querySelectorAll('.item');
const withCategory = Array.from(list).filter(el => el.matches('[data-category]'));
const featured = Array.from(list).filter(el => el.matches('[data-featured]'));

注意：

querySelectorAll('[data-category]')

本身就能一步获取全部匹配项，比手动 filter + matches 更高效；

matches()

的典型场景是动态判断或配合其他逻辑（比如已有一个元素引用，需临时校验其属性）。处理属性值含特殊字符的情况若

data-

属性名含连字符、数字开头等（如

data-2024-active

），CSS 选择器中必须加引号；

matches()

同样遵循该规则： ✅ 正确：

el.matches('[data-2024-active]')

或

el.matches('[data-2024-active="true"]')

❌ 错误：

el.matches('data-2024-active')

（缺方括号）或

el.matches('[data-2024-active=true]')

（未加引号，值含字母/符号时会解析失败）兼容性与替代方案

matches()

在现代浏览器中支持良好（IE9+ 需用

msMatchesSelector

，现已极少需要）。若需极简兼容写法，可用

hasAttribute()

替代存在性检查：

el.hasAttribute('data-category')

等价于

el.matches('[data-category]')

但

hasAttribute()

不支持值匹配、部分匹配等复杂逻辑，灵活性不如

matches()

相关文章