原生HTML+JS多属性筛选需用data-属性标记商品特征，通过事件委托监听checkbox，收集条件后用Array.from()转NodeList再filter()匹配，确保every()全条件满足、空值容错及大小写统一。
怎么用原生 HTML + JS 实现多属性筛选，不依赖框架
纯 HTML 能做的只是结构和样式基础，真正实现“点击筛选”必须靠 JavaScript 控制显隐逻辑。很多人卡在「点了没反应」，本质是没把 data- 属性、事件委托和过滤条件联动起来。
核心思路：每个商品用一组 data- 属性标记其所有属性值（如 data-color="red"、data-size="M"），筛选时收集当前勾选的所有条件，遍历商品元素，只保留全部匹配的。
- 别用
id给每个商品加唯一标识——没意义，筛选看的是属性组合，不是单个 ID - 所有筛选项（颜色、尺寸、材质）统一用
<input type="checkbox">，方便用checked状态取值 - 用
event.target.closest('.filter-item')做事件委托，避免给每个 checkbox 单独绑事件 - 注意空值处理：如果某商品没写
data-brand，el.getAttribute('data-brand')返回null，不是空字符串，比较前要转成字符串或做容错
为什么 filter() + Array.from() 比 for 循环更稳
DOM 查询返回的是 NodeList，不是数组，不能直接调用 filter()。常见错误是写 document.querySelectorAll('.product').filter(...)，报错 filter is not a function。
正确做法是先转数组，再链式过滤：
立即学习“前端免费学习笔记（深入）”；
const products = Array.from(document.querySelectorAll('.product'));
const matched = products.filter(el => {
return conditions.every(c => {
const val = el.getAttribute(c.key);
return val && val.includes(c.value); // 支持多值逗号分隔，如 data-tag="cotton,organic"
});
});
-
Array.from()兼容性好（IE11+），比[...document.querySelectorAll()]更稳妥 - 用
every()而不是some()：筛选是“且”关系，不是“或”——用户勾了红色+ M 码，就得同时满足，不是满足一个就行 - 如果后端返回的是 JSON 数据而非 DOM，直接用 JS 数组过滤，再用
innerHTML渲染，性能更好，但需自行处理 XSS 风险
多值属性（如“适用季节：春/夏”）怎么存和匹配
一个商品可能属于多个季节，硬编码成 data-season="spring" 就没法再匹配“夏季”。常见错误是拼接字符串如 data-season="spring,summer"，然后用 includes() 匹配，但这会误伤（比如搜 "pr" 也能命中 "spring"）。
- 推荐用英文逗号分隔 + 空格清理：
data-season="spring, summer, autumn"，匹配时用split(',').map(s => s.trim()).includes(value) - 或者用 JSON 字符串：
data-season='["spring","summer"]'，取值后JSON.parse(el.getAttribute('data-season'))，更严谨但要注意引号转义 - 避免用空格分隔（
data-season="spring summer"），因为用户属性值本身可能含空格（如"long sleeve"） - 后端吐数据时，统一小写 + 去重，前端匹配前也转小写，避免大小写导致漏匹配
筛选后滚动位置丢失、SEO 友好性怎么兼顾
纯前端筛选会清空/重绘列表，页面可能跳回顶部，用户得重新滚下来；而且搜索引擎看不到筛选后的结果，不利于商品页 SEO。
- 不要用
innerHTML = ''清空再拼接，改用display: none切换显隐——保留 DOM 位置和滚动锚点 - URL 同步用
history.replaceState()写入参数，如?color=red&size=M，刷新页面能还原状态，也方便分享链接 - 服务端仍需支持相同参数的接口（如
/api/products?color=red&size=M），首屏由后端渲染，JS 只负责后续交互，这样既 SEO 友好，又交互流畅 - 别忽略键盘用户：给 checkbox 加
tabindex，按空格可切换，筛选后焦点要回到列表容器，不然屏幕阅读器会迷失
最易被忽略的是属性值的标准化——前端显示“红色”，后端存的可能是 red 或 RED 或 0xff0000，只要前后端约定不一致，筛选就必然断掉。上线前一定拿真实数据跑一遍全量组合校验。
