Javascript DOM ChildNodes 属性未捕获所有子节点

Question

我想保存一个 DOM 子树(名为“框图”的 div 下的所有内容)，然后将其绘制在名为“bus_diagram”的 div 上。由于某种原因，保存 childNodes 属性似乎并未捕获所有元素。

这是我正在使用的 JavaScript。调用函数“dostuff()”时，“block_diagram”下的所有内容都应转到“bus_diagram”

var SAVED_BLOCK_DOM = null;

function save_block() {
    SAVED_BLOCK_DOM = document.getElementById("block_diagram").childNodes;
}

function refresh_block() {
    for (var i = 0; i < SAVED_BLOCK_DOM.length; i++) {
        document.getElementById("bus_diagram").appendChild(SAVED_BLOCK_DOM[i]);
    }
}

function dostuff() {
    save_block();
    refresh_block();
}

这是一个 JSFiddle:http://jsfiddle.net/BFp5s/3/

Answer 1

.childNodes 是节点的实时集合，当您开始在节点上执行 .appendChild() (将元素移动到 DOM 中的不同位置)时，实时集合会在您执行操作时发生变化。正在迭代它，导致您错过节点。因此，当 for 循环的索引为 0 时，您会对第 0 个 0 元素执行 .appendChild()列表中的。这将从实时列表中删除该元素。然后，您将索引增加到 1，但下一个要处理的项目现在位于列表中的第 0 位置，导致您处理所有其他项目。

您可以将实时列表复制到一个数组中(这样它在迭代时不会改变)或更改迭代列表的方式。

例如，您可以将 save_block() 更改为:

function save_block() {
    SAVED_BLOCK_DOM = Array.prototype.slice.call(document.getElementById("block_diagram").childNodes, 0);
}

这会使 SAVED_BLOCK_DOM 变成一个普通数组，因此在您迭代它时它不会改变。

jsFiddle 演示:http://jsfiddle.net/jfriend00/R8c94/

<小时/>

或者，如果您想要/需要支持 IE6/7/8 支持，而这不适用于上述复制机制，您可以手动复制 nodeList:

function save_block() {
    SAVED_BLOCK_DOM = [];
    var list = document.getElementById("block_diagram").childNodes;
    for (var i = 0; i < list.length; i++) {
        SAVED_BLOCK_DOM.push(list[i]);
    }
}

<小时/>

如果你不需要SAVED_BLOCK_DOM来继续保存节点列表并且想要支持IE8，你可以像这样改变你的迭代方式:

function refresh_block() {
    while (SAVED_BLOCK_DOM.length) {
        document.getElementById("bus_diagram").appendChild(SAVED_BLOCK_DOM[0]);
    }
}

jsFiddle 演示:http://jsfiddle.net/jfriend00/PK7Tg/