JavaScript DOM .querySelector() 空值问题

Question

我正在使用纯JavaScript编写代码，在很多场景下我会使用querySelector()方法，但我遇到了多次问题，例如以下代码会出现"Uncaught TypeError: Cannot read property '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'); 
}

- Jayamurugan

---

var el = document.querySelector(....); if (el) el.classList.remove('fdsafds'); - Tushar

这就是jQuery在幕后所做的，它将null结果转换为一个空的jQuery对象。如果您不想使用jQuery，那么您也需要这样做。 - Racil Hilan

您可以使用三元运算符来实现单行解决方案。 document.querySelector('.tab.active')=='null ? document.querySelector('.tab.active').classList.remove('active') : ''; - Yousaf Hassan

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

- CertainPerformance

---

你能否更加通用一些，不要仅限于“classList”属性？ - Jayamurugan

你要么每次都要实际创建一个元素，要么创建一个包含所有可能属性（和它们的方法）的对象来访问。 - CertainPerformance