为何点击#reset按钮时，即便#gameboard无子元素仍执行Flow.reset()？

你遇到的问题根源是hasChildNodes()方法的判定逻辑——它会把**HTML中的空白文本节点（比如换行、空格）**也算作子节点。看你的HTML代码，#gameboard标签内部有换行和空格，这些都会被识别为文本子节点，所以hasChildNodes()永远返回true，导致每次点击重置按钮都会执行Flow.reset()。

下面是几种可行的解决方法：

方法1：检查元素子节点数量 #

children属性只统计元素类型的子节点，会忽略空白文本节点，直接判断它的长度即可：

const resetBtn = document.querySelector('#reset');
resetBtn.addEventListener('click', () => {
  const gameboard = document.getElementById('gameboard');
  if (gameboard.children.length > 0) {
    Flow.reset();
  }
});

方法2：清理内部HTML后判断 #

通过trim()去掉内部内容的空白字符，再判断是否为空：

const resetBtn = document.querySelector('#reset');
resetBtn.addEventListener('click', () => {
  const gameboard = document.getElementById('gameboard');
  if (gameboard.innerHTML.trim() !== '') {
    Flow.reset();
  }
});

方法3：直接清理HTML中的空白 #

把#gameboard的HTML改成紧凑写法，去掉内部的换行和空格：

<div class="gameBoard" id="gameboard"></div>

这种方法下，原有的hasChildNodes()判断就能正常工作了。

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