HTML属性与JS交互是前端底层基础，JS操作DOM本质是读写属性，但attribute（初始快照）与property（实时状态）不等价；data-*通过dataset安全映射，class/style/布尔属性需区分操作方式，否则引发UI与状态不同步。
HTML 属性和 JS 交互不仅有关系，而且是前端运行的底层基础——JS 操作 DOM 本质上就是读写 HTML 属性（或其对应的 DOM 属性），但二者不是一一映射，搞混就容易出错。
data-* 属性是 JS 交互最安全的自定义入口
浏览器会把 data- 开头的属性自动挂载到元素的 dataset 对象上，JS 可直接读写，且不会触发重排/重绘，也不会污染原生属性语义。
-
data-id="123"→el.dataset.id返回"123"（字符串） -
data-user-name="Alice"→el.dataset.userName（连字符转驼峰） - 修改
el.dataset.status = "loading"会同步反映在 HTML 中：data-status="loading" - 避免用
setAttribute('data-xxx', ...)手动操作，优先走dataset，更稳定
class 和 style 这类“映射不一致”的属性要特别小心
className 和 class、cssText 和 style 表面相似，实际行为差异大：
Nextjs App Router Audit
下载
审查 Next.js App Router 代码库，检查 React Server Component 边界错误、请求瀑布、客户端/服务端反模式以及 Core Web Vitals 风险...
-
el.className = "a b"✅ 安全覆盖整个 class 字符串；el.setAttribute('class', 'a b')也行，但不如前者快 -
el.style.color = "red"✅ 直接生效；el.setAttribute('style', 'color:red;')❌ 会覆盖全部内联样式，极可能丢失其他声明 -
el.getAttribute('style')返回原始字符串（含空格/分号），而el.style.color返回计算后值（如"rgb(255, 0, 0)"） - 批量改样式，优先用
el.style.cssText = "color:red;font-size:14px;"，比逐个赋值略快，但注意是完全替换
布尔属性（disabled、checked、hidden）不能只靠 setAttribute 切换状态
这类属性的“存在即真”，JS 中必须操作对应的 DOM 属性（property），而非 HTML 属性（attribute）：
立即学习“前端免费学习笔记（深入）”；
-
el.disabled = true✅ 立即禁用；el.setAttribute('disabled', '')❌ 虽然 HTML 显示了disabled，但某些老浏览器或表单提交逻辑可能不认 -
el.checked = false✅ 清除勾选；el.removeAttribute('checked')❌ 不一定同步 UI（尤其在用户已手动操作过之后） -
el.hasAttribute('disabled')检查的是 HTML 是否写了该属性，el.disabled检查的是当前实际状态——二者可能不一致 - React/Vue 等框架内部也是优先同步 property，
setAttribute在这类场景下基本只用于初始化
真正难处理的不是“能不能读写”，而是“读写的到底是哪一层”——HTML attribute 是初始值快照，DOM property 是实时状态镜像。混淆这两者，input 的 value、textarea 的内容、select 的选中项都会出现“JS 改了但界面没变”或“用户改了但 JS 读不到”的问题。
