JavaScript读写元素属性方法详解

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《JavaScript如何读写元素属性》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

应优先使用 getAttribute() 和 setAttribute() 操作 HTML 特性，因其严格对应源码值；value、checked 等属性反映实时状态，与特性值不同；data-* 特性推荐用 dataset API；布尔特性设空字符串即生效，移除须用 removeAttribute()。

getAttribute 和 setAttribute 是最直接的 DOM 特性操作方式

读写 HTML 元素的原生特性（如 id、class、data-* 、disabled）应优先使用 getAttribute() 和 setAttribute()。它们严格对应 HTML 源码中写的值，不经过浏览器解析或转换。

• getAttribute('value') 返回元素标签里实际写的字符串，比如 <input value="abc"> 会返回 "abc"，哪怕用户已手动修改输入框内容
• setAttribute('hidden', '') 等价于写 hidden=""，布尔特性只需设空字符串即可生效
• 对不存在的特性调用 getAttribute() 返回 null，不是 undefined，判断时注意用 === null
• 自定义特性（如 data-id）必须用 getAttribute('data-id')，不能用 elem.data-id（语法错误）

element.xxx 属性访问只适用于部分标准属性，且行为不一致

像 elem.id、elem.className、elem.value 这类是 DOM 元素对象的 JavaScript 属性，和 HTML 特性不是一一映射关系。它们可能被浏览器动态更新，也可能有类型转换。

• elem.value 返回当前输入值（实时），而 getAttribute('value') 返回初始 HTML 值 —— 这是表单控件最常踩的坑
• elem.href 返回绝对 URL，getAttribute('href') 返回相对原始值（如 "./page.html"）
• elem.style 只反映内联 style 特性，不能读取 CSS 文件或