Javascript DOM .querySelector() 空问题

Question

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

“Uncaught TypeError: Cannot read property 'classList' of null” 以下代码，

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

/** Tab 暂时不可用**/

在 Jquery 中，$('.tab.active').removeClass('active'); 只有在元素可用且不抛出错误时才会运行。

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

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

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

Answer 1

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

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');