queryselector找id返回null的主因是执行过早或选择器错误：脚本需在dom加载后运行，且id选择器必须带#号，特殊字符需转义或用属性选择器。
用 querySelector 找 ID 元素却返回 null，不是代码“坏了”，而是它严格按规则办事——没匹配到，就老实交出 null。最常见、最隐蔽的原因就两个：**脚本执行太早，DOM 还没画出来；或者选择器写错了，比如漏了 #。**
执行时机不对：DOM 还没加载完就动手找
浏览器是边解析 HTML 边执行 JS 的。如果你把 querySelector('#my-btn') 写在 里，或放在目标元素上方，那 JS 运行时，那个按钮根本还不存在于 DOM 树中。
- ✅ 正确做法：把脚本放
前；或包裹在document.addEventListener('DOMContentLoaded', ...)里 - ✅ React/Vue 等框架中，必须等组件挂载完成（如
useEffect(() => { ... }, [])或componentDidMount）再查 - ⚠️ 注意：即使页面看起来“显示出来了”，也不代表 JS 动态插入的内容已就绪——要等渲染完成后再查
选择器写错：ID 必须带 #，不带就是错
querySelector 用的是 CSS 选择器语法，而 getElementById 直接传 ID 字符串。这是新手最容易混淆的点：
- ❌
document.querySelector('my-btn')→ 少了#，它当标签名找，找不到 - ❌
document.querySelector('#my-btn')→ 如果 HTML 中写的是id="my_btn"，大小写或下划线不一致也会失败 - ✅ 记个口诀：“ID 用井号，唯一性像钉子”——只要找 ID，开头必是
#
ID 含特殊字符：点、冒号、空格这些得转义
HTML 允许 ID 以数字开头或含 .:[ 等符号，但 CSS 选择器规范不认。直接写会解析失败：
- ❌
document.querySelector('#user.name')→ 点号被当成类选择器分隔符 - ✅ 正确写法：
document.querySelector('#user\.name')（手动转义） - ✅ 更稳妥：
document.querySelector('[id="user.name"]')（属性选择器，引号不能少） - ✅ 现代方案：
document.querySelector('#' + CSS.escape(id))（CSS.escape自动处理）
其他容易忽略的情况
- 元素在 Shadow DOM 里？得先拿到
shadowRoot，再调用它的querySelector - 元素在 iframe 里？主页面无法跨源访问，需确保同源并用
iframe.contentDocument - 页面有多个相同 ID？HTML 规范要求 ID 唯一，但浏览器不会报错——
querySelector只取第一个，可能不是你想要的那个 - 查的是动态插入的内容？比如用
innerHTML或insertAdjacentHTML加的，得等插入完成再查，不能紧跟着就调用
