直接用 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()
