如何让JS querySelector实时检测DOM中的元素类状态？

你的实现逻辑存在本质偏差，和querySelector是否实时没有关系：

• 你写的整段if/else判断仅在页面初始加载、JS文件首次运行时执行1次，后续点击方格修改DOM类名时，这段判断不会自动重新执行，自然不可能切换绑定的事件
• 页面初始状态下没有任何带.active类的方格，所以代码从一开始就只会走else分支，给所有格子绑定selectPiece方法，永远不会绑定移动棋子的逻辑
• 你提前存的activeSquares变量是初始DOM状态下的静态NodeList，后续DOM更新后这个变量不会自动同步，但这只是次要问题，不是逻辑失效的根源

不需要找什么"实时检测DOM类状态"的特殊API，这类交互的常规写法是：给所有方格统一绑定同一个点击处理函数，每次点击触发的时候，再在函数内部实时查询当前DOM状态，判断要走选中逻辑还是移动逻辑即可。
修正后的可运行代码参考：

const squares = document.querySelectorAll('.square');

squares.forEach(square => {
  square.addEventListener('click', handleSquareClick)
})

function handleSquareClick(e) {
  const currentSquare = e.currentTarget;
  // 每次点击时实时查询当前是否有已选中的激活方格
  const activeSquare = document.querySelector('.active');

  // 分支1：当前没有选中的棋子，执行选子逻辑
  if (!activeSquare) {
    // 可选判断：只有点击的格子有棋子时才添加选中状态
    if (currentSquare.textContent.trim()) {
      currentSquare.classList.add('active');
    }
    return;
  }

  // 分支2：已经有选中的棋子，执行移动逻辑
  // 如果点击的就是已选中的格子，取消选中状态
  if (activeSquare === currentSquare) {
    activeSquare.classList.remove('active');
    return;
  }
  // 把选中格子的棋子移动到当前点击格
  currentSquare.textContent = activeSquare.textContent;
  // 清空原格子内容，移除选中状态
  activeSquare.textContent = '';
  activeSquare.classList.remove('active');
}

• JavaScript执行时机：顶层作用域的代码只会在脚本加载阶段执行一次，不会自动感知DOM变化重复运行
• 事件监听器的运行规则：监听器一旦绑定到元素上，除非手动调用removeEventListener移除，否则不会因为外部变量、DOM状态变化自动切换绑定的处理函数
• 事件对象的使用：循环绑定事件时，优先通过事件回调参数（通常命名为e）的currentTarget属性获取当前触发事件的元素，避免循环变量闭包带来的异常
• 类名操作API：不要直接给className赋值覆盖整个类属性，优先用element.classList提供的add/remove/toggle/contains方法操作类名，不会误删元素上的其他类（比如后续给棋盘格加深浅背景类时，直接赋值className会把这些样式类删掉）

后续如果要加国际象棋的走子规则，只需要在移动棋子的逻辑分支前加规则校验即可，比如判断起点终点的棋子类型、走法是否合规，不合规直接return阻止移动就行。

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