应使用 data-category 存储分类标识，用 querySelectorAll("[data-category='laptop']") 精准筛选；显隐控制采用 .hidden 类配合 toggle；多选时用 activeCategories.includes(element.dataset.category) 判断；重置筛选只需移除 .hidden 类，避免重绘 DOM。
用 data-* 属性存分类标识，别用 class 做筛选依据
很多人一上来就给每个产品元素加一堆 class="category-electronics category-new"，想着靠 querySelectorAll(".category-electronics") 拿数据——这会导致 class 名膨胀、语义混乱，且 JS 处理时容易误匹配（比如 category-electronics-old 也会被 .category-electronics 匹中）。正确做法是统一用 data-category 存唯一值：
<div class="product" data-category="laptop">...</div>
。筛选时用 document.querySelectorAll('[data-category="laptop"]')，精准、可读、易维护。
点击筛选按钮时，用 toggle 而非 show/hide 控制显隐
直接设 display: none 再恢复，会丢失原有 display 类型（比如原先是 inline-block，强制设成 block 就错位了）。更稳妥的方式是加一个临时类：
.product.hidden { opacity: 0; pointer-events: none; }
，然后用 element.classList.toggle("hidden", shouldHide)。这样不干扰原有样式流，动画也容易接上 transition: opacity 0.2s。
多选分类时，别拼字符串查 data-category，改用数组 includes()
当用户能同时勾选「笔记本」和「显示器」，你想显示所有属于其中任一分类的产品，常见错误是写：
if (cat === "laptop" || cat === "monitor")
——硬编码、不可扩展。实际应把当前选中的分类存在一个数组里，比如 const activeCategories = ["laptop", "monitor"]，再用：
element.dataset.category && activeCategories.includes(element.dataset.category)
。这样新增分类不用改逻辑，后端返回新分类名也能直接用。
首次加载或清空筛选时，注意重置的是「状态」不是「DOM」
点“全部”按钮后，不要用 innerHTML = originalHTML 重绘整个列表——既丢事件监听，又触发重排。应该只清除 .hidden 类：
document.querySelectorAll(".product").forEach(el => el.classList.remove("hidden"))
。如果产品是异步加载的，那更要确保原始 DOM 结构始终保留在内存或 template 中，而不是靠字符串拼接来回重建。
分类筛选真正难的不是 DOM 操作，而是状态同步：URL 参数要不要变？浏览器后退键是否响应？选中按钮的视觉反馈有没有延迟？这些细节一旦漏掉，用户就会觉得“点了没反应”或者“返回后筛选丢了”。先稳住 DOM 和 JS 状态的一致性，再考虑其他。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
