HTML属性操作：getAttribute与setAttribute详解

在HTML DOM操作中，getAttribute()和setAttribute()是精准控制元素HTML属性（如data-*、aria-*、class、id等）的核心方法，但它们与直接访问DOM属性（如input.value、checkbox.checked）存在本质区别：前者读写的是HTML源码中声明的静态属性值，后者反映的是DOM节点的实时状态。例如，用户修改输入框内容后，input.value返回最新值，而getAttribute('value')仍返回初始HTML中的值；设置disabled属性需用setAttribute('disabled', '')并配合removeAttribute()移除，而非赋值false；修改样式或类名也应优先使用style.cssText或classList以避免覆盖。正确区分“HTML属性”与“DOM属性”的语义边界，是避免表单逻辑错误、提升代码健壮性的关键——动手前只需自问一句：我是在配置标签本身，还是在操控当前交互状态？

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；做条件判断时别漏掉这层

实际写代码时，最常踩的坑是混淆「HTML 属性」和「DOM 属性」的语义边界——尤其在表单控件上，一个 value 调用可能拿到完全不同的东西。动手前先问一句：我是在读/写标签源码，还是在读/写当前状态？

今天关于《HTML属性操作：getAttribute与setAttribute详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！