能，但需恪守html属性三层语义：attribute是初始指令，property是实时状态，dataset是js可信数据边界；data-*仅存初始化上下文，formaction/formmethod替代js提交，contenteditable需防xss，布尔属性须操作property而非attribute。
能，但前提是把 HTML 属性当「契约」用，而不是当「胶水」用——data-*、formaction、contenteditable 这些属性本身不执行逻辑，但它们定义了 JS 该读什么、何时读、读到后该怎么响应。乱加 onclick 或硬塞 class 名传参，只会让耦合更隐蔽、更难调试。
data-* 属性是唯一安全的数据通道
它被浏览器原生支持，自动映射到 dataset，不会触发重排，也不影响语义。关键不是“能存数据”，而是“只该存初始化时就确定的、不随用户操作实时变化的上下文”。
-
data-item-id="789"✅ 适合：按钮对应哪条记录，页面加载时就固定 -
data-status="loading"❌ 不适合：状态会变，JS 应该改el.dataset.status = "success"，而不是反复 setAttribute - 别存 JSON 字符串：
data-config='{"retry":3}'→ 每次都要JSON.parse()，出错没提示，建议拆成data-retry-count="3" - 读取时用
el.dataset.itemId（自动转驼峰），别用el.getAttribute('data-item-id')，后者返回 null 时不易察觉
formaction 和 formmethod 让表单提交脱离 JS 绑定
多数“点击按钮发请求”场景，根本不需要 addEventListener + fetch。浏览器原生表单能力已足够健壮，且天然兼容回车提交、禁用 JS 降级、Ctrl+Enter 等行为。
- 把多个操作按钮包进同一个
<form></form>，不写action或method - 各按钮设
type="submit"+formaction="/api/archive"+formmethod="POST" - JS 只监听
form.addEventListener('submit', e => { e.preventDefault(); console.log(e.submitter); }) - 注意：
formaction是相对当前页面 URL 的，不是相对于<form></form>的action属性（哪怕它写了）
contenteditable + blur 是轻量编辑的底线方案
不用富文本库也能实现可编辑区域，但必须接受它的限制：不触发 input 事件，不自动同步到 JS 状态，且有 XSS 风险。
- 设
contenteditable="plaintext-only"防 Word 粘贴污染结构 - 别监听
input，改用blur或keydown+setTimeout捕获最终值 - 生产环境必须过滤内容：
el.innerHTML = sanitize(el.innerText)，否则<script>alert(1)</script>会执行 - 它和
textarea不同：没有value属性，读取用el.textContent或el.innerText，后者会折叠空白
布尔属性（disabled/checked/hidden）混用 setAttribute 和 property 是最常见坑
HTML attribute 是初始快照，DOM property 是实时状态。混用会导致 JS 判断为真、UI 却未生效，或反之。
- 初始化写 HTML：
<button disabled></button>→ 自动同步el.disabled = true - 运行时一律操作 property：
el.disabled = false、el.checked = true -
hidden是例外：没有对应 property，必须用el.toggleAttribute('hidden')或el.removeAttribute('hidden') - 检查状态永远用
el.disabled，别用el.hasAttribute('disabled')—— 后者只告诉你 HTML 里有没有写，不反映当前是否真被禁用
真正难处理的不是“怎么写”，而是“哪一层在说话”：attribute 是 HTML 写给浏览器的初始指令，property 是 DOM 对当前状态的实时陈述，dataset 是你和 JS 之间约定的可信数据边界。越早分清这三层，越少掉进“明明改了却没反应”的陷阱。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
