data-属性仅作静态标记，筛选需javascript读取并操作dom；必须用queryselectorall配合css属性选择器匹配， nodelist需转数组才能filter；多条件、大小写、空值、url同步等边界须严谨处理。
HTML data- 属性本身不触发筛选，它只是静态元数据容器；真正实现筛选必须靠 JavaScript 读取这些属性、做条件判断、再控制 DOM 显隐或重渲染。
为什么直接写 data-category="laptop" 没反应
浏览器不会自动监听或响应 data- 属性变化。常见错误是只加了属性、没写 JS 逻辑，导致“点了按钮但列表不动”。data- 的作用纯粹是标记——像给商品贴标签，但谁来查标签、按标签找东西，得你用 querySelectorAll() 和 filter() 写清楚。
- 检查开发者工具 Elements 面板，确认属性真实存在于 DOM 中（不是 JS 动态插入后才出现）
- 属性名必须原样小写、带连字符：
data-user-id有效，dataUserId或data_user_id无效 -
element.dataset.category会自动转小写并移除前缀，所以data-category-name→element.dataset.categoryname，命名要避开驼峰冲突
怎么用 querySelectorAll 精准匹配 data 属性
别用 class 模拟筛选状态，也别拼字符串查 innerText。正确路径是：统一用 data- 标记语义，再用 CSS 属性选择器精准抓取。
- 单值匹配：
document.querySelectorAll('[data-category="laptop"]')—— 值必须完全相等，且注意大小写 - 多值匹配（如
data-tag="cotton, summer"）：el.getAttribute('data-tag')?.split(',').map(s => s.trim()).includes('summer') - 忽略大小写需手动转：
el.dataset.category?.toLowerCase() === 'laptop'，CSS 选择器的i标志对data-无效 - 空值容错：没写
data-brand时el.getAttribute('data-brand')返回null，不是空字符串，比较前务必做?? ''或?.toString()
filter() + Array.from() 是最稳的过滤组合
DOM 查询返回的是 NodeList，不是数组，不能直接调用 filter()。写 document.querySelectorAll('.product').filter(...) 必报 filter is not a function。
- 必须先转数组：
const products = Array.from(document.querySelectorAll('.product')) - 用
every()实现“且”关系（用户勾了红色+ M 码，就得同时满足），不是some() - 数值类条件务必转换类型：
parseFloat(el.dataset.price) ，否则字符串比较 <code>'100' 会出错 - 性能考虑：如果数据量大（>200 条），建议把原始数据存在 JS 数组里，过滤后再一次性渲染，避免反复操作 DOM
多选、重置、URL 同步这些细节最容易漏
单选能跑通，不代表多选就 OK。很多页面点第二个标签就失效，问题常出在状态管理上。
- 多选用
Set存激活项：const activeCategories = new Set(['laptop', 'monitor'])，比数组去重和查询更快 - 事件委托必须用
e.target.closest('[data-category]')，否则点到按钮里的图标或文字时，e.target.dataset.category是undefined - 重置筛选不是清空 DOM，而是恢复初始显隐状态；别用
innerHTML = originalHTML，会丢事件监听 - URL hash 要手动同步：
location.hash = '#filter=laptop,monitor'，页面加载时也得解析 hash 并反向激活按钮，否则刷新就丢状态
真正难的不是写第一轮筛选，而是当用户既选颜色又选价格区间还叠加品牌时，条件组合的优先级、空值跳过、大小写归一、多值分隔符处理——这些边界情况一旦漏掉一个，筛选结果就不可信。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
