querySelectorAll 未在递归函数内返回更新的节点列表

Question

我正在尝试获取 DOM 中将来创建的元素。为了简单起见，当用户通过单击上传按钮上传图像时，会在 DOM 中创建一个 div，其类名为“.popup”。

为了检查是否创建了类名“.popup”的模式，我使用了递归函数。 当我使用 querySelector 方法时它工作得很好。

问题是，用户可以上传多个文件，这会在 DOM 中创建多个具有相同类名的 div。当我使用 querySelectorAll 方法获取所有 div 时，它始终返回第一个 div，并且不会获取其他 div。看起来 let modals = document.querySelectorAll(".popup") 不会在递归函数内更新。

有什么建议，我在这里缺少什么吗？

提前致谢。

const attachRemoveBgEvent = () => {
  const input = document.getElementsByTagName("input");
  for (var i = 0; i < input.length; i++) {
      //Add Listner
      input[i].addEventListener("input", checkCropper);
  }
};

async function checkCropper(e) {
  async function checkModalIsCreated() {
    return new Promise((resolve) => {
      function checkModal() {
        let modals = document.querySelectorAll(".popup");
        if (modals.length > 0 ) {
          createRemoveButton(modals);
          resolve();
        } else {
          setTimeout(checkModal, 1000);
        }
      }
      checkModal();
    });
  }

  await checkModalIsCreated();

}

const createRemoveButton = (modals) => {
console.log(modals);
}

如果将来创建了多个类名“.popup”的 div，我希望获得所有这些 div。但我只得到第一个，即使我使用 querySelectorAll() 方法，它应该返回一个节点列表，其中包含具有该类名的所有 div。

我还尝试使用 getElementsByClassName() 返回实时 HTML 集合。但在控制台中，我确实看到 HTMLcollection 包含所有项目，但当我 console.log 长度时，它始终是一个。

Answer 1

我已经解决了这个问题，我只需跟踪我已经找到的弹出窗口，并检查节点列表的长度是否更大。

// total number of popup found
let popupFound = 0;

const attachRemoveBgEvent = () => {
  const input = document.getElementsByTagName("input");
  for (var i = 0; i < input.length; i++) {
      //Add Listner
      input[i].addEventListener("input", checkCropper);
  }
};

async function checkCropper(e) {
  async function checkModalIsCreated() {
    return new Promise((resolve) => {
      function checkModal() {
        let modals = document.querySelectorAll(".popup");
        if (modals.length > popupFound ) {
          popupFound = popupFound + 1;
          createRemoveButton(modals);
          resolve();
        } else {
          setTimeout(checkModal, 1000);
        }
      }
      checkModal();
    });
  }

  await checkModalIsCreated();

}

const createRemoveButton = (modals) => {
console.log(modals);
}