matches 用于高效判断勾选商品是否为特价商品，前提是商品 DOM 元素已携带 data-promo="true" 等可匹配标识；通过 itemEl.matches('[data-promo="true"]') 快速返回布尔结果，不解析文本、不依赖后端，需确保 DOM 标识与特价状态实时同步。
在购物车联动结算场景中，用 matches 判断当前勾选商品是否为特价商品，核心不是直接靠它“识别特价”，而是利用它高效匹配 DOM 元素是否符合某个 CSS 选择器条件——前提是特价商品在渲染时已被打上明确的、可被选择器捕获的标记（比如 class 或 data 属性）。
确保特价商品有可匹配的 DOM 标识
这是前提。后端或模板层需为特价商品的容器（如 ）添加专属标识：
- 推荐加
data-promo="true"：语义清晰、不易冲突； - 也可加 class 如
cart-item--sale，但需注意避免与样式类混用导致误判； - 不建议仅靠价格数字判断（如 “¥9.9”），因为
matches不处理文本内容，且价格格式易变、不可靠。
用 matches 检测单个勾选项是否为特价
当用户勾选/取消勾选某一项时，在事件回调里获取对应 DOM 元素，调用 .matches()：
checkbox.addEventListener('change', function() {
const itemEl = this.closest('.cart-item'); // 定位到该商品的容器
if (itemEl && this.checked) {
const isPromo = itemEl.matches('[data-promo="true"]'); // ✅ 快速判定
console.log('当前勾选的是特价商品:', isPromo);
}
});
联动结算时批量检测已勾选的特价商品
结算前遍历所有已勾选项，统一用 matches 过滤：
- 先收集所有勾选的 checkbox：
document.querySelectorAll('.cart-item input[type="checkbox"]:checked')； - 再逐个取其父容器，用
.matches('[data-promo="true"]')判定； - 可进一步统计数量、计算折扣总金额等，逻辑清晰且性能好（
matches是原生方法，无框架依赖、无正则开销）。
注意事项与避坑点
matches 不是万能识别器：它只做“是否匹配选择器”的布尔判断，不解析价格、不读取接口、不自动更新——若特价状态动态变更（如库存售罄后取消特价），必须同步更新 DOM 的 data-promo 属性，否则判定会滞后。
另外，IE 不支持 matches，如需兼容可加简单垫片（el.msMatchesSelector || el.webkitMatchesSelector || el.mozMatchesSelector），但现代项目通常无需考虑。
