最稳妥做法是直接检查返回值是否为 null 或 undefined；DOM 查询方法返回值需区分处理，推荐用可选链（?.）或显式判空，注意 NodeList/HTMLCollection 的“空”指 length 为 0，且须确保 DOM 已加载。
直接检查返回值是否为 null 或 undefined，是最稳妥的做法。DOM 查询方法（如 querySelector、getElementById）在找不到匹配元素时，多数返回 null，少数（如 getElementsByClassName）返回空的类数组对象，需区别对待。
用逻辑判断提前拦截 null
几乎所有“单元素”查询方法（querySelector、getElementById、querySelectorAll 返回的 NodeList 虽非 null，但长度可能为 0）都可能“查不到”。推荐用可选链（?.）或显式判断：
-
✅ 推荐：用可选链 + 空值合并
const el = document.querySelector('#my-btn')?.textContent ?? '默认文案'; -
✅ 安全调用方法前先判空
const btn = document.getElementById('submit');<br>if (btn) btn.addEventListener('click', handler); -
❌ 避免直接链式调用
document.querySelector('.nav').classList.add('active'); // 报错：Cannot read property 'classList' of null
区分 NodeList 和 HTMLCollection 的“空”含义
querySelectorAll 总是返回 NodeList（即使无匹配项，也是长度为 0 的对象），而 getElementsByClassName 返回 HTMLCollection（也永远不为 null）。它们的“空”体现为 .length === 0，不是 null：
- ✅ 正确检查：
const items = document.querySelectorAll('.item');<br>if (items.length > 0) { items[0].style.color = 'red'; } - ✅ 可用展开语法转数组后处理：
[...document.querySelectorAll('.btn')].forEach(btn => btn.disabled = true);（自动跳过空情况）
封装一个带 fallback 的安全查询函数
如果项目中频繁查询且常需默认行为，可以封装一层：
立即学习“Java免费学习笔记（深入）”；
function safeQuery(selector, root = document, fallback = null) {<br> const el = root.querySelector(selector);<br> return el ?? fallback;<br>}- 使用：
const header = safeQuery('header', document, document.createElement('header')); - 进阶可支持返回默认元素、抛出自定义错误、或自动创建占位节点。
注意时机：DOM 是否已加载？
很多“查到 null”其实是因为脚本执行太早，DOM 还没解析完。确保代码在 DOM 就绪后运行：
- ✅ 放在
<script defer>中 - ✅ 使用
DOMContentLoaded事件：document.addEventListener('DOMContentLoaded', () => { /* 查询 */ }); - ✅ 或把 script 标签放在
</body>前
