Javascript .forEach（）不适用于DOM节点，因为它们在进程中发生了变化

Question

我有以下错误代码将所有DOM元素从一个节点移动到另一个节点：

div.childNodes.forEach((n) => me.container.appendChild(n));

不幸的是，这只复制了一半的节点。这样做的原因似乎是内部，javascript就像循环标准一样计算：

for(let i = 0; i < div.childNodes.length; i++) {
    me.container.appendChild(div.childNodes[i]);
}

这会导致行为，因为div.childNodes.length每次将其中一个项目附加到me.container时都会减少。

以下结构也遇到同样的问题：

for (const n of div.childNodes) {
    me.container.appendChild(n);
}

这里的问题是，这样做的最佳做法是什么，避免这样的错误？我们应该相信javascript的功能函数能够实际执行他们描述的内容吗？

我找到了两个有效的候选人，我想知道是否有明显的速度差异，因为我更喜欢第一个，因为它看起来更简单：

Array.from(div.childNodes).forEach((n) => me.container.appendChild(n));

没有转换：

for (let i = div.childNodes.length; i > 0; i--) {
    me.container.appendChild(div.childNodes[0]);
}

这两个示例都可以正常工作并复制所有节点。

Answer 1

怎么样

while (div.hasChildNodes()) { me.container.appendChild(div.firstChild)}