无法使用 forEach 循环遍历 HTMLCollection

Question

我试图为每个类名为 的元素分配一个单击事件director__card--iconBox。我选择这些元素的方式是通过getElementsByClassName. background-color在编写当前代码后，我正在测试将其父 div应用于红色的函数。最终目标是能够翻转 div 并显示稍后出现的 div 的背面。

const toggleButton = document.getElementsByClassName("director__card--iconBox");

toggleButton.forEach((el) =>
  el.addEventListener("click", (event) => {
    const card = event.target.parentElement.querySelector(".director__card");
    card.classList.toggle("open");
  })
);

我正在取回一个 HTMLCollection。我的想法是，由于 HTMLCollection，这不会起作用？我尝试过 querySelectorAll 返回节点列表，但 NodeList 返回空。

Answer 1

HTMLCollection是一个类似数组的对象，但它没有forEach方法。

您可以通过多种方式对其进行迭代；

例如

用它创建一个数组；

Array.from(toggleButton).forEach((el) =>
  el.addEventListener("click", (event) => {
    const card = event.target.parentElement.querySelector(".director__card");
    card.classList.toggle("open");
  })
);

使用for..of

for (let item of toggleButton) {
    item.forEach((el) =>
        el.addEventListener("click", (event) => {
            const card = event.target.parentElement.querySelector(".director__card");
            card.classList.toggle("open");
        });
    );
}

或者，只是for循环。

for (let i = 0, len = toggleButton.length; i < len; i++) {
    toggleButton[i].forEach((el) =>
        el.addEventListener("click", (event) => {
            const card = event.target.parentElement.querySelector(".director__card");
            card.classList.toggle("open");
        });
    );
}