document.querySelector 返回 null 的主因是执行时机过早，即目标元素尚未加载进 DOM；应将脚本移至 </body> 前、监听 DOMContentLoaded 事件、框架中等待挂载完成、处理特殊字符转义，并核对开发者工具中实际渲染的 DOM 结构。
document.querySelector 返回 null 怎么办
不是 selector 写错了，而是目标元素根本还没出现在 DOM 里。浏览器解析 HTML 是线性的，script 执行时若 querySelector 对应的标签尚未被解析到，结果必然是 null。
- 检查脚本是否放在
<head>里且没加defer或async→ 改成放在</body>前，或监听DOMContentLoaded - 元素由 React/Vue/Angular 等框架动态渲染 → 不能只等 DOM 加载完，得等框架挂载完成，比如监听
vueApp.mounted或用MutationObserver监控特定节点出现 - ID 或 class 含特殊字符（如
.、:、[）→ 必须转义：document.querySelector('#user\.name')，注意 JS 字符串里要双反斜杠
HTML 解析后结构和源码对不上
浏览器会自动修复严重语法错误，比如未闭合的 <p>、错嵌套的 <div> 里塞 <p>，但修复逻辑不透明，导致你写的 selector 找不到预期节点。
- 打开开发者工具的
Elements面板，看实际渲染出的 DOM 树，而不是源码 —— 它才是querySelector真正匹配的对象 - 常见“隐形修复”：
<p><div>xxx</div></p>会被拆成<p></p><div>xxx</div><p></p>，p里根本没内容 - 用 W3C Validator（validator.w3.org）粘贴源码，它会标出所有结构问题，比如
End tag div does not match the start tag p
Gumbo-Parser 报 GUMBO_ERR_UNCLOSED_TAG 怎么修
这个错误比浏览器宽容得多，它不修复、不猜测，直接报错并停在出问题那一行。适合做预检，但容易误判“合法但松散”的 HTML。
-
GUMBO_ERR_UNCLOSED_TAG多见于手写模板或 CMS 输出的 HTML，比如漏了</li>、</td>，或自闭合标签写成<br>（没斜杠） - 别硬改源码去补闭合标签 —— 先确认是不是故意省略（HTML5 允许部分标签省略闭合，如
<li>、<dt>），Gumbo 默认严格模式，需显式启用宽松解析 - 用
examples/prettyprint.cc工具格式化原始 HTML，能快速暴露缩进错乱、标签断裂的位置
服务端返回 HTML 片段解析失败
后端吐出的 HTML 可能缺 <html>、<body>，甚至只是个 <div>...，直接丢给 DOMParser 或 innerHTML 会导致解析上下文丢失，querySelector 行为异常。
立即学习“前端免费学习笔记（深入）”；
- 用
DOMParser时必须指定类型：new DOMParser().parseFromString(html, 'text/html')，否则可能按 XML 解析 - 插入到页面前，先 wrap 一层标准结构：
const wrapper = document.createElement('div'); wrapper.innerHTML = fragment;，再从wrapper上查 - 如果 fragment 含
<script>，innerHTML不执行它；要用document.adoptNode或手动eval（不推荐）
GUMBO_ERR_*。定位时得明确：你在为什么环境调试？是人眼所见，还是机器解析？这点一模糊，排查方向就全偏了。 
