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)}