querySelector 返回 null 的常见原因包括元素未加载、不在当前作用域或无匹配项，应对方式有移脚本至</body>前、监听DOMContentLoaded、等待框架挂载、处理Shadow DOM和iframe等。
querySelector 返回 null 的常见原因和应对方式
多数时候不是选择器写错了，而是元素还没加载完、不在当前作用域，或者压根没匹配上。它只返回第一个存在的匹配节点，找不到就直接 null —— 不报错，但后续调用 .innerText 或 .addEventListener 会立刻崩。
- 脚本放在
<head>里？赶紧挪到</body>前，或包进document.addEventListener('DOMContentLoaded', ...) - 目标是 Vue/React 渲染后插入的？得等框架完成挂载，比如监听
Vue.nextTick或用MutationObserver监听 DOM 变化 - 元素在 Shadow DOM 里？先拿到
shadowRoot，再在其上调用querySelector，不能直接从document查 - 跨
<iframe>？要用iframe.contentDocument.querySelector(...)，且确保 iframe 已加载完成（检查iframe.contentDocument.readyState === 'complete'）
querySelectorAll 返回的 NodeList 不支持 forEach 怎么办
querySelectorAll 返回的是 NodeList，不是 Array，所以不能直接链式调用 .forEach() 或 .map() —— 这是新手最常踩的坑。它也不是实时集合（live collection），DOM 后续增删不会自动更新这个列表。
- 转成数组：用
[...document.querySelectorAll('.btn')]或Array.from(document.querySelectorAll('.btn')) - 用
for...of遍历：更轻量，不用构造新数组，for (const btn of document.querySelectorAll('.btn')) { btn.disabled = true; } - 别误以为它能链式调用方法：
document.querySelectorAll('.item').forEach(...)→ 报错TypeError: xxx.forEach is not a function - 要实时响应 DOM 变化？改用
document.getElementsByClassName或document.getElementsByTagName，它们返回的是 HTMLCollection（实时集合）
选择器写法差异导致结果完全不同
空格、点、井号、中括号这些符号稍一错位，选中的就不是你要的那个元素。浏览器不报语法错，但结果可能完全偏离预期。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
'div .item'是后代选择器（div 里面任意层级的 .item）；'div.item'是 class 为 item 的 div 元素 -
'[data-id="123"]'要加引号，属性值含特殊字符时必须用双引号包裹；[data-id=123]在某些情况下也能工作，但不保险 -
'.a.b'匹配同时有 a 和 b 两个 class 的元素；'.a, .b'匹配有 a 或有 b 的任意一个元素（返回第一个匹配项） - 伪元素如
::before不能被选中——它们根本不在 DOM 树里，querySelector(':hover')也无效，因为 :hover 是状态，不是静态结构
性能和兼容性需要注意的实际边界
虽然 IE8+ 就支持，但某些高级选择器在旧环境里会直接抛 SyntaxError，而且深层嵌套或大量匹配对性能有隐性影响。
立即学习“前端免费学习笔记（深入）”；
-
:nth-child(2n+1)、:is()、:where()在 IE 完全不支持，移动端 Android 4.4 WebView 也不认:has() - 避免在循环里反复调用
querySelector，比如for (let i = 0; i → 改成一次性查出父容器，再用 <code>.querySelector在其内部查 - 复杂选择器如
'body > div:nth-of-type(3) section[id^="main"] .content > p:first-child'解析成本高，可读性差，建议拆解或加明确 class 标识 - 动态生成的选择器字符串（比如拼接变量）务必校验合法性，否则
querySelector('div.' + className)中className为空或含空格会直接抛异常
document.querySelector('#save-btn') 看似简单，背后依赖的是 DOM 就绪时机、作用域隔离、选择器语义准确性、以及返回值是否为 null 的防御性判断——少一个环节，就可能在某个用户环境下静默失败。 
