最省事方式是直接 new FormData(formElement)，它自动收集所有带name且非disabled的控件值；需注意name缺失或传入字符串选择器会报错，多值字段须用getAll()，提交前务必preventDefault()并确保所有控件有name。
用 FormData 一次性拿全字段最省事
直接 new FormData(formElement) 就行，它自动收集所有带 name 属性、非 disabled 的控件值，包括 <input type="file">。不用区分 text、checkbox 或 select[multiple]，也不用手动遍历判断 checked。
常见错误现象：传了字符串选择器（如 "#myForm"）给 FormData 构造函数，结果报错；或者表单里有控件没写 name，它就直接忽略——不是 bug，是规范行为。
-
FormData只收录“成功控件”：必须有name，且不能是disabled、type="reset"或无值的type="image" - 多选
checkbox或select[multiple]同名时，formData.get("tags")只返回最后一个值；要用formData.getAll("tags")拿数组 - 转成普通对象可用
Object.fromEntries(formData)，但注意：重复name会被覆盖，不保留多值
在 submit 事件里读 event.target.elements 更可控
比起全局查 DOM，用事件对象里的 event.target.elements 更准——它天然按 HTML 渲染顺序返回，包含 hidden、textarea、select，自动跳过 disabled 项，还兼容动态插入的字段（只要提交时已存在）。
典型翻车现场：监听 click 而不是 submit，导致用户按回车提交时逻辑不触发；或用 document.querySelector("input").value 硬写，漏掉 select 和未聚焦的 textarea。
立即学习“前端免费学习笔记（深入）”；
-
event.target.elements["username"]比document.getElementById("username")更稳，尤其 ID 冲突或表单嵌套时 - 同名复选框要手动过滤：
Array.from(event.target.elements["agree"]).filter(i => i.checked).map(i => i.value) - 多选
select得读selectedOptions集合，不是value字符串
querySelectorAll 适合结构分散或动态生成的表单
当表单控件不在同一个 <form> 标签内（比如分步表单、弹窗字段），或由 JS 动态注入，form.elements 就失效了。这时用 document.querySelectorAll('[name]:is(input, select, textarea)') 直接捞所有有效控件更灵活。
容易踩的坑：忘了排除 disabled 元素，或对 checkbox/radio 没做 checked 判断，导致空值被塞进数据对象。
- 务必加
:not([disabled])过滤器，否则 disabled 控件的 value 也会被读取 -
textarea和select的值也得走.value，别误用.textContent - 多个同名控件（如一组
checkbox）需聚合为数组，避免只取第一个
别在 React/Vue 里直接操作 DOM 取值
如果表单是受控组件（即 value 绑定 state），用 ref.current.querySelector("input").value 会拿到滞后于真实状态的 DOM 值——尤其中文输入法下，onInput 还没触发，DOM 已更新但 state 没同步。
React 推荐用 useRef 指向原生 DOM 元素（不是自定义组件），或直接从 state 读；Vue 用 v-model 后直接取 data 属性。硬要 DOM 操作，必须确保 ref 是 HTMLInputElement 实例，不是封装后的组件实例。
- 受控组件中，
defaultValue不影响后续值，只设初始值 - 第三方 UI 库（如 Ant Design）的
Input组件，其内部 input 元素可能被封装，ref.current.value会是undefined - 快速连续输入时，
input事件比change更及时，适合实时校验
FormData 是多数场景的默认选择，但它不解决“如何处理多值同名字段”的语义问题——这个得靠后端约定（如 name="hobby[]"）或前端手动归并。真正容易被忽略的是：**表单提交前是否已调用 event.preventDefault()，以及所有控件是否都设置了 name 属性**。漏掉这两点，其他逻辑再完整也拿不到数据。 
