调用modal.classList.remove('hidden')方法不生效如何解决？

排查步骤 #

• 第一步：验证DOM元素是否正确选中
  在点击事件回调中增加console.log(modal)输出选中的元素，检查输出结果是否为预期的.modal节点。如果输出为null，说明JS执行时DOM还未加载完成，querySelector没有匹配到对应元素。
  解决方法二选一：
  1. 将JS代码放在</body>闭合标签之前，保证DOM解析完成后再执行JS
  2. 给引入JS的script标签添加defer属性，或者把所有JS逻辑包裹在DOMContentLoaded事件回调中：

  document.addEventListener('DOMContentLoaded', function() {
    // 原有JS代码全部放在这里
    const modal = document.querySelector('.modal');
    const showBtns = document.querySelectorAll('.show-modal');
    for (let i = 0; i < showBtns.length; i++) {
      showBtns[i].addEventListener('click', function () {
        console.log('Button Clicked');
        modal.classList.remove('hidden');
        console.log(modal.classList);
      });
    }
  })
  

• 第二步：排查是否有其他逻辑重复添加hidden类
  观察console.log(modal.classList)的输出，如果输出的类列表中已经没有hidden，但页面元素上仍然存在该类，说明有其他JS逻辑在当前回调执行后，又把hidden类加回了元素上。最常见的原因是事件冒泡：
  如果你写了点击模态框外部（比如overlay、body）关闭模态框的逻辑，点击按钮时事件会从按钮冒泡到上层节点，触发关闭逻辑，导致hidden类被移除后立刻又被添加上。
  验证方法：在点击回调中添加e.stopPropagation()阻止事件冒泡，测试是否恢复正常：

  showBtns[i].addEventListener('click', function (e) {
    e.stopPropagation()
    modal.classList.remove('hidden')
  })
  

• 第三步：检查类名拼写与元素重复问题
  确认HTML中modal的类名确实是modal，hidden类没有拼写错误；同时检查页面中是否存在多个.modal元素，document.querySelector只会匹配第一个符合条件的元素，如果你要操作的不是第一个.modal，就会出现操作失效的问题。
• 第四步：直接在控制台执行命令验证
  打开浏览器控制台，手动执行document.querySelector('.modal').classList.remove('hidden')，如果执行后类被正常移除，说明问题出在JS执行逻辑的时序或者事件冲突上，按前两步排查即可；如果执行后类仍然存在，检查是不是有前端框架（比如Vue、React）的渲染逻辑在强制控制元素类名，覆盖了原生DOM操作。

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