getAttribute('value') 返回HTML初始值，input.value 返回实时用户输入值；value、checked、selected等交互属性必须用DOM property访问，不可用getAttribute。

表单值同步出错，往往不是代码写错了，而是用错了“读取方式”——getAttribute('value') 和 input.value 返回的压根不是同一个东西。关键不在“能不能用”，而在“该不该用”。

为什么 getAttribute 拿不到用户刚输的内容？

因为 getAttribute 只读 HTML 标签里写的初始值，不关心用户操作后的状态。比如：

• <input value="默认文本"> → input.getAttribute('value') 始终返回 "默认文本"
• 用户手动改成“新内容”后 → input.value 已变成 "新内容"，但 getAttribute('value') 还是 "默认文本"
• JS 动态设 input.value = 'JS改的' → input.value 更新了，getAttribute('value') 仍不变

哪些表单属性必须用 .property，不能用 getAttribute？

以下属性反映的是实时交互状态，应直接访问 DOM property：

• value：文本框、textarea、select 的当前值
• checked：checkbox/radio 是否被勾选（布尔值）
• selected：option 是否被选中
• disabled、readonly：当前是否禁用/只读（布尔值，不是字符串）

它们的共同点是：类型为布尔或动态字符串，且会随用户操作或 JS 赋值实时更新。

什么时候才该用 getAttribute / setAttribute？

当你明确要操作「HTML 源码层面的声明」时才用：

• data-* 属性：如 data-id、data-user-type → 推荐用 dataset（el.dataset.userId），更安全简洁
• aria- 和 role：可访问性语义，需写入 HTML 结构，用 setAttribute('aria-hidden', 'true')
• id、class、src、href：这些属于“反射型属性”，两者都可，但 setAttribute 更强调配置意图；改 class 推荐用 classList，避免覆盖

一个典型同步修复示例

常见错误写法（导致拿不到最新输入）：

const input = document.querySelector('input');
console.log(input.getAttribute('value')); // 错！永远是初始值

正确做法：

• 读值 → input.value
• 设值 → input.value = '新内容'（不是 setAttribute('value', ...)）
• 判断是否勾选 → checkbox.checked（不是 getAttribute('checked') === 'checked'）
• 临时禁用 → btn.disabled = true（不是 setAttribute('disabled', '')）