使用可选链（optional chaining）做DOM元素空值检查是否为良好实践？

结论先行 #

在你已经确认项目对可选链语法的兼容性达标（要么目标浏览器全部支持ES2020，要么有Babel/TypeScript做转译降级）的前提下，你写的可选链写法完全属于良好的开发实践，完全可以放心用。

具体原因 #

• 两种写法的语义和运行效果100%等价：document.querySelector('.foo') 找不到元素时返回null，if(el)判断不通过就不会执行后续操作，可选链?.也会触发短路逻辑直接终止后续属性访问和方法调用。你提到的"静默失败"是业务逻辑本身决定的，和用哪种写法没有关系——如果你需要处理元素不存在的场景（比如打错误日志、执行降级逻辑），两种写法都得额外加对应分支；要是不需要处理不存在的场景，可选链的优势非常明显。
• 可选链写法更简洁易读：不需要额外声明无用的临时变量，也不会增加额外的缩进层级，尤其是遇到多层链式访问的场景，优势会被放大很多。比如你要写document.querySelector('.foo')?.parentElement?.querySelector('.child')?.classList.add('bar')，换成if判断的写法要写三四层嵌套，反而更难读，还容易漏判断出错。
• 没有额外的变量污染：if写法中声明的el变量会留在当前作用域，哪怕你后面再也用不到它，可选链完全不存在这个问题。

唯一需要替换成if判断的场景 #

当你需要对「元素不存在」的情况做额外处理的时候，就应该用if块的写法，比如：

const el = document.querySelector('.foo');
if (el) {
  el.classList.add('bar');
} else {
  console.warn('未找到.foo元素，未添加bar样式');
  // 其他降级逻辑
}

这种情况下写if块逻辑更清晰，也更容易加额外的分支处理。

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