HTML的value属性仅设初始值，不随用户输入更新；JS的element.value才是实时值，getAttribute('value')读的是静态HTML快照，而element.value反映浏览器动态维护的真实内容。

HTML 中 value 属性只控制初始值，不反映用户输入后的当前值；想获取或设置实时内容，必须用 JavaScript 的 value 属性（非 HTML 属性）。

为什么 value 属性设了却没变？

常见错觉：给 <input type="text"> 写了 value="hello"，再用 JS 改了输入框内容，之后又读取 element.getAttribute('value')，发现还是 "hello" —— 这是因为：

• getAttribute('value') 读的是 HTML 源码里写的初始值，属于“反射属性”，不会随用户操作更新
• 元素的 value JS 属性（即 element.value）才是运行时真实值，它由浏览器动态维护
• 二者在首次渲染后就分道扬镳：HTML value 是快照，JS value 是活态

value 属性和 value JS 属性的区别

同一个词，两个世界：

• HTML value 属性：只在元素创建时影响初始状态；后续修改它（如 setAttribute('value', 'x')）对已渲染的输入框无视觉或行为影响
• JS value 属性：element.value 读写的是当前实际内容；赋值会立即更新显示（对 text/password/hidden 等有效）
• 特殊例外：checkbox 和 radio 的 JS value 属性始终是其 HTML value 值（即提交时发出去的字符串），而是否选中由 checked 属性控制

下拉框（select）里的 option.value 怎么用？

这里容易混淆三层 value：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• <select> 元素自身的 value JS 属性：等价于当前选中 <option> 的 value 属性值（若该 option 没设 value，则取其文本）
• <option value="a">Apple</option> 的 value 属性：仅用于表单提交和 JS 读取，不影响显示文本
• option.value JS 属性：读出来就是上面那个 HTML value 值；但写它（option.value = 'b'）会改 HTML 属性，也影响后续提交
• 注意：select.value 是只读的“合成值”，不能直接赋值来切换选项；要改选中项，得操作 select.selectedIndex 或 option.selected = true

什么时候必须用 JS value 而不是 HTML value？

几乎所有交互场景都依赖 JS value：

• 表单校验：检查用户实际输了什么 → 用 input.value.trim() !== ''
• 实时搜索：监听 input 事件，读 event.target.value
• 受控组件（React/Vue）：把 input.value 绑定到状态，每次输入都触发重渲染
• 还原输入内容（比如编辑页回填）：应赋值给 input.value，而非 setAttribute('value', ...)，否则光标可能跳到开头

真正需要操作 HTML value 属性的场合极少，典型只有服务端渲染生成初始值、或调试时查看原始声明。