document.getElementById()只返回第一个匹配元素，ID必须全局唯一且区分大小写；传入时不可带#前缀，元素未加载或含非法字符会导致返回null，重复ID将引发JS、CSS、锚点跳转及可访问性等多方面静默失效。
ID 定位本质是 DOM 查找，不是“跳转”或“滚动”的同义词；用错场景会导致行为不符合预期。
document.getElementById() 是最直接也最容易误用的 ID 查找方式
它只返回第一个匹配的元素（哪怕页面中意外存在重复 ID），且返回 null 时不会报错，容易埋下静默失败隐患。
- 必须确保 ID 字符串不带
#前缀——传入getElementById("header")，不是getElementById("#header") - ID 区分大小写，
getElementById("MyId")找不到id="myid" - 若元素尚未加载完成（比如脚本放在
<head>中），会返回null；建议包裹在DOMContentLoaded或放在</body>前 - 不支持 CSS 选择器语法，不能写成
getElementById("nav .item")——那是querySelector()的事
锚点链接（#id）触发的是浏览器原生滚动行为，和 JS 获取元素无关
点击 <a href="#section2">跳到第二节</a> 会自动滚动并聚焦，但前提是目标元素存在且有对应 id 属性。这个过程不执行 JS，也不触发事件监听器。
- 如果目标元素
display: none或visibility: hidden，滚动仍会发生，但用户看不到效果 - 若 ID 值含特殊字符（如
.、:、[），需 URL 编码或改用querySelector()+scrollIntoView() - 现代页面常用
scroll-behavior: smooth控制滚动是否平滑，但该样式只对锚点跳转生效，不影响 JS 调用的scrollIntoView()
用 ID 做唯一标识时，重复 ID 会导致不可预测结果
HTML 规范要求 id 全局唯一，但浏览器不会阻止你写两个 id="btn"。此时 getElementById("btn") 只返回第一个，而 querySelectorAll("[id='btn']") 会返回 NodeList —— 这种不一致正是 bug 温床。
- 服务端渲染（SSR）或模板拼接时，容易因循环生成导致 ID 重复，建议用数据索引或随机后缀（如
id="item-123"） - Web Components 中 Shadow DOM 内部的
id不与外部冲突，但getElementById()无法跨 Shadow Root 查找 - 自动化测试脚本依赖 ID 定位时，重复 ID 会让测试随机失败，CI 环境尤其难复现
真正麻烦的不是怎么写 ID，而是怎么保证它在动态渲染、多模块协作、服务端/客户端混合输出时不被悄悄覆盖或复制——这需要构建时检查或运行时校验，而不是靠开发自觉。
