避免 matches() 抛出语法错误的关键是传入前校验选择器字符串的合法性，需确保其符合 css 标准、无非法开头或未转义字符，并对动态变量清洗转义，优先预校验而非 try/catch。
避免 matches() 抛出语法错误，关键在于**传入前校验选择器字符串的合法性**，而不是依赖运行时捕获。浏览器对非法选择器会直接抛 SyntaxError 或 DOMException，无法静默处理。
确保选择器语法规范
合法选择器必须符合 CSS 选择器标准：不能以关系符（>、+、~）、伪元素（::before）或空格开头；不能包含未转义的特殊字符（如双引号、反斜杠）；不能是空值或纯空白。
- ✅ 正确：
'.btn[data-id="123"]'、'button:enabled'、'[data-action="save"]' - ❌ 错误：
'> .child'、'::after'、''、null、' '、'.item[data-name="he"llo"]'（引号不匹配）
动态拼接时务必清洗变量
拼接字符串生成选择器时，变量内容不可信——undefined、null、含引号或空格的字符串都会导致语法错误或逻辑错位。
- 用
String(value)或模板字面量 + 显式转义替代裸拼接：`.item[data-type="${CSS.escape(type)}"]` - 对关键字段做存在性判断：
if (type == null) return false;，再构造选择器 - 属性值含双引号时，改用单引号包裹整个选择器：
element.matches(`[data-attr='value"with"quote']`)
预校验比 try/catch 更可靠
try/catch 能兜住错误，但属于被动防御，且影响性能。更推荐在构造后、调用前用轻量方式验证：
- 简单检查：用正则粗筛明显非法结构，例如
/^\s*[\s>+~]/.test(sel)排除关系符开头 - 利用
document.querySelector做低成本试探（仅用于校验，不取结果）：!!document.querySelector(sel)—— 合法选择器不会报错，非法则抛异常，可配合try/catch封装为校验函数 - 对高频使用的固定选择器，定义常量并统一维护，避免重复拼接
注意伪类的运行时限制
像 :hover、:focus 这类伪类虽语法合法，但在非交互状态下 matches() 总是返回 false。这不是错误，但容易被误判为“选择器失效”。
- 若需检测焦点状态，应结合
document.activeElement：document.activeElement === element && element.matches('[data-required]') - 避免在无用户操作的上下文中依赖
:hover判断，它不反映真实样式状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
