如何无需点击即可实时检测DOM元素是否存在子节点

问题原因 #

你的现有代码仅在执行时触发一次子节点数量统计，后续DOM结构发生变更时不会自动重新运行计算逻辑，因此无法拿到更新后的子节点数量。

解决方案 #

使用MutationObserver API监听父元素的子节点变更事件，每次子节点增减时自动触发统计逻辑，实现实时检测效果，完整实现代码如下：

// 获取要监听的父元素
const div_coachee = document.querySelector('#search_coachee');
const input_coachee = document.querySelector('#input_coachee');

// 定义统计子节点数量的逻辑
function countChildren() {
  const childCount = div_coachee.children.length;
  if (childCount >= 4) {
    console.log(childCount);
  } else {
    console.log("Gaada");
  }
}

// 初始化执行一次统计
countChildren();

// 创建MutationObserver实例，监听子节点变化
const observer = new MutationObserver((mutationsList) => {
  // 仅当子节点列表发生变更时重新统计
  for(const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      countChildren();
      break;
    }
  }
});

// 配置监听规则：监听直接子节点的新增/删除
const observerConfig = {
  childList: true,
  // 如需监听深层嵌套子节点变化，可将下方配置改为 true
  subtree: false
};

// 启动监听
observer.observe(div_coachee, observerConfig);

// 后续需要停止监听时可调用以下方法
// observer.disconnect();

补充说明 #

• MutationObserver是现代浏览器原生支持的DOM监听API，性能远优于旧版DOM突变事件，不会阻塞页面渲染
• 上述配置仅监听父元素的直接子节点变化，完全匹配你当前的检测需求

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