应区分HTML属性与DOM属性：getAttribute/setAttribute操作HTML属性（如data-、disabled字符串值），而value、checked等状态属性应直接读写DOM属性，class/style/data-推荐用classList/dataset/style.cssText。
用 getAttribute 和 setAttribute 修改元素属性，关键在于区分“HTML 属性”和“DOM 属性”，并确保操作的是真实存在的元素节点。
获取属性值：getAttribute 的正确用法
getAttribute() 读取的是元素在 HTML 中显式声明的属性（包括自定义属性），不反映运行时动态变化的 DOM 状态（比如 input.value 的当前输入内容）。
- 对标准属性（如
id、class、src）有效，但注意：class获取的是字符串，不是类名数组 - 对布尔属性（如
disabled、checked）返回"disabled"或null（未设置时），不是true/false - 支持获取自定义属性（如
data-id、data-user-name），推荐用dataset更方便
示例：
const btn = document.querySelector('button');console.log(btn.getAttribute('disabled')); // "disabled" 或 null
console.log(btn.getAttribute('data-count')); // "5"
设置属性值：setAttribute 的注意事项
setAttribute() 会把值转为字符串写入 HTML 属性，适用于初始化或覆盖式修改；但它不等同于直接赋值 DOM 属性（如 elem.value = 'xxx'）。
- 设置
class会完全替换原有 class 字符串，建议用className或classList更安全 - 设置
style会覆盖整个内联样式，应优先使用elem.style.xxx = 'value' - 设置布尔属性（如
disabled）只需传任意非空字符串（如"disabled"或""），移除则用removeAttribute()
示例：
const img = document.querySelector('img');img.setAttribute('src', '/new.jpg');
img.setAttribute('data-loaded', 'true');
img.setAttribute('disabled', ''); // 等效于设为禁用
什么时候不该用 get/setAttribute
以下情况推荐直接操作 DOM 属性或使用专用 API，更准确、高效：
-
value、checked、selected、disabled等表单/状态属性 → 直接读写elem.value、elem.checked -
className→ 用elem.className或elem.classList.add/remove/toggle -
style→ 用elem.style.color = 'red'或elem.style.cssText -
data-*属性 → 用elem.dataset.xxx（自动驼峰转换，如data-user-id→dataset.userId）
实用小技巧：结合使用提升可维护性
动态修改常配合条件判断与事件处理，注意避免重复设置或无效操作：
- 设置前先检查是否已存在目标属性，减少无谓重绘（尤其对
style或class） - 批量更新多个属性时，考虑用
Object.assign(elem, { value: 'x', disabled: true })（仅限可写 DOM 属性） - 监听属性变化可用
MutationObserver，但仅监控attributes: true时才捕获setAttribute触发的变更
