时间戳

首页 > 解决方案 > Javascript DOM .querySelector() 空问题

javascript - Javascript DOM .querySelector() 空问题

问题描述

我正在用纯 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'); 
}

标签： javascript

解决方案

像您最初所做的那样明确检查代码中元素的存在肯定是您可以做到的最清晰的方法，但如果您真的不想这样做，您可以创建自己的函数，如果没有找到元素, 返回一个对象，其方法不做任何事情。例如：

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

推荐阅读