核心是用JavaScript批量操作DOM，需通过document.querySelectorAll('.card.active').forEach(card => card.classList.remove('active'))精准移除active类，避免误删其他样式或破坏框架状态；在React/Vue中应同步重置响应式数据源而非直接操作DOM。
点击按钮后清除所有已选中卡片的 active 类
核心是用 JavaScript 批量操作 DOM，不能只靠 <button type="reset"> —— 那个只对表单控件（input、select）生效，对自定义卡片样式完全无效。
假设你的筛选卡片是这样的结构：
<div class="card" data-value="apple">Apple</div> <div class="card active" data-value="banana">Banana</div> <div class="card active" data-value="cherry">Cherry</div>
重置按钮需要做的是：找到所有带 active 类的 .card 元素，移除该类。推荐写法：
document.querySelector('#reset-btn').addEventListener('click', () => {
document.querySelectorAll('.card.active').forEach(card => {
card.classList.remove('active');
});
});
为什么不用 innerHTML 或 className = ''
直接清空 className 会误删其他必要样式类（比如 card disabled hover:scale-105），而 innerHTML 会销毁绑定的事件监听器或 React/Vue 状态。
立即学习“前端免费学习笔记（深入）”；
classList.remove() 是安全且精准的：
- 只动指定类名，不影响其他 class
- 多次调用不会报错（不存在的类会被忽略）
- 兼容所有现代浏览器，包括 IE10+
如果卡片由框架（React/Vue）渲染，该怎么处理
不要绕过框架直接操作 DOM —— 这会导致视图与状态不一致。例如在 React 中：
✅ 正确做法：把选中状态提为组件 state（如 const [selected, setSelected] = useState(new Set())），重置按钮触发 setSelected(new Set())，让框架自动更新 UI。
❌ 错误做法：在 React 组件里用 document.querySelectorAll('.card.active') + remove()，下次 re-render 时可能又把旧状态刷回来，或者引发 Warning。
Vue 同理：响应式数据驱动样式（:class="{ active: isSelected(item) }"），重置就是清空对应的数据源（数组/对象/Map）。
加个防抖或禁用按钮避免重复点击
虽然清除 class 很快，但如果重置逻辑后续要扩展（比如同时发请求清服务端缓存），重复点击就可能出问题。
简单防护方式：
- 点击后立即
btn.disabled = true，操作完再设回false - 或者用
setTimeout延迟恢复（适合有视觉反馈场景） - 不建议用防抖（
debounce），因为用户明确想“现在就重置”，延迟反而造成困惑
真实项目里最容易被忽略的，是框架环境下混用原生 DOM 操作 —— 表面看起来清掉了样式，但下一次 props 更新或 key 变化，又把旧状态带回来了。务必确认状态源头是否被真正重置。
