JavaScript判断DOM元素不包含指定类名的实现方法

核心改法 #

不需要重写原有检测逻辑，只要在原有类名判断的表达式前加逻辑非运算符!，就能直接反转判断结果，匹配“不包含类名才触发”的需求，修改后的可用代码：

// 当.header元素不带有no-sticky类名时，才会执行alert
if (!document.querySelector(".header").classList.contains("no-sticky")) {
  alert();
}

健壮性优化 #

如果页面不存在.header元素，直接调用classList会抛出空指针错误，可以提前做元素存在性校验，避免运行报错：

const headerEl = document.querySelector(".header");
// 同时满足「元素真实存在」「不携带目标类名」两个条件时，再触发后续操作
if (headerEl && !headerEl.classList.contains("no-sticky")) {
  alert();
}

踩坑提醒：逻辑非!一定要放在整个类名判断表达式的外层，不能错把!写到类名字符串前面，否则会得到完全相反的错误判断结果。

内容的提问来源于stack exchange，提问作者mike jet