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

Answer 2

使用ES6传播运算符创建数组的另一种方法（这是我的首选方法）：

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

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

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

2 个答案: