.forEach () останавливается после первой итерации

Question

Простой .forEach() останов после первой итерации в зависимости от содержимого ...

Мой начальный l oop выглядел так:

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

При первом l oop происходит, это не go дальше.
Затем, после некоторой настройки, мне удалось заставить l oop работать с этим кодом:

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(); в l oop,
он всегда останавливается после первой итерации.

Любая идея, почему l oop останавливается после первой итерации (поэтому он повторяется хотя бы один раз ) если я изменю узел?

Answer 1

document.getElementsByClassName возвращает HTMLCollection, который не имеет определения для forEach. Тем не менее, вы можете превратить это в массив, который имеет один определенный, используя Array.from(), например, так:

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

EDIT:

Как было указано мне @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 et c. - очень мощная техника (не забудьте вернуть измененный узел в функцию)