HTML属性（attribute）与DOM属性（property）是两套机制：getAttribute()获取HTML初始值，elem.xxx获取实时状态；表单控件应优先操作property，data-*属性是安全的双向桥梁。
HTML 属性和 JS 交互不冲突，但「属性（attribute）」和「属性（property）」在 DOM 中是两套不同机制，混用时容易出 bug —— 这才是实际问题的根源。
getAttribute() 和 elem.xxx 获取的不是同一个东西
HTML 中写的
、
、
等，在 JS 里分“初始值”和“当前状态”两层：
拿的是 HTML 标签上写的原始字符串（比如
返回
或
），DOM 删除该属性后就返回
是 JS 的 property，布尔类型，反映的是当前真实状态（哪怕没写
属性，JS 设为
后它就是
）
最典型：输入框手动改内容后，
还是初始值，
才是用户当前输入
修改表单控件状态，优先用 property 而非 setAttribute()
对
、
、
、
等，直接赋值 property 更可靠：
例外：自定义属性（如
）必须用
或
，因为它们没有对应 property。
立即学习
“
前端免费学习笔记（深入）
”；
监听变化时，attribute 和 property 的触发时机不同
用
监听 attribute 变化，或用事件（如
、
）监听用户交互，不能互相替代：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
响应用户输入，但不会响应
的 JS 修改
会触发
，但不会触发
事件，也不改变
的当前值
想统一捕获所有 value 变更？得同时监听事件 + 主动轮询或劫持 setter（不推荐），通常按场景选一种即可
data-* 属性是安全的桥梁，但别滥用
当需要 JS 和 HTML 共享配置数据时，
是唯一被设计为双向同步的通道：
JS 中可安全读写：
注意：
不支持数字、布尔等类型，全是字符串；且不要用它传大量状态（比如整个对象 JSON），那该用 JS 变量或 state 管理库。
最常踩的坑，是把
当成实时值来用，或者用
来控制 checkbox 状态——这两处一错，表单逻辑就静默失效。记住：表单控件的状态，99% 场景下只认 property。
disabledvaluecheckedgetAttribute('disabled')"""disabled"nullelem.disableddisabledtruetruevaluegetAttribute('value')elem.valueinputtextareaselectbuttonconst input = document.querySelector('input');
input.value = '新内容'; // ✅ 正确更新显示和取值
input.checked = true; // ✅ 单选/复选框状态
input.disabled = false; // ✅ 控制禁用态
// ❌ 避免这样：
input.setAttribute('value', '新内容'); // 只改 attribute，不更新 UI 实际值
input.setAttribute('disabled', ''); // 偶尔生效，但语义不清、兼容性差
data-*setAttribute()datasetMutationObserverinputchangeinput.addEventListener('input', ...)elem.value = 'xxx'elem.setAttribute('value', 'xxx')MutationObserverinputelem.valuedata-
const btn = document.querySelector('button');
console.log(btn.dataset.apiEndpoint); // "/users"（自动转驼峰）
btn.dataset.retry = "5"; // ✅ 自动更新 attribute
datasetgetAttribute('value')setAttribute('checked')