Javascript DOM ChildNodes属性无法捕获所有子级

mohsaied 发表于 Dev

莫赛义德

我想保存一个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/

jfriend00

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

您可以将实时列表的副本复制到数组中（因此在迭代时不会更改），也可以更改迭代列表的方式。

例如，您可以更改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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。