dom属性修改需区分html属性与dom属性：setattribute/getattribute操作html源码字符串，适用于data-*等；id、value、checked等内置属性应直接赋值dom属性；class用classlist，style用style.property或object.assign；几何属性变更易触发重排，影响性能。
DOM 属性修改不是简单赋值就能立刻生效，关键在于区分“HTML 属性”和“DOM 属性”，以及理解哪些属性会触发视图更新、哪些需要手动同步。
用 setAttribute() 和 getAttribute() 操作 HTML 属性
这些方法直接读写元素在 HTML 标签中声明的原始属性（即字符串形式），适用于 class、data-*、title 等非内置属性：
-
el.setAttribute('data-id', '123')—— 写入后可在 HTML 源码中看到变化 -
el.getAttribute('data-id')—— 只能拿到字符串，不管它是否被 JS 动态改过 - 对
value、checked这类表单属性慎用：它们有 DOM 属性和 HTML 属性两套机制，混用容易出错
直接访问 DOM 属性更常用也更可靠
多数内置属性（如 className、id、value、checked、disabled）都有对应的 JS 属性，直接赋值即可生效且实时反映状态：
-
el.id = 'new-id'—— 修改后 ID 生效，且el.getAttribute('id')也会变 -
input.value = 'hello'—— 更新输入框显示内容，且用户后续输入会基于这个新值继续 -
checkbox.checked = true—— 同步勾选状态，比setAttribute('checked', '')更准确
class 和 style 有专门的便捷方式
不推荐直接操作 className 或 style.cssText，应使用现代 API 提高可维护性：
- 类名操作用
el.classList.add/remove/toggle/contains()—— 安全、支持多类、不覆盖已有类 - 行内样式用
el.style.propertyName = 'value'（注意驼峰命名，如backgroundColor） - 批量设样式可用
Object.assign(el.style, { color: 'red', fontSize: '14px' })
修改后需注意“是否触发重排/重绘”
有些属性变更会强制浏览器重新计算布局（重排）或重画像素（重绘），影响性能：
- 改
width、height、top、left等几何属性容易触发重排 - 改
color、background-color通常只触发重绘，开销小 - 频繁操作时，建议先脱离文档流（
el.style.display = 'none'）、批量修改、再恢复显示
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
