document.getelementbyid快因浏览器哈希索引（o(1)），但id重复时只返回首个元素，导致js绑定、锚点跳转、无障碍访问等静默失效，必须确保id全局唯一、合法且dom已加载。
HTML全局属性在JS中不是“写了就能用”，很多看似合法的写法，实际根本取不到值、改不了行为，甚至引发静默失效或安全问题。
document.getElementById 为什么快，但一用就错
浏览器对 id 做了哈希索引，document.getElementById("x") 是 O(1) 查找——但这只在 id 真唯一时成立。一旦页面里出现两个 id="save-btn"，它永远只返回第一个，后续 JS 绑定、无障碍跳转、锚点滚动全指向错误目标。
- 重复
id不报错，控制台只警告：Found 2 elements with non-unique id #save-btn - CSS 中
#save-btn { display: none }可能只作用于第一个（不同浏览器行为不一致） - 动态渲染场景（如循环生成表单）必须用
crypto.randomUUID()或带业务前缀的计数器，比如id="account-save-7f2a" - 100 个商品卡片？别写 100 个
id="add-to-cart-1"… 改用class="js-add-to-cart"+data-product-id="123"，事件委托一次搞定
dataset.xxx 读不到值？先看命名和解析规则
data-user-id="123" 写对了，JS 却拿不到 dataset.userId？不是浏览器 bug，是命名或访问方式踩了硬性规范。
- 连字符自动转驼峰：
data-user-id→dataset.userId，不是dataset.userid或dataset.Userid - 数字开头的 key 必须用方括号：
data-1st-place="gold"→ 只能写dataset["1st-place"]，dataset.1stPlace是语法错误 - 属性名含大写字母（如
data-API-Key）或下划线（data_user_id）会被浏览器静默忽略 -
dataset只读取初始 HTML 中的值；JS 后续调el.setAttribute("data-id", "500")，dataset.id可能仍缓存旧值，此时应统一用el.getAttribute("data-id")
contenteditable + tabindex 缺一不可
只写 contenteditable="true"，元素无法键盘聚焦、Tab 进不去、WCAG 2.1.1 直接失败——这不是兼容性问题，是规范强制要求。
-
tabindex缺失 = 键盘不可达；tabindex="-1"只支持 JS 主动focus()，不进自然 tab 流 -
tabindex="5"会强行前置焦点顺序，破坏屏幕阅读器阅读流，WCAG 明确不推荐 - 子元素若带
user-select: none或pointer-events: none，光标定位直接失败 - 正确最小单元：
<div contenteditable="true" tabindex="0" spellcheck="false">编辑区</div>
id 和 name 自动挂载为 window 全局变量，是隐患不是特性
写个 <input id="alert">，页面一加载，window.alert 就被覆盖成那个 DOM 元素——后面任何地方调 alert("x") 都可能出错甚至执行 XSS。
- 所有含
id或name的标签（<form></form>、<iframe></iframe>、<button></button>）都参与自动挂载 - 服务端渲染时，对用户输入的
id/name加前缀（如user_f8a2b），避免撞上location、history、open等敏感名 - 前端动态插入时，别拼
innerHTML，改用document.createElement()+setAttribute("id", userInput) - 禁用
document.write()，它会触发二次解析，放大挂载风险
真正难的不是记住哪条规则，而是每次加 id、data-、contenteditable 之前，先问一句：这个值是否只服务于初始化？它会不会被框架误读？它会不会污染全局？浏览器不会替你判断意图，只按字面执行规范。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
