必须用包裹筛选控件，因其天然支持元素集合读取、FormData自动处理多选/同名/禁用项；改用需手动遍历判断，易因name遗漏或拼错导致采集失效。
多条件筛选必须用 <form></form> 包裹所有控件，否则状态无法集中读取、重置会失效、URL 同步和分页扩展直接卡死。
为什么非得用 <form></form> 而不是 <div> 包裹筛选项
<p>不用 <code><form></form> 的后果不是“不好看”，而是 JS 逻辑一改就崩：form.elements 天然支持 <input>、<select></select>、<textarea></textarea> 和多选 <input type="checkbox">；new FormData(form) 自动跳过未选中的 checkbox、合并同名 name（如多个 brand）、忽略 disabled 项。换成 <div> 后，你得手动遍历 <code>querySelectorAll('[name]')，再逐个判断 type、checked、value、multiple —— 一旦加个动态渲染的筛选项，name 漏写或拼错，整个采集就空转。
FormData 怎么安全读取多条件并组合成参数对象
FormData 怎么安全读取多条件并组合成参数对象别手写 { category: input.value, status: select.value }，也别用 getAttribute('name') 拼对象。统一走 FormData 解析：
const form = document.querySelector('form');
form.addEventListener('input', debounce(() => {
const formData = new FormData(form);
const params = Object.fromEntries(formData.entries());
// { category: "js", status: "active", price_min: "100" }
applyFilter(params);
}, 300));
- 多个同名
<input name="tag">被选中时，formData.entries()只返回选中的那些，无需额外处理 - 空值（如
price_min为空）会进params，但值是空字符串，后续过滤前要显式判断：if (params.price_min !== "" && params.price_max !== "") { ... } - 想保留多选值为数组（如
tag: ["react", "vue"]），用Array.from(formData.getAll("tag"))替代entries()
多个筛选字段怎么联动执行一次过滤，避免漏行或错显
每个输入框单独绑 input 事件没问题，但回调里不能各自执行完整过滤——用户同时改两个框，后触发的那个会覆盖前一个的结果。必须共用一个回调，一次性读取全部字段，再用单次布尔表达式合并条件：
立即学习“前端免费学习笔记（深入）”；
function applyFilter(params) {
const rows = document.querySelectorAll('tbody tr');
rows.forEach(row => {
const deptMatch = !params.department || row.cells[2].dataset.value === params.department;
const statusMatch = !params.status || row.cells[3].dataset.value === params.status;
const keywordMatch = !params.q || row.cells[0].textContent.toLowerCase().includes(params.q.toLowerCase());
row.style.display = deptMatch && statusMatch && keywordMatch ? '' : 'none';
});
}
- 每个条件默认返回
true（即“不限制”），避免空输入导致整行被隐藏 - 用
dataset.value而非textContent做精确匹配，避免显示文本格式变化（如“已启用” vs “启用中”）导致误判 - 不要链式调用
.filter().filter()，它反复创建新数组，中间某次过滤掉的行，后续条件就无从判断
移动端和防抖怎么配合才不丢状态、不卡顿
移动端键盘回车、iOS 清空按钮、安卓软键盘收起都可能触发多次 input 事件，不加防抖会导致 DOM 频繁重绘、列表闪退、甚至请求发重。
- 防抖必须做，且延迟设为 300ms：打字间隙足够覆盖绝大多数输入节奏
- 监听
input事件而非change：后者只在失焦时触发，用户无法实时看到筛选结果 - iOS Safari 点击搜索框清空按钮会发空字符串，需在
applyFilter中检查：if (Object.values(params).every(v => v === "")) { showAllRows(); return; } - 别在防抖回调里直接操作 DOM，先生成
params，再交由独立函数处理，方便后续接入 URL 同步或 fetch 请求
最常被忽略的是 name 属性和后端参数名的一致性——前端写 name="price_range"，后端却期待 price_min 和 price_max，这种错位不会报错，只会让筛选永远不生效。
