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

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

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

直接用 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]')（未加引号，值含字母/符号时会解析失败）