我正在我的网站上进行一些 jQuery 到 Vanilla JS 的转换。在 jQuery 中，我可以这样做：

$("#nav-menu>ul>li.active").removeClass("active");

全部在一行中，将从任何拥有它的 <li> 元素中洗掉“活动”类（只有一个）。如果没有 <li> 元素具有该类，则没有错误并且我的脚本继续运行。

但是，在 Vanilla JS 中，如果我这样做：

document.querySelector('#nav-menu>ul>li.active').classList.remove('active');

并且当前没有 'actove' 类的 <li> 元素，我收到以下错误并且我的脚本停止运行：

Uncaught TypeError: Cannot read prperties of null (reading 'classlist')

我可以像这样解决这个问题：

var active = document.querySelector('#nav-menu>ul>li.active');
if(active) {
  active.classList.remove('active');
}

但我想知道是否有更好、更短的方法来做到这一点（即选择一个元素，如果它存在，然后用它做点什么）？有没有一种速记方式或方法可以用更少的行等来完成？

提前致谢。

uj5u.com热心网友回复：

您可以为此目的使用可选链接，仅当左侧的表达式不是未定义或为空时，它才能访问属性或进入链接函式呼叫。

document.querySelector('#nav-menu>ul>li.active')?.classList.remove('active');