getAttribute只能读取HTML标签中静态声明的属性，如id、data-name、title等，不反映JavaScript动态修改后的值；例如box.id='new-box'后getAttribute('id')仍返回原值，须用setAttribute才更新。

getAttribute 只能读取 HTML 中静态写在标签上的属性（即“反射属性”或“HTML 属性”），不能读取 JavaScript 动态设置的 element.xxx 属性，也不能读取 DOM 属性（如 className、innerHTML）的当前值。

只读取 HTML 源码里明确写出的属性

例如：

<div id="box" data-name="user" class="active" title="Hello"></div>

这些属性在 HTML 中是显式声明的，getAttribute 才能准确获取：

• box.getAttribute('id') → "box"
• box.getAttribute('data-name') → "user"
• box.getAttribute('title') → "Hello"
• box.getAttribute('class') → "active"（注意：不是 className）

不读取 JS 动态修改后的 HTML 属性值

如果用 JS 改了属性，但没调用 setAttribute，getAttribute 不会反映变化：

立即学习“Java免费学习笔记（深入）”；

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

box.id = 'new-box';
console.log(box.getAttribute('id')); // 仍输出 "box"，不是 "new-box"

这是因为 id 是 DOM 属性，赋值操作只改了 DOM 属性，没更新 HTML 属性。要让 getAttribute 生效，必须用：

box.setAttribute('id', 'new-box');
console.log(box.getAttribute('id')); // → "new-box"

区分 getAttribute 和直接访问 DOM 属性

有些属性有“HTML 属性”和“DOM 属性”两套表现，行为不同：

• value：<input value="init"> → getAttribute('value') 始终返回 "init"；而 input.value 返回用户输入后的实时值
• checked：<input type="checkbox" checked> → getAttribute('checked') 返回 "" 或 "checked"（取决于写法）；input.checked 返回布尔值 true/false
• style：getAttribute('style') 返回内联 style 字符串（如 "color:red"）；element.style.color 返回解析后、可读写的 CSSStyleDeclaration 属性

对布尔属性和自定义属性的处理

HTML 布尔属性（如 disabled、required）只要存在就为真，值无关紧要：

<button disabled>Click</button>
<button disabled="false">Click</button>

两者调用 getAttribute('disabled') 都返回 ""（空字符串），不是 "false"。判断是否启用应优先用：

• button.hasAttribute('disabled')（更语义）
• button.disabled（更直观，返回布尔值）

自定义属性（data-*）推荐用 dataset（如 el.dataset.name），但它和 getAttribute('data-name') 效果一致，只是写法更简洁。