无法使用 forEach 循环遍历 HTMLCollection答案

【问题标题】：Unable to loop through HTMLCollection with forEach无法使用 forEach 循环遍历 HTMLCollection
【发布时间】：2021-07-07 18:19:19
【问题描述】：

我正在尝试为每个类名为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 返回空..

【问题讨论】：

这能回答你的问题吗？ JS: iterating over result of getElementsByClassName using Array.forEach

标签： javascript html dom

【解决方案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");
        });
    );
}

【讨论】：

当您自己的示例显示 for of 用法时，我不喜欢“不可迭代”。见Are HTMLCollection and NodeList iterables?。
它与是否可迭代无关。 HTMLCollection 接口只是不公开forEach 方法。 NodeList 接口可以。这也是11年前的重复问题……
现在是 11 年后发布的一个问题。 (y)
@MikeM 我不确定用什么来形容这个古老的神器最好。感谢您指出这一点，我已经更新了答案以避免误解。
你这里有一个错误。在let i = 0, len = toggleButton.length 中，len 不是let 变量。我把这段代码放到了一个递归遍历函数中，因此它不起作用！分配给len 的递归级别，导致更高级别不会遍历所有项目。

【解决方案2】：

querySelectorAll 没有返回任何内容的原因是因为您没有在开头添加 .（请记住，querySelectorAll 接受必须是有效的 DOMString 的 CSS Selector）。这导致它返回标签名称为 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");
  })
);

【讨论】：