从我的 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 相同的事情，并意识到这两个元素存在相同的问题。我想我应该问一下，因为肯定有什么事情发生了。

那么，为什么图片中的这两个元素都出现了一个空数组呢？

查看我的小提琴以获取更多信息： https://jsfiddle.net/apasric4/kvs25wbL/3/

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);
  })
}