document.getElementById() 是最直接、高效且兼容性最强的按 ID 获取元素方法，返回首个匹配元素或 null，要求 ID 全局唯一、不带 #、严格区分大小写，并需校验返回值以避免运行时错误。
用 document.getElementById() 获取元素最直接
这是最常用、性能最好、兼容性最强的方式，适用于所有现代浏览器和 IE6+。它只返回一个元素（匹配第一个），如果 ID 不存在就返回 null，不会报错。
- ID 必须全局唯一，否则行为不可靠（浏览器通常只返回第一个）
- 传入的字符串不能带
#符号，比如getElementById("header")✅，不是getElementById("#header")❌ - 注意大小写：HTML 中 ID 不区分大小写，但 DOM 方法严格区分，
getElementById("MyId")找不到myid - 如果页面还没加载完就调用，可能取到
null—— 确保脚本放在</body>前，或监听DOMContentLoaded
为什么不用 querySelector() 替代？
querySelector("#my-id") 功能上也能拿到元素，但它本质是 CSS 选择器引擎，比 getElementById() 慢，且在旧版 IE（IE7 及以下）不支持。
- 仅当需要统一用选择器风格（比如同时处理 class、data-*、伪类等）时才考虑
querySelector - 如果只是按 ID 查找，
getElementById()是更轻量、更语义明确的选择 -
querySelector返回null（没匹配时），和getElementById一致；但querySelectorAll()返回空 NodeList，不是null，容易误判
获取后怎么安全操作？必须先检查是否为 null
很多运行时错误（如 Cannot read property 'xxx' of null）都源于没校验返回值。哪怕你确定 ID 存在，也要防手误或动态 DOM 变化。
const el = document.getElementById("user-name");
if (el) {
el.textContent = "Alice";
el.classList.add("active");
} else {
console.warn("Element with ID 'user-name' not found");
}
- 不要直接链式调用：
document.getElementById("x").innerHTML = "y"—— 一旦 ID 错了就报错中断 - ES2020+ 可用可选链：
document.getElementById("x")?.textContent = "y"，但低版本浏览器不支持 - 服务端渲染（SSR）或微前端场景中，DOM 可能尚未挂载，
null更常见
ID 包含特殊字符时怎么处理？
HTML 允许 ID 以数字开头或含点、冒号等（如 id="123.item:main"），但这些会破坏 querySelector() 的解析，而 getElementById() 完全不受影响。
立即学习“Java免费学习笔记（深入）”；
- 这种 ID 在 CSS 中要用转义写法（如
\31 23\.item\:main），很麻烦 -
getElementById("123.item:main")✅ 直接可用 - 所以，如果必须用特殊字符 ID，坚持用
getElementById()，别碰querySelector
getElementById() 就是最稳的第一步。 
