JS读取和修改HTML全局属性应优先直接操作DOM属性：id、className、title、lang、hidden等可直赋值，class需用className（非class），hidden等布尔属性设true/false，data-*须用dataset或getAttribute/setAttribute。
怎么用 JS 读取和改写 HTML 元素的全局属性（如 id、class、title）
全局属性（id、class、title、lang、hidden 等）可直接通过 DOM 元素对象的对应属性访问或赋值，无需走 getAttribute/setAttribute 流程——这是最简、最稳的方式。
比如：document.getElementById("btn").id = "newBtn" 会立刻更新 DOM 中的 id 属性，并同步影响 CSS 选择器和 getElementById 查找结果；element.className = "active warning" 会完整替换 class 列表；element.title = "点击查看详情" 会实时生效为鼠标悬停提示。
注意点：
-
class对应的是className属性（不是class），这是历史遗留命名，别写成element.class = "..."—— 会静默失败 -
hidden是布尔属性，设为true或false即可，不用传字符串"true" -
contenteditable同样是布尔属性，但需用element.contentEditable = "true"（注意大小写和字符串值），因为它的 DOM 属性名是contentEditable，且接受字符串"true"/"false"/"plaintext-only"
data-* 自定义属性必须用 dataset 或 getAttribute/setAttribute
像 data-user-id、data-status 这类以 data- 开头的属性，不能直接用 element.dataUserId 访问——DOM 不会自动映射为驼峰属性。必须走标准化接口。
立即学习“前端免费学习笔记（深入）”；
推荐优先用 dataset：
- 读取：
element.dataset.userId→ 对应 HTML 中的data-user-id - 写入：
element.dataset.status = "loaded"→ 自动转成data-status="loaded" - 删除：
delete element.dataset.userId
如果需要兼容老浏览器（IE10 及以下），或要处理含非法字符的 key（如 data-foo.bar），就退回 getAttribute/setAttribute：
element.getAttribute("data-user-id")element.setAttribute("data-timestamp", Date.now().toString())
修改 href、src、value 等“反射属性”要区分语义和实际值
某些属性（如 href、src、value、checked）在 DOM 元素上存在“反射行为”：它们既是 HTML 属性，又是 JS 属性，但含义不同。
例如：
-
element.href返回**解析后的绝对 URL**（即使 HTML 写的是相对路径href="page.html"，JS 读出来也是https://site.com/page.html） - 想读原始 HTML 值，得用
element.getAttribute("href") -
input.value反映的是**当前用户输入值**，而input.getAttribute("value")只读取初始声明值（HTML 中写的value="default"） - 所以动态改用户可见值，永远用
input.value = "new"；想重置回初始值，才用input.setAttribute("value", "new")再触发一次 reset 行为
为什么 setAttribute 有时不生效？常见陷阱
setAttribute 看似万能，但它对部分属性有“无效覆盖”问题：比如你调用 el.setAttribute("disabled", "false")，元素依然禁用——因为 disabled 是布尔属性，只要存在即生效，值是什么无关紧要。
正确做法是：
- 启用：
el.removeAttribute("disabled")或el.disabled = false - 禁用：
el.setAttribute("disabled", "")或el.disabled = true - 同理适用于
checked、selected、readonly等
另一个坑：用 setAttribute 改 style 会完全覆盖内联样式，而 el.style.color = "red" 是增量式修改，更安全可控。
真正容易被忽略的，是属性修改的**时机与副作用**：比如改了 src 触发图片加载、改了 href 影响 a 标签的跳转逻辑、改了 hidden 会立即触发重排——这些都不是纯数据操作，而是真实 DOM 变更，得按需节流或兜底处理加载状态。
