无法使用 forEach 循环遍历 HTMLCollection

Question

我试图为每个类名为

director__card--iconBox

的元素分配一个单击事件。我选择这些元素的方式是通过

getElementsByClassName

。使用当前编写的代码，我正在测试将其父级 div 的

background-color

应用于红色的函数。最终目标是能够翻转 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");
        });
    );
}

Answer 2

querySelectorAll

没有返回任何内容的原因是因为您没有在开始时添加

.

（请记住，

querySelectorAll

接受必须是有效的CSS选择器的DOMString）。这导致它返回具有标签名称

director__card--iconBox

的元素数组，而不是具有类

director__card--iconBox

的元素数组。

尝试以下操作：

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

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

Answer 3

您还可以通过调用集合上的

HTMLCollection

方法来循环访问

item()

中的元素。

item()

方法返回位于集合中指定偏移量的元素。示例：

const toggleButtons = document.getElementsByClassName("your-class-name");

for (let i = 0; i < toggleButtons.length; i++) {
    console.log(toggleButtons.item(i));
}