matches 配合 filter 是筛选 DOM 元素最轻量、语义最清晰的方式之一：它复用浏览器原生 CSS 匹配能力，无需 jQuery 或新选择器引擎；需先将 NodeList 转为数组再调用 filter。

用 matches 配合 filter 是筛选 DOM 元素最轻量、语义最清晰的方式之一——它不依赖 jQuery，不新建选择器引擎，直接复用浏览器原生的 CSS 匹配能力。

核心写法：把 NodeList 转成数组再 filter

DOM 方法如 document.querySelectorAll 或 parent.children 返回的是 NodeList（类数组），不能直接调用 filter。需先转为真数组：

• Array.from(nodeList).filter(el => el.matches('你的选择器'))
• 或用展开运算符：[...nodeList].filter(el => el.matches('.btn[data-role="submit"]'))
• 注意：IE 不支持 matches，可用 el.matches || el.msMatchesSelector 兼容（但现代项目通常可忽略 IE）

匹配常见场景示例

matches 支持任意合法 CSS 选择器，包括属性、伪类、组合器：

• 找带特定 data 属性的按钮：el.matches('button[data-action="delete"]')
• 排除禁用状态：!el.matches('input:disabled')
• 匹配某类后代中的直接子元素：el.matches('.card > .title')（注意：matches 判断的是元素自身是否符合该规则，不关心上下文）
• 用变量拼接选择器（需确保安全）：el.matches(`[data-id="${id}"]`)

比 querySelectorAll 更适合的场合

当你已经有一组元素（比如某个容器的所有子节点），又只想从中挑出符合动态条件的几个时，filter + matches 比重复调用 querySelectorAll 更高效、更可控：

• 避免多次遍历 DOM 树
• 逻辑集中：筛选条件写在 JS 里，易读易调试
• 可链式处理：比如 [...els].filter(...).map(...).forEach(...)
• 适合配合事件委托后的目标判断：if (e.target.matches('.item a')) { ... }

小技巧：封装成可复用函数

减少重复代码，提升可读性：

const filterByMatch = (nodes, selector) =>
  [...nodes].filter(el => el.matches(selector));

// 使用
const buttons = filterByMatch(document.body.children, 'button.primary');
const visibleItems = filterByMatch(list.children, ':not(.hidden)');