Javascript .forEach（）在第一次迭代后停止

一个简单的.forEach根据内容在第一次迭代后停止

我的初始循环如下所示：

document.getElementsByClassName("app-form-to-js").forEach(function(node) {
    node.classList.remove("app-form-to-js");
    jsForms[node.id]=node.cloneNode(true);
    node.remove();
});

当第一个循环发生时，它不会超出。 然后，经过一些调整，我成功地使循环使用以下代码：

document.getElementsByClassName("app-form-to-js").forEach(function(node) {
    jsForms[node.id]=node.cloneNode(true);
    jsForms[node.id].classList.remove("app-form-to-js");
});

但是，当我使用node.classList.removeapp-form-to-js时；或node.remove；消息灵通的 它总是在第一次迭代后停止

知道为什么循环在第一次迭代后停止，以便在我更改节点时至少迭代一次吗？

document.getElementsByClassName返回一个HTMLCollection，它没有forEach的定义。但是，您可以使用array.from将其转换为一个数组，该数组已定义了一个数组，如下所示：

var collection=Array.fromdocument.getElementsByClassNameapp-form-to-js； collection.forEachfunctionnode{…}； 编辑：

---

正如@Preciel向我指出的，这个对象确实有一个类似于数组的forEach函数。如果您愿意使用此选项，可以将document.getElementsByClassNameapp-form-to-js替换为document.querySelectorAll.app-form-to-js，这将返回节点列表而不是HTMLCollection

使用ES6扩展运算符创建数组的另一种方法这是我的首选方法：

const elements = [...document.getElementsByClassName("app-form-to-js")];
elements.forEach((node)=>{...});
//OR:
elements.map((node,i)=>{... return node});
//Etc...

---

如果使用.map方法，则可以直接对元素进行更改，并将其反映在DOM等中。这是一种非常强大的技术，请记住在函数中返回修改过的节点。

document.getElementsByClassName返回元素的实时集合。这实际上意味着它会随着DOM元素的变化而变化。您可能希望复制元素集合，然后对其进行迭代。document.getElementsByClassName…forEach不是函数？document.getElementsByClassName不包含forEach函数…请尝试使用两个单独的forEach 1。用于克隆节点，第二个用于移除class@Preciel突变肯定是个问题，或者至少是其中之一：node.classList.removeapp-form-to-js；执行此操作后-当前节点将从列表中删除，所有其他节点将移动，下一个迭代步骤将跳过下一个节点，因为其索引已移动。document.getElementsByClassNameapp-form-to-js.forEachfunctionnode{}；尽管如此，还是要迭代。。。正如我所说，它在第一次迭代后停止，所以它至少迭代一次。正如我在第二个代码示例中所写的，只要稍微调整一下，循环就会工作。它没有告诉我为什么循环从我更改或删除节点的那一刻起停止。或者仅仅是因为它是一个HTMLCollection？老实说，你发布的代码不应该根据。它可能只进行一次迭代，因为HTMLCollection是一个单独的对象，foreach迭代一个对象数组，但你的猜测和我的一样好。我提供的解决方案是最常用的方法。我似乎完全支持：除了IE，但谁关心IE…HTMLCollection与NodeList不同。querySelectorAll提供一个NodeList，但如果您更愿意使用它而不是getElementsByClassName。