getAttribute和setAttribute操作HTML属性而非DOM属性：前者读取源码中声明的字符串值（如data-*、disabled返回"disabled"或null），后者以字符串写入并触发HTML更新，但不自动同步JS属性（如input.value实时值需直接访问）。
Element.getAttribute 和 setAttribute 是操作 HTML 元素自定义与标准属性的核心方法，它们不直接修改元素的 JavaScript 属性（如 element.id），而是读写 HTML 标签中实际存在的属性字符串。理解这一点，是避免“改了没反应”或“读不到值”的关键。
getAttribute：精准读取 HTML 中声明的属性值
它只返回元素在 HTML 源码或通过 setAttribute 显式设置过的属性值，不会反映 JS 属性的实时变化。
- 读取内置属性（如
id、class、src）时，返回字符串，哪怕该属性在 DOM 中为空或未设置，也返回null - 读取布尔属性（如
disabled、checked）时，只要标签里写了<button disabled>，就返回"disabled"（不是true）；若没写，返回null - 读取自定义属性（
data-开头）最常用，比如data-user-id="1024"→el.getAttribute('data-user-id')返回"1024"
setAttribute：安全写入，触发 HTML 层面更新
它把值作为字符串写入 HTML 属性，会同步更新渲染（如 src 变更触发图片重载），但不会自动同步到 JS 属性对象上。
- 设置
class用setAttribute('class', 'btn btn-primary')，但推荐用element.classList更安全 - 设置
style不建议用setAttribute('style', 'color:red;')，应优先用element.style.color = 'red'，避免覆盖已有内联样式 - 设置自定义属性首选
data-，语义清晰且不会干扰标准行为：el.setAttribute('data-status', 'loading')
实战注意：getAttribute/setAttribute ≠ JS 属性访问
例如：<input value="初始">
-
el.value返回用户输入后的最新值（JS 属性） -
el.getAttribute('value')始终返回 HTML 初始写的"初始"，不会随输入改变 -
el.setAttribute('value', '新值')会把 HTML 属性改成"新值"，同时也会更新显示值（对value这类反射属性有副作用），但后续用户输入仍会覆盖它
配合 data-* 属性做状态管理的小技巧
在无框架场景下，用 data- 存临时状态很轻量：
- 点击按钮前存 ID：
btn.setAttribute('data-pending-id', 'abc123') - 请求回来后读取并清理：
const id = btn.getAttribute('data-pending-id'); btn.removeAttribute('data-pending-id'); - 用 CSS 选中器联动：
[data-status="loading"] { opacity: 0.6; }，HTML 层和样式层自然响应
