好奇的javascript解析，甚至只返回节点。：我在这段代码中做错了什么？

Question

我有一个SVG如下：

<g id="proyectoActual"> 
        <g id="BORDE">
            <g id="foo"/>
        </g>

        <g id="FASES">  
            <g id="foo"/>       
        </g>

        <g id="TEXTO">  
            <g id="foo"/>
        </g>

        <g id="PROTECCIONES">
            <g id="foo"/>
        </g>

        <g id="LINEAS">
            <g id="foo"/>
        </g>

        <g id="BOLAS">
            <g id="foo"/>
        </g>
    </g>
</g>

我用这棵树克隆

var nodoClonado=gRootDibujo.cloneNode(true);

咨询其子代及其子代号，就可以了。

当我尝试使用...将节点添加到另一个SVG时...

for (var i=1;i<nodoClonado.childNodes.length;i++)
    contenedorBounder.appendChild (nodoClonado.childNodes[i]);

似乎只添加1, 3, 5.. (odd nodes "FASES", PROTECCIONES" and "BOLAS") 。

如果更改var i = 2，则仅添加2、4、6（奇数个节点）。

我做错了什么？

提前致谢

Answer 1

当您将节点附加到其他元素时，该节点不再是其原始父级的子级，因为它已被移动到DOM中的新位置。 因此，在您移动childNodes[0] ，先前在childNodes[1]中的childNodes[1]将移至[0] ， [2]移至[1] ， childNodes[1] 。当i增加到1 ，它将移动childNodes[1] ，这是原始的[2] 。 因此，您已跳过了原始的[1]节点。 每个孩子都会发生这种情况，因此您最终只能复制原始的偶数孩子。

您可以执行以下操作来代替for循环：

while (nodoClonado.childNodes.length > 0) {
    contenedorBounder.appendChild (nodoClonado.childNodes[0]);
}

Answer 2

正如Ram在其评论中指出的那样，您需要首先克隆该节点。 只需添加节点，即可将该节点“移动”到新的父节点，并与先前的父节点分离。

这应该可以解决问题：

for (var i=0;i<nodoClonado.childNodes.length;i++)
    contenedorBounder.appendChild (nodoClonado.childNodes[i].cloneNode(true));