Javascript DOM .querySelector() null 问题

我正在用纯 JavaScript 编写代码，有很多场景我会使用querySelector()方法，我多次遇到问题，比如

对于以下代码，“未捕获类型错误：无法读取 null 的属性‘classList’”，

document.querySelector('.tab.active').classList.remove('active');

/** 选项卡当时不可用**/

在 Jquery 中$('.tab.active').removeClass('active');仅当元素可用且不会引发错误时才会运行。

我想在 JavaScript 中实现类似的行为。请提供您的想法。

我不愿意为我所做的每一个DOM操作都写三行代码，寻找像Jquery这样的一行代码。

var activeTab = document.querySelector('.tab.active');
if(activeTab !== 'null' ){
    activeTab.classList.remove('active'); 
}

正如您最初所做的那样，显式检查代码中元素是否存在无疑是您可以做到的最清晰的方法，但如果您真的不想这样做，您可以创建自己的函数，如果没有找到元素，返回一个对象，其方法不执行任何操作。例如：

const customQS = selector => (
  document.querySelector(selector)
  || {
    classList: {
      remove: () => void 0
    }
  }
);

customQS('.tab.active').classList.remove('active');
console.log('done, no error');

当然，使用该方法，您必须为要使用的每个 DOM 方法创建属性。一个更稳健的选择是实际创造一个元素并返回它，这会更昂贵，但该元素将立即被垃圾收集：

const customQS = selector => (
  document.querySelector(selector)
  || document.createElement('div')
);

customQS('.tab.active').classList.remove('active');
console.log('done, no error');