JavaScript closest()如何匹配两类选择器的最近祖先模态框

原生JS场景下使用.closest()方法向上查找指定类名的模态框容器，实现点击按钮关闭模态框的功能，原单类名匹配逻辑运行正常。现在需要同时适配.modal-a、.modal-b两类模态框，匹配距离关闭按钮最近的容器执行关闭操作。

对应HTML结构：

<div class="modal-a">
 <div class="modal__header">
   <button class="btn" data-close-btn>close</button>
 </div>
  
</div>

<div class="modal-b">
  <button class="btn" data-close-btn>close</button>
</div>

原单模态框可运行代码：

const closeBtn = document.querySelectorAll('[data-close-btn]');

closeBtn.forEach(button => {
  const modal = button.closest('.modal-a'); // 单类名时运行正常
  button.addEventListener('click', (e)=> closeModal(modal));
});


function closeModal(modal) {
  modal.classList.remove('active');
}

为适配两类模态框，尝试了两种写法均出现问题：首次执行失败，点击时控制台持续抛出错误。尝试的写法如下：

const modal = button.closest('.modal-a') || button.closest('.modal-b');
const modal = button.closest('.modal-a, .modal-b');

报错和.closest()的多选择器用法无关，来自3个代码写法错误：

• 选择器调用错误：代码中querySelectorAll(['data-close-btn])缺少document调用前缀，属性选择器格式错误（正确属性选择器格式为[data-close-btn]，原代码漏写开头方括号、多余数组包裹、字符串未闭合），会直接导致选择元素失败。
• 类名操作错误：classList.remove('.active')中传入的类名不需要带.前缀，带点会匹配类名本身包含.的元素，永远无法命中目标类。
• 空值兜底缺失：如果关闭按钮不在两类模态框容器内，.closest()会返回null，直接调用null的方法会抛出空引用错误。

实际上.closest()原生支持逗号分隔的选择器组参数，button.closest('.modal-a, .modal-b')的写法完全符合规范，修正上述错误即可正常运行。

修正后完整代码：

// 正确获取所有关闭按钮
const closeBtns = document.querySelectorAll('[data-close-btn]');

closeBtns.forEach(button => {
  button.addEventListener('click', () => {
    // 匹配最近的任意一类模态框
    const modal = button.closest('.modal-a, .modal-b');
    // 空值判断，避免找不到模态框时报错
    if (modal) {
      closeModal(modal);
    }
  });
});

function closeModal(modal) {
  // 移除类名时不加点前缀
  modal.classList.remove('active');
}

补充：button.closest('.modal-a') || button.closest('.modal-b')的写法逻辑上也完全成立，和多选择器写法效果一致，仅多一次DOM遍历，性能差异可忽略，使用时同样需要加空值判断。

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