id、class、data-是js操作dom最常依赖的三个全局属性；hidden、contenteditable、tabindex直接影响交互行为；getelementbyid仅返回首个同名id元素；dataset是读写data-的正确方式；hidden比display:none更语义化；tabindex=0可接入焦点流，正数会破坏导航顺序。
id、class、data-* 是 JavaScript 操作 DOM 最常依赖的三个全局属性，其他如 hidden、contenteditable、tabindex 则直接影响可交互行为。硬编码样式（style）或事件属性（onclick）不是推荐路径，应交由 JS 逻辑统一控制。
用 getElementById 找元素，但要注意重复 id
浏览器只保证第一个匹配的 id 被 getElementById 返回，后续同名 id 完全被忽略。HTML 规范要求 id 全局唯一，但浏览器不校验——你写十个 id="btn"，document.getElementById('btn') 永远只返回第一个。
- 检查是否真唯一：用
document.querySelectorAll('[id="xxx"]')看返回几个节点 - 命名别用数字开头：
id="1section"合法但 CSS 选择器会失效（#1section不匹配），改用id="section-1" - 大小写敏感：
getElementById('Header')≠getElementById('header')
dataset 是读写 data-* 的唯一正确方式
直接操作 getAttribute('data-user-id') 或 setAttribute 能用，但绕过了驼峰转换规则，且无法自动处理布尔值或空字符串。真正该用的是 element.dataset 对象。
-
data-user-id="123"→el.dataset.userId（连字符转驼峰，首字母小写） -
data-is-active="true"→el.dataset.isActive === 'true'（始终是字符串，不是布尔） -
data-count=""→el.dataset.count === ''，不是undefined - 写入时：
el.dataset.userId = '456'会自动转成data-user-id="456"
hidden 属性比 style.display = 'none' 更语义化
hidden 是布尔属性，设为存在即隐藏，等价于 display: none 且不占布局空间。但它和 CSS 的 display 不互斥——如果同时写了 hidden 和 style="display: block"，hidden 优先级更高。
- 用
el.hidden = true控制，比手动切style更轻量、更可预测 - 注意：它不会触发
transition，因为不是 CSS 属性，动画需配合classList+ CSS 类 -
hidden="until-found"是新值，仅在支持content-visibility: hidden的浏览器生效（Chrome 120+），慎用
tabindex 控制键盘焦点顺序，但别乱设正数
tabindex="-1" 让元素可被脚本聚焦（el.focus()），但不进入自然 tab 流；tabindex="0" 让元素按 DOM 顺序加入 tab 流；tabindex="1" 及以上会打断原有顺序，强制插队——这会严重破坏键盘导航体验。
- 默认可聚焦元素（
<a></a>、<button></button>、<input>）无需设tabindex - 自定义组件（如
div模拟按钮）必须加tabindex="0"并监听Enter/Space - 禁用聚焦用
el.tabIndex = -1，别用tabindex="-1"静态写死，否则 JS 动态启用时得同步删属性
data-* 存业务数据没问题，但别塞大对象或函数；id 命名要收敛，避免散落在 JS 字符串里拼接；hidden 和 tabindex 这类带行为语义的属性，一旦设了就得配套处理对应交互逻辑——它们不是开关，是契约。Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
