应根据用途区分使用：操作html attribute用setattribute，用于css选择器、无障碍支持及自定义data-*属性；操作dom property用点语法，用于表单状态、实时值更新及标准属性如value、checked等。
DOM 属性操作分两类：HTML attribute（属性）和 JavaScript property（属性）。它们看着相似，但来源、类型、行为完全不同。用错方法会导致值不更新、状态不同步或样式失效。
什么时候该用 setAttribute
setAttribute 操作的是 HTML 属性——也就是你写在标签里的原始字符串。它会真实写入 DOM 树，影响 CSS 选择器、辅助技术识别，以及第三方库解析。
-
自定义 data-* 属性：比如
data-user-id="123"，必须用el.setAttribute('data-user-id', '123')，才能被el.dataset.userId正确读取 -
aria-* 语义属性：如
aria-label、aria-expanded，屏幕阅读器依赖 HTML 中实际存在的属性，直接赋值 property 不触发语义更新 -
布尔类 HTML 属性：像
hidden、readonly、required。CSS 规则[hidden]只匹配有该 attribute 的元素，所以el.setAttribute('hidden', '')或el.removeAttribute('hidden')才能控制显示/隐藏 -
非标准或拼写特殊的属性：比如
xmlns、shape，没有对应 DOM property，只能靠 setAttribute
什么时候该用点语法直接赋值
点语法操作的是 DOM property，反映元素当前运行时的状态，不是 HTML 源码。它更高效、更符合直觉，尤其对表单控件和状态类属性。
-
表单控件状态：输入框的
value、复选框的checked、下拉框的selected—— 这些 property 值随用户交互实时变化，input.value = '新内容'会同步显示和内部值；而setAttribute('value', '新内容')只改 HTML 初始值，不影响已输入内容 -
布尔型 DOM property：如
disabled、hidden（注意：这个有同名 attribute 和 property，但行为不同），button.disabled = true立即禁用，且不会因字符串误写出错（setAttribute('disabled', 'false')仍为禁用） -
常用标准属性：
src、href、id、className（不是class）、textContent—— 直接赋值简洁、触发浏览器原生行为（比如设img.src会自动开始加载图片）
常见混淆点与避坑提示
一个典型例子：<input value="初始值">
- HTML attribute
value始终是 "初始值"，除非手动setAttribute('value', ...) - DOM property
value是当前输入内容，用户打字后它就变了，input.value读到的就是最新值 - 想重置输入框？
input.value = ''清空显示和状态；input.setAttribute('value', '')只改 HTML，下次聚焦再失焦可能又回填“初始值” - 修改 class 推荐用
el.classList.add/remove/toggle()，比setAttribute('class', ...)更安全，避免覆盖已有类名
简单判断原则
先查 MDN 文档或浏览器控制台：元素上有没有同名的 JS property。如果有，且你要改的是实时状态（比如输入内容、是否选中、是否禁用），就用点语法；如果要写进 HTML 源码、供 CSS 或无障碍工具读取，就用 setAttribute。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
