HTMLCollection长度为0求助：DOM就绪后获取子元素异常

核心问题：HTMLCollection的动态特性 #

getElementsByTagName返回的是动态HTMLCollection，它会实时同步DOM的变化。你遇到的矛盾情况本质是时机差异：

• 控制台展开集合查看时，浏览器会实时重新查询DOM，此时Notion的动态内容已经加载完成，所以显示length为385；
• 但代码执行console.log(child.length)时，#notion-app下的div元素还没被Notion的异步JS渲染出来——DOMContentLoaded仅保证初始DOM结构就绪，不代表单页应用的所有动态内容都加载完毕。

验证与解决方法 #

• 延迟测试验证时机：通过延迟执行代码，确认动态内容加载后的长度：

  setTimeout(() => {
    const parent = document.querySelector('#notion-app');
    const child = parent.getElementsByTagName('div');
    console.log(child.length); // 此时能拿到正确长度
  }, 3000);
  

• 用MutationObserver监听动态变化：实时监控#notion-app的子节点更新，确保在内容加载后再处理：

  const parent = document.querySelector('#notion-app');
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length) {
        const child = parent.getElementsByTagName('div');
        console.log(child.length);
        // 转数组遍历：Array.from(child).forEach(div => { ... })
      }
    });
  });
  observer.observe(parent, { childList: true, subtree: true });
  

• 改用静态集合快照：如果不需要实时同步DOM变化，用querySelectorAll返回静态NodeList，拿到的是执行时刻的DOM快照：

  const child = document.querySelectorAll('#notion-app div');
  console.log(child.length);
  

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