最可靠方式是直接操作 DOM 属性：input.value = "新内容"、input.disabled = true、input.readOnly = true；改 type 应重建节点；用 dataset 管理自定义状态；框架中应通过数据绑定更新而非直接操作 DOM。
用 JavaScript 直接改 input 元素的属性值最可靠
DOM 操作中，input 标签的属性（如 value、disabled、readonly）不能只靠修改 HTML 字符串或 setAttribute 来可靠生效——尤其 value 这种受控属性，浏览器会优先认 DOM 属性（property），而非 HTML 属性（attribute）。
正确做法是直接操作元素的 JS 属性：
-
input.value = "新内容"—— 改输入框当前显示值（同步更新 UI 和表单提交值） -
input.disabled = true或input.disabled = false—— 控制禁用状态，比setAttribute("disabled", "")更稳定 -
input.readOnly = true—— 注意拼写是readOnly（驼峰），不是readonly - 避免混用：
input.setAttribute("value", "xxx")只影响初始值，不改变当前输入框内容
动态改 type 属性要特别小心
input.type 看似能改，但实际限制极多：一旦 input 已插入 DOM，再改 type（比如从 text 改成 password）在部分浏览器（尤其是旧版 Safari）会抛错或清空值；Chrome 虽支持，但会丢失焦点、重置内部状态。
稳妥方案是重建节点：
立即学习“前端免费学习笔记（深入）”；
- 保存当前
value和selectionStart/selectionEnd（如果需保留光标位置） - 用
input.cloneNode(true)或document.createElement("input")创建新节点 - 设置新
type、复制必要属性（name、id、className等） - 用
replaceChild或insertBefore替换原节点
别图省事直接赋值 input.type = "password"，尤其在密码显隐切换场景下，用户正在输入时出问题概率很高。
用 dataset 存自定义状态比塞 data-* 属性更易维护
想给 input 记个“上次修改时间”或“校验规则 ID”，别反复 setAttribute("data-last-checked", Date.now())。直接用 dataset API：
const input = document.querySelector('input[name="email"]');
input.dataset.lastChecked = Date.now();
input.dataset.validationRule = "email-format";
好处是：
-
dataset自动处理 kebab-case → camelCase 转换（data-user-id→dataset.userId） - 读写都是字符串，无需手动
JSON.stringify或parseInt - 比
getAttribute/setAttribute性能略好，且语义更清晰
Vue/React 里别直接操作 input 的 DOM 属性
在响应式框架中硬写 input.value = "xxx" 会绕过数据绑定，导致视图和状态不一致。例如 Vue 中：
- 错误：
el.querySelector("input").value = "new"→ 视图变，但v-model绑定的 data 不变 - 正确：更新对应 data 字段（
this.form.email = "new"），让框架驱动 DOM - 特殊情况需强制同步（如第三方插件接管输入），用
$nextTick或ref+forceUpdate配合，而不是裸操作 DOM
框架的本质是接管状态流，跳过它去动底层 DOM，短期看着行，长期必然在某个交互分支里掉坑里。
