javascript - .forEach() 在第一次迭代后停止

Question

一个简单的 .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.remove("app-form-to-js"); 或 node.remove(); 时,
它总是会在第一次迭代后停止。

知道为什么如果我更改节点，循环在第一次迭代后停止(因此它至少迭代一次)吗？

Answer 1

document.getElementsByClassName 返回一个 HTMLCollection，它没有 forEach 的定义。但是，您可以通过使用 Array.from() 将其转换为一个已定义的数组，如下所示:

var collection = Array.from(document.getElementsByClassName("app-form-to-js"));
collection.forEach(function(node){...});

编辑:

正如 @Preciel 向我指出的，NodeList对象确实有一个类似于数组的 forEach() 函数。如果您想使用它，可以将 document.getElementsByClassName("app-form-to-js") 替换为 document.querySelectorAll(".app-form-to-js") 这将返回一个 NodeList 而不是 HTMLCollection