Question

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

“未捕获的TypeError：无法读取属性'classList'of null”以获取以下代码，

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

Answer 1

当你正在做的时候明确地检查代码中是否存在元素肯定是你能做到的最清晰的方式，但如果你真的不想这样做，你可以创建自己的函数，如果没有找到element，返回一个没有做任何事情的方法的对象。例如：

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

Javascript DOM .querySelector（）null问题

1 个答案: