class和hidden是仅有的两个能可靠触发视图更新的全局属性：class变更立即重绘，hidden布尔切换显隐；tabindex影响焦点流，style配合css变量可局部重算；data-*纯字符串容器不响应变更；id、title等不驱动渲染。
HTML全局属性在动态DOM操作中表现差异极大：只有class、hidden、style、tabindex能可靠触发视图更新或行为响应；data-*纯属字符串容器，改了不重绘、不通知、不响应；id和title等只影响查找或辅助技术，完全不驱动渲染。
哪些全局属性改了真能触发重绘或焦点流
class和hidden是仅有的两个浏览器原生支持“属性变更 → 视图同步”的通用全局属性。它们不是数据存储位，而是状态输出开关：
-
class增删会立即触发 CSS 重绘，element.classList.toggle('loading')比element.className += ' loading'更安全，不会重复或留空格 -
hidden是布尔属性：存在即隐藏（等价于display: none），移除即显示；但旧版 Safari 需 fallback：el.hidden = false; el.style.display = '' -
tabindex变更直接影响焦点流：tabindex="0"让元素进入 Tab 序列，tabindex="-1"仅支持.focus()编程聚焦——但必须确保元素已挂载且未被display: none遮挡 -
style本身不是“状态属性”，但配合 CSS 变量时，element.style.setProperty('--color', '#333')只重算该元素及引用变量的子树，比改document.documentElement高效得多
data-* 属性在 JS 动态操作中为什么总出错
data-*只提供初始化传参能力，所有值都是字符串，且 dataset 不响应后续变更。常见翻车点：
-
el.setAttribute('data-count', '42')后，el.dataset.count仍是初始值（如果 HTML 里没写），不是实时映射 -
if (el.dataset.active === true)永远为false，因为dataset.active是字符串"true"，得写el.dataset.active === 'true'或JSON.parse(el.dataset.active) - 动态写入
data-config='{"theme":"dark"}'必须包try/catch，否则JSON.parse()失败直接中断脚本 -
dataset.userId = '500'只是改代理对象，不会真正写入 DOM；要持久化必须用el.setAttribute('data-user-id', '500')
id 和 title 这类“看似全局”的属性到底动不动 DOM
id和title不触发任何重绘或行为响应，只服务于查找和辅助技术：
-
id变更不影响样式或布局，但document.getElementById()只返回第一个匹配项；多个相同id是合法 HTML，但 JS 查找失效，CSS 选择器却仍全部命中 -
title只在鼠标悬停时可能显示提示，移动端 Safari 完全不支持，屏幕阅读器默认忽略；把它当 tooltip 控制逻辑会彻底失灵 -
lang和dir只影响文本方向与语言相关样式（如:lang(ar)），不改变 DOM 结构或触发重排 - 这些属性可读可写，但改了等于没改 UI——你不能靠
el.title = 'loading...'来驱动加载状态
动态操作中容易被忽略的兼容性断点
不是所有浏览器对同一属性的反应一致，尤其在旧环境或特殊上下文中：
-
hidden在 Chrome 122+/Firefox 125+ 才稳定支持，IE11 和旧 Safari 必须降级到style.display = 'none' -
dataset在 IE11 支持，但data-MyKey会被转成mykey（全小写），不是myKey，驼峰规则不一致 -
contenteditable在<script></script>或<meta>上无效；父级设contenteditable="false"会静默锁死所有子元素，哪怕子元素显式写了true -
tabindex="-1"在 Safari 中对focus({preventScroll: true})不支持，传对象参数会静默失效，得先检测'preventScroll' in FocusOptions.prototype
最常被低估的点是：全局属性没有统一的行为契约。每个属性的“动态有效性”必须单独验证，不能凭名字推断——data-看着像数据通道，实则是只读字符串管道；hidden看着像样式控制，却是唯一跨浏览器的布尔状态出口。写代码前，先查它在目标环境里到底“动不动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
