解决getElementById返回null时调用querySelector触发的控制台错误

错误原因 #

你遇到的错误本质是链式调用的前置元素不存在：当document.getElementById(a)找不到对应元素时会返回null，而你直接在null上调用querySelector(b)，这会触发TypeError——因为null不是DOM元素，没有querySelector方法。你的条件判断写在赋值之后，但错误发生在赋值的瞬间，所以判断逻辑根本没机会执行。

规避方法与更优实现 #

方法1：分步检查或使用可选链 #

先确认父元素存在，再执行后续选择：

// 分步检查写法
let parent = document.getElementById(a);
let target;
if (parent) {
  target = parent.querySelector(b);
}

if (target) {
  // 这里写你的业务逻辑
}

或者用ES6+的可选链操作符简化，它会自动处理null/undefined的情况，避免报错：

let target = document.getElementById(a)?.querySelector(b);

if (target) {
  // 这里写你的业务逻辑
}

方法2：直接使用复合选择器 #

如果你的需求是查找id为a的元素下匹配b的子元素，完全可以用单个querySelector完成，不需要拆分调用：

let target = document.querySelector(`#${a} ${b}`);

if (target) {
  // 这里写你的业务逻辑
}

这种写法下，如果id为a的元素不存在，querySelector会直接返回null，不会抛出错误，后续的条件判断可以正常执行。

内容的提问来源于stack exchange，提问作者slackbinhead