绝大多数表单控件的值通过value属性读写，但需按类型区分：文本类用value，复选/单选用checked，下拉框用value或selectedIndex；disabled不影响JS读写但阻止提交，动态添加元素须确保DOM就绪后再操作。
用 value 属性读写 <input> 和 <textarea> 的值
绝大多数表单控件的当前值都通过 value 属性暴露，但要注意：它反映的是「初始 HTML 中的 value 属性值」还是「用户输入后的实时值」，取决于访问时机和元素类型。
对 <input type="text">、<input type="email">、<textarea> 这类可编辑控件，element.value 始终返回用户当前输入内容（包括空字符串），而非初始 value 属性值。修改它会立即更新界面显示。
- 获取值：
document.getElementById('name').value - 设值：
document.getElementById('age').value = '28' - 清空：
inputEl.value = ''（比inputEl.value = null更安全） - 注意：
inputEl.getAttribute('value')返回的是原始 HTML 属性值，不会随用户输入变化，别误用
checked 和 selected 用于复选框、单选框与下拉选项
<input type="checkbox"> 和 <input type="radio"> 没有 value 属性的“双向绑定”语义——它们的“是否被选中”状态由 checked 布尔属性控制；<select> 的当前选中项则靠 selectedIndex 或 options[i].selected 判断。
- 获取复选框是否勾选：
cb.checked（返回true/false） - 设置单选组中某一项：
radioBtn.checked = true（需确保同name下其他项为false） - 获取下拉框当前选中值：
selectEl.value（自动返回选中<option>的value属性值） - 设下拉框选中第 2 项：
selectEl.selectedIndex = 1（索引从 0 开始） - 注意：
selectEl.value = 'xxx'只在存在对应value的<option>时才生效，否则静默失败
禁用控件的值仍可读取，但无法通过 UI 修改
disabled 属性不影响 JS 对控件值的读写能力——你依然能用 .value、.checked 获取或赋值，只是用户不能手动操作。这点常被忽略，导致“禁用后以为值不会变”的误判。
立即学习“前端免费学习笔记（深入）”；
- 禁用的输入框：
input.disabled = true后，input.value仍可读写 - 禁用的复选框：
cb.checked = false依然生效，但用户点不动 - 关键区别：
disabled元素的值**不会随表单提交**（enabled才会）；若需提交又不想让用户改，用readonly替代 - 注意：
readonly仅对text、search、tel、url、email、number、password有效，对checkbox无效
动态添加的控件需确保 DOM 已就绪再操作
用 JS 动态插入的表单元素（比如通过 innerHTML 或 appendChild 添加），如果在插入前就尝试访问其 value 或 checked，会得到默认值或 undefined——因为元素还没挂载到文档树里，或者事件监听器尚未绑定。
- 确保操作发生在插入 DOM 之后：
form.appendChild(newInput); console.log(newInput.value); - 避免在
DOMContentLoaded之前操作document.getElementById查找动态生成的 ID - 对通过模板字符串生成的控件，推荐用
insertAdjacentHTML+ 后续querySelector定位，比依赖 ID 更可靠 - 特别注意：Vue/React 等框架中，直接操作 DOM 值可能绕过响应式系统，造成视图与数据不一致
value，开关类靠 checked，选择类靠 selectedIndex 或 selected，而禁用/只读行为又进一步影响提交逻辑。实际写的时候，先看元素类型，再决定用哪个属性，比硬记“统一 API”更稳妥。 
