直接操作 DOM 元素的 value、checked、selectedIndex 等属性是最可靠的清空方式；form.reset() 仅恢复初始值而非清空，易踩坑；手动清空需获取元素引用后赋值，避免修改变量或误删 DOM 结构。
直接操作 DOM 元素的 value、checked、selectedIndex 等属性是最可靠的方式；用 form.reset() 会重置为初始值而非“清空”，容易踩坑。
用 form.reset() 清空表单时要注意初始值
调用 form.reset() 不是把所有字段设为空字符串，而是恢复到页面加载时的 value、checked、selected 状态。如果 input 初始没写 value，它才变空；但若写了 value="默认文本"，点重置后就变回“默认文本”，不是你想要的“清空”。
- 适合场景：表单有明确初始值，且你希望用户能一键回到那个状态
- 不适合场景：提交后想彻底清空（比如待办添加框），或初始值是动态生成的
- 注意：对
<textarea></textarea>和<select></select>同样生效，但不会清空通过 JS 动态插入的选项
手动清空指定输入框必须操作元素对象，不能只操作值
常见错误是写成 let val = input.value; val = "" —— 这只是改了变量，DOM 毫无变化。正确做法是拿到元素引用后直接赋值 input.value = ""。
- 优先用
document.getElementById("id")获取唯一元素，比querySelector更快更稳 - 对
<input type="checkbox">/<input type="radio">，要设element.checked = false - 对
<select></select>，设select.selectedIndex = 0（如果首项是 placeholder）或select.value = ""（需确保空值 option 存在） - 批量处理时，用
form.querySelectorAll("input, select, textarea")遍历，再按类型分支处理
清空容器内嵌套的输入框，别误删整个 DOM 结构
如果目标是一个 <div id="form-area">，里面混着文字、按钮和多个 <input>，千万别写 formArea.innerHTML = "" —— 这会把 input 元素本身也删掉，后续无法再取值或聚焦。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：只找里面的表单控件，例如
formArea.querySelectorAll("input, textarea, select") - 逐个清空：循环中对每个元素执行对应清空逻辑（
el.value = ""、el.checked = false等） - 保留结构：这样 input 标签还在，placeholder、focus 状态、绑定的事件（如
input监听）都不受影响 - 警惕 jQuery 的
.html("")或.empty()，它们等效于innerHTML = ""，同样危险
表单提交后清空，时机比方法更重要
在 submit 事件里直接写 input.value = "" 通常可行，但如果用了异步提交（如 fetch）、或者表单有校验逻辑，清空太早会导致用户看不到错误提示；清空太晚又可能被页面跳转打断。
- 同步提交（传统 form action）：建议用
event.preventDefault()+ 手动清空 + 手动提交，完全可控 - 异步提交：清空逻辑放在
fetch().then()成功回调里，确保数据真发出去了再清 - 避免
setTimeout(() => input.value = "", 0)这类“玄学延迟”，除非你明确遇到渲染竞争问题 - 最易忽略的一点：如果清空的是多个字段，且其中某个字段触发了依赖更新（比如 Vue/React 组件），原生 DOM 操作不会通知框架，得走响应式更新路径
