当控制台从我的 JS 文件记录时，为什么我的节点列表包含 0 个项目？

Question

我关心的JS代码是这样的：

 const modals=document.querySelectorAll('.modal');
    const modalsArray=[...modals];
    console.log(modalsArray);
    
    document.addEventListener('click', function (e) {
      e.stopPropagation();
      e.preventDefault();
      if (e.target.classList.contains("item")) {
        itemIndex=e.target.classList.item(1);
        const modals=document.querySelectorAll('.modal');
        const modalsArray=[...modals];
        console.log(itemIndex);
        console.log(modalsArray);
        modalsArray.filter(function (modal) {
          if (modal.classList.item(1)===itemIndex) {
            modal.classList.add('on');
            modalContainer.classList.remove('off');
            modalContainer.classList.add('on');
          }
        })
      }
    });


const arrow=document.querySelectorAll('.arrow');
const arrowArray=[...arrow];
console.log(arrowArray);

每当我从 JS 文件中控制台记录 modalsArray 或 arrowArray 时，数组都会显示为空。但我发现，如果我在控制台中从头开始编写代码来制作数组，那么数组中的所有项目都会正确显示。

那么为什么会发生这种情况呢？为什么我的控制台上当前显示一个空数组？与范围或其他什么有关吗？

当我将 modalsArray 放入事件侦听器中，然后单击相应的目标时，数组将正确显示，并且该事件侦听器中的其余代码可以正常工作。

我注意到 arrowArray 也有同样的情况，并意识到这两个元素有同样的问题。我想我应该问一下，因为肯定有事情发生。

那么为什么如图所示这两个元素都显示为空数组？

Answer 1

您的控制台语句甚至在获取数据之前就正在执行。我将它们链接在另一个“then”函数（承诺链接）中，如下所示。这样，您的控制台语句将在结果解析为 hmtl 后运行。

https://jsfiddle.net/v83zqofp/1/

function generateHTML (data) {
  fetchData(data)
  .then(function(data){
    let results=data.results;
    return results.map(function(result,index){
      -------------
      main.lastElementChild.insertAdjacentHTML('afterend', html);
      modalContainer.insertAdjacentHTML('beforeend', overlayHtml);      
    })
  }).then (function (data) {
      const modals=document.querySelectorAll('.modal');
      const modalsArray=[...modals];
      console.log(modalsArray);

      const arrow=document.querySelectorAll('.arrow');
      const arrowArray=[...arrow];
      console.log(arrowArray);
  })
}