如何用纯JavaScript检查DOM类名存在性并编写条件判断语句

刚好这两个问题都是前端DOM操作里的高频需求，我来一步步给你讲清楚：

这里有几种实用的方法，根据浏览器兼容性需求选择就行：

• 现代浏览器首选：Element.classList.contains()
  这是目前最推荐的方式，语义化强、写法简洁，所有现代浏览器（包括IE10及以上）都支持。核心逻辑是先获取目标DOM元素，再调用这个方法传入要检查的类名，它会返回一个布尔值（存在为true，不存在为false）。
  示例代码：

  // 先获取目标元素（也可以用querySelector等其他选择器）
  const targetEl = document.getElementById('example-element');
  // 检查"active"类是否存在
  const hasActiveClass = targetEl.classList.contains('active');
  console.log(hasActiveClass); // 控制台输出true或false
  

• 兼容旧浏览器的备选方案
  如果要兼容IE9及更早版本，可以借助element.className属性来判断：

  const targetEl = document.getElementById('example-element');
  // 方法1：用indexOf判断（兼容所有浏览器）
  const hasActiveClass = targetEl.className.indexOf('active') !== -1;
  // 方法2：正则匹配（避免误判类似类名，比如"active-item"）
  const hasActiveClass = new RegExp('(^|\\s)active(\\s|$)').test(targetEl.className);
  

接下来把类名检查和条件逻辑结合，实现你需要的“类名存在就禁用id为btnNxt的按钮”需求，直接上完整可复用的代码：

// 1. 获取需要操作的两个元素
const checkElement = document.getElementById('your-check-element'); // 要检查类名的元素
const nextBtn = document.getElementById('btnNxt'); // 要禁用的按钮

// 2. 检查类名并执行逻辑
if (checkElement.classList.contains('target-class')) {
  // 类名存在时禁用按钮，这里有两种写法都可行
  nextBtn.disabled = true; // 更推荐的写法，直接操作DOM元素的布尔属性
  // nextBtn.setAttribute('disabled', true); // 你提到的写法也能生效
} else {
  // 可选：类名不存在时恢复按钮可用（根据业务需求调整）
  nextBtn.disabled = false;
}

补充说明：nextBtn.disabled = true比setAttribute更直接，因为disabled是DOM元素的原生布尔属性，直接赋值的方式在各种场景下更稳定，不容易出现属性残留的问题。

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