为何document.querySelectorAll()无法获取load_home创建的div？

核心原因就是fetch是异步操作，这是JavaScript的异步特性导致的，和DOMContentLoaded本身的机制无关。

具体原因拆解： #

• 当你在DOMContentLoaded监听器里调用load_home()，函数会立刻开始执行，但碰到fetch()请求时，JavaScript会把这个异步任务丢到任务队列里，转而继续执行后面的代码——也就是你紧接着写的document.querySelectorAll('div')。
• 这时候load_home里的fetch请求还在等服务器返回数据，后续创建div并插入DOM的逻辑根本没跑，自然查不到新生成的元素。
• DOMContentLoaded的触发逻辑是初始HTML加载解析完成就触发，它只保证此时DOM树已经就绪，但不会等任何异步请求完成。

解决办法： #

要保证在load_home里所有异步操作都完成后再查DOM，常用两种方式：

1. 把load_home改成异步函数，用await等待每个fetch请求完成，调用时也加await：

async function load_home() {
  // 用await等待fetch请求完成
  const response = await fetch('/your-api-url');
  const data = await response.json();
  // 这里写创建div并插入DOM的逻辑
}

document.addEventListener('DOMContentLoaded', async () => {
  await load_home();
  const allDivs = document.querySelectorAll('div');
  // 现在就能拿到load_home创建的div了
});

2. 在load_home里所有fetch请求完成后，通过回调函数触发DOM查询：

function load_home(onComplete) {
  fetch('/your-api-url')
    .then(res => res.json())
    .then(data => {
      // 创建div并插入DOM的逻辑
      // 所有操作完成后调用回调
      onComplete();
    });
}

document.addEventListener('DOMContentLoaded', () => {
  load_home(() => {
    const allDivs = document.querySelectorAll('div');
    // 这里可以正常获取新元素
  });
});

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