data-category 是最直接的分类标识方式，语义清晰、无冲突、浏览器原生支持；需统一小写连字符格式、避免空值与大小写不一致，并通过 dataset 安全读取与双向同步更新。
data-category 是最直接的分类标识方式
用 data-category 给每个可切换项打上类别标签，比 class 名更语义清晰、不易冲突。浏览器原生支持，不需要额外解析逻辑。
常见错误是混用 data-category="electronics" 和 data-category="Electronics"（大小写不一致），导致 JS 查询失败；或者把值设成空字符串或空格，element.dataset.category 会返回 undefined 或空字符串，后续 === 判断直接失效。
- 值必须是合法字符串，推荐小写 + 连字符（如
data-category="smartphone"） - 避免动态拼接值时留空格：
item.setAttribute('data-category', category.trim()) - HTML 中写死的值要和 JS 中匹配，建议统一从一个常量对象里取：
const CATEGORIES = { PHONE: 'smartphone', LAPTOP: 'laptop' }
querySelectorAll('[data-category]') 能快速收集群组元素
比起遍历所有元素再判断 class，用属性选择器一次命中更高效。注意它返回的是静态 NodeList，适合做初始筛选，但不会响应后续 DOM 变化。
如果页面有懒加载或动态插入内容，得在插入后重新执行查询，或改用 MutationObserver 监听 —— 但多数分类切换场景不需要这么重。
- 筛选特定类别：
document.querySelectorAll('[data-category="smartphone"]') - 排除某类：
document.querySelectorAll('[data-category]:not([data-category="accessory"])') - 多值匹配（如同时属于两个分类）：用
data-categories="smartphone,5g"，然后用includes()检查字符串
dataset.category 在 JS 中读取最方便
element.dataset.category 自动把 data-category 转成驼峰式（data-user-id → dataset.userId），省去手动 getAttribute 和字符串处理。
但要注意：dataset 读取的是当前值快照，如果属性被 JS 改过（比如 el.dataset.category = 'new'），DOM 中的 data-category 属性值也会同步更新；反过来，直接 setAttribute 修改，dataset 也会立刻反映 —— 它们是双向绑定的，不是只读缓存。
- 安全读取：先检查是否存在
if ('category' in el.dataset)，再取值 - 避免覆盖原生属性名：不要用
data-id，因为dataset.id会和element.id冲突，优先用data-item-id - 数值型值需手动转换：
parseInt(el.dataset.price, 10)，dataset 总是返回字符串
切换时隐藏/显示要避免 reflow 频繁触发
对大量元素逐个设置 style.display = 'none' 会强制浏览器反复重排，卡顿明显。更稳的方式是批量操作：先用 documentFragment 或 CSS 类控制显隐，再一次性挂载或切换。
例如给容器加 class="filter-active--smartphone"，用 CSS 规则 .filter-active--smartphone [data-category]:not([data-category="smartphone"]) { display: none; } —— 这样 JS 只改一个 class，样式引擎自动批量计算。
- 慎用
visibility: hidden：它保留布局空间，可能影响滚动条或父容器高度 - 动画需求可用
opacity+pointer-events: none配合 transition，但记得过渡结束后真正移除交互 - 如果分类项本身带内联样式（比如
style="display: block"），getComputedStyle读到的仍是 inline 值，优先用 class 控制更可控
dataset.categoryName 对应 data-categoryname，结果读不到值。这类问题调试起来无声无息，得养成检查 DOM 元素属性面板的习惯。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
