应根据操作目标选择：读写HTML源码属性（如data-、aria-）用getAttribute/setAttribute，读写DOM实时状态（如value、checked）直接访问属性。
getAttribute 读取的是 HTML 属性，不是 DOM 状态
直接访问 input.value 拿到的是当前输入值，但 getAttribute('value') 只返回最初写在 HTML 标签里的值（比如 <input value="default">），哪怕用户已改过内容，它也不会变。
- 对
id、class、src、href这类反射型属性有效，但class返回字符串，不是类名数组 - 布尔属性如
disabled、checked：有该属性就返回字符串（如"disabled"），没写就返回null，**不是true/false** - 自定义属性（
data-*）能读，但推荐用dataset更安全——比如el.dataset.userId自动转驼峰，而getAttribute('data-user-id')得手动处理连字符
setAttribute 写入的是字符串，且会覆盖整个属性值
setAttribute('style', 'color:red') 会把整个 style 属性替换成这个字符串，清掉之前所有内联样式；想局部改样式，应该用 element.style.color = 'red'。
- 设布尔属性只需传任意非空字符串：
el.setAttribute('disabled', '')或el.setAttribute('disabled', 'disabled')都生效；要移除，必须用removeAttribute('disabled')，不能设成''或false - 设
class会完全替换，不合并；需要增删类名时，优先用classList.add()/classList.remove() - 设
value对<input>只影响初始值，不影响当前用户输入；运行时改值请直接赋input.value = 'xxx'
什么时候该用 getAttribute/setAttribute，而不是直接点属性？
核心判断标准：你想操作的是「HTML 源码里写的那个属性」，还是「当前 DOM 节点的实时状态」。
- 读写
data-属性、aria-属性、role等语义化或自定义属性 → 用getAttribute/setAttribute或dataset - 读写
value、checked、selected、innerHTML等反映当前状态的属性 → 直接点属性，比如input.value、checkbox.checked - 改
id、src、href这类既在 HTML 中声明、又影响行为的属性 → 两者都行，但setAttribute更明确表示“我要改 HTML 属性”，适合初始化或配置场景
容易忽略的兼容性与性能细节
IE8+ 支持 getAttribute/setAttribute，但 IE8 不支持 dataset；现代浏览器中它们性能差异极小，无需刻意优化。
立即学习“前端免费学习笔记（深入）”；
-
getAttribute('class')在 IE8–10 返回className属性值（即 class 字符串），但标准行为是返回class属性值，行为一致；不过仍建议用className或classList替代 - 反复调用
setAttribute修改同一属性（比如循环设data-index）不会触发重排，但频繁操作style属性会，这点比直接赋style.cssText更轻量 - 注意：
getAttribute对不存在的属性返回null，不是undefined；做条件判断时别漏掉这层
value 调用可能拿到完全不同的东西。动手前先问一句：我是在读/写标签源码，还是在读/写当前状态？ 
