<p>能，但需正确使用 HTML 属性作为 JS 交互契约：data-* 提供安全钩子；disabled/checked 等布尔属性须区分 attribute 与 property；formaction 等可减少冗余 JS 绑定。</p>
能，但不是靠“加属性”本身，而是靠属性提供可预测的钩子（hook）——关键在于用对属性、读对时机、避开 DOM 同步陷阱。
data-* 属性是 JS 交互最安全的入口
浏览器不解析 data- 开头的属性，不会影响渲染或语义，JS 却能随时读取。它比用 id 或 class 更精准，比内联 onclick 更可控。
常见错误：把业务数据硬编码进 class（比如 class="btn-delete-123"），导致 JS 要正则提取 ID，一改结构就崩。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 在 HTML 中写
<button data-item-id="456" data-action="archive">归档</button> - JS 里用
el.dataset.itemId（自动转驼峰）或el.getAttribute('data-item-id')读取 - 避免用
dataset写入布尔值：el.dataset.active = true写的是字符串"true"，判断时别用=== true
disabled/checked/hidden 等布尔属性要区分「初始状态」和「运行时状态」
这些属性控制元素行为，但 JS 修改它们的方式不统一：有的该用 setAttribute，有的必须操作 DOM 属性（.disabled），混用会导致 UI 和 JS 状态不一致。
典型现象：点击按钮后 el.setAttribute('disabled', 'disabled')，但后续 JS 检查 el.disabled 仍是 false —— 因为属性（attribute）和属性（property）没同步。
实操建议：
- 初始化时用 HTML 属性（如
<input disabled>），让 DOM 自动映射到 property - 运行时一律操作 property：
el.disabled = true、el.checked = false、el.hidden = true -
hidden是个例外：它没有对应 property，必须用el.toggleAttribute('hidden')或el.setAttribute/RemoveAttribute
用 formaction、formmethod 等表单覆盖属性减少 JS 绑定
很多交互本质是提交不同 URL 或方法，硬写 JS 监听 + fetch 不仅冗余，还绕过了浏览器原生表单能力（如回车提交、禁用 JS 降级）。
场景举例：同一个页面多个操作按钮，分别触发删除、导出、审核，传统做法是给每个按钮加 onclick 并手动构造请求。
更轻量的解法：
- 所有按钮放在一个
<form>内（不用name或id） - 各按钮设
type="submit"+formaction="/api/delete"+formmethod="POST" - JS 只需监听
form的submit事件，用e.submitter区分按钮来源 - 这样既保留语义化，又省去 N 个事件监听器，还能自然支持 Ctrl+Enter 提交
真正容易被忽略的点：HTML 属性不是“辅助 JS”，而是定义 JS 的契约边界——哪些值可信、哪些状态可预期、哪些变更会触发重排。写错一个 data- 名或误用 setAttribute，问题往往延迟到用户操作时才暴露，且难以复现。
