应优先使用 DOM 属性（property）而非 setAttribute() 修改表单值与状态：input.value = "新内容" 实时更新显示和提交值，而 setAttribute("value", "...") 仅改 HTML attribute、无效于已渲染元素；checked、selected 等布尔状态同理，property 操作才可靠反映真实交互。
在 JavaScript 中，修改表单元素（如 <input>、<select></select>、<textarea></textarea>）的值或状态，既可以用 setAttribute()，也可以直接操作 DOM 属性（property），但二者行为不同，尤其对表单控件有明显区别。
value 属性：property 赋值才真正改变用户可见值
value 是表单元素的“属性（property）”，不是 HTML 特性（attribute）。初始值由 value attribute 决定，但用户输入或脚本修改后，实际显示和提交的值由 value property 控制。
-
用 property 赋值（推荐）：
input.value = "新内容"—— 立即更新输入框显示，且影响表单提交值 -
用 setAttribute（无效于实时显示）：
input.setAttribute("value", "新内容")—— 只修改 HTML attribute，不会改变当前输入框内容，也不会影响已存在的用户输入；仅对未初始化的元素“下次渲染”可能生效（实际极少起作用）
checked / selected / disabled 等布尔状态：property 更可靠
像 checked、selected、disabled 这类布尔属性，也应优先使用 property 操作：
-
checkbox.checked = true—— 正确勾选，反映真实交互状态 -
checkbox.setAttribute("checked", "")—— 仅设置 attribute，不保证 UI 更新（尤其在已渲染的 checkbox 上可能无反应） -
select.options[0].selected = true—— 正确设为默认选中项 -
select.setAttribute("value", "xxx")—— 对<select></select>无效；要改选中项，必须操作option.selected或select.value
何时可以用 setAttribute？
setAttribute() 适合设置那些**与用户交互无关、纯配置型的 HTML attribute**，例如：
-
input.setAttribute("placeholder", "请输入姓名")—— 修改占位符文本（不影响当前 value） -
input.setAttribute("data-id", "123")—— 设置自定义 data 属性 -
button.setAttribute("disabled", "disabled")—— 虽然能禁用按钮，但更推荐button.disabled = true（语义清晰、类型安全）
小技巧：attribute 和 property 的同步关系
可以通过 el.hasAttribute("value") 和 el.value 对比来理解差异。例如：
const input = document.querySelector('input');
console.log(input.getAttribute('value')); // 可能是 null 或初始字符串
console.log(input.value); // 当前真实值（含用户输入）
input.value = 'abc';
console.log(input.getAttribute('value')); // 仍是原来的值（未同步！）
说明：property 修改不会自动反写回 attribute；反之，attribute 修改也不自动更新 property（除首次渲染外）。
