input 的 value 分 HTML 属性和 DOM 属性两层：HTML value 仅初始化 defaultValue 和首次渲染，后续用户输入或 JS 赋值（el.value = 'x'）操作的是 DOM 属性，实时更新界面；setAttribute('value', 'x') 仅改 HTML 属性，不影响显示。
value 属性不是“设置方法”的问题，而是“什么时候生效、谁在控制它”的问题。直接写 value="xxx" 只在初始渲染时起作用；一旦用户输入或 JS 修改了 value 属性，后续就由 DOM 属性（而非 HTML 属性）主导——这是绝大多数人踩坑的根源。
input 的 value 属性分 HTML 属性和 DOM 属性两层
HTML 中写的 value="初始值" 是初始值声明，只影响元素创建时的 defaultValue 和首次渲染。之后所有用户输入、JS 赋值操作（如 el.value = "新值"）修改的都是 DOM 属性，跟 HTML 属性再无关系。
- 读取
el.getAttribute('value')拿到的是原始 HTML 字符串，不会变 - 读取
el.value拿到的是当前真实值（含用户输入），会实时更新 - 用
el.setAttribute('value', 'x')不会改变输入框显示内容，只会改 HTML 属性（下次 reset 时才可能体现）
用 JS 动态设置 input 值必须赋值给 DOM 属性
想让输入框立刻显示新内容，唯一可靠方式是操作 value 这个 DOM 属性，而不是试图“设置 HTML 属性”。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const input = document.querySelector('input');
input.value = 'Hello'; // ✅ 正确：立即生效，光标跳到末尾
input.setAttribute('value', 'Hello'); // ❌ 无效：HTML 属性变了，但界面不更新
- 如果要保留光标位置，需手动保存/恢复
selectionStart/selectionEnd - 在 React/Vue 等框架中，不要混用受控（
value+onChange）和非受控模式，否则会触发警告甚至值被重置 - 设置后若需触发
input或change事件，得手动dispatchEvent，浏览器不会自动补发
表单 reset() 时 value 怎么恢复
form.reset() 恢复的是每个 input 的 defaultValue，也就是最初 HTML 中写的 value 属性值，或 JS 初始化时设的 defaultValue（如果没写 HTML value，则为 ""）。
立即学习“前端免费学习笔记（深入）”；
- 用户输完内容后点 reset → 回到初始 HTML
value，不是最后一次 JS 设置的值 - JS 先
input.value = 'A'，再input.defaultValue = 'B'，然后form.reset()→ 显示 'B' - 想让 reset 恢复 JS 设置的值？只能拦截
reset事件，手动赋值，或改用自定义重置逻辑
真正麻烦的从来不是“怎么写”，而是搞不清 value 在 HTML 层、DOM 层、事件流、表单重置之间来回切换的时机。一个 input 元素身上同时存在 getAttribute('value')、defaultValue、value、textContent（对某些 type 无效）四个看似相关实则独立的值，稍不注意就会互相覆盖或静默失效。
