“childNodes”未获取 SVG 对象的所有子节点

Question

我正在尝试使用 SVG 折线实现动态线图。多个选项卡下有多个图形（因此多个 SVG）。选项卡是通过将 SVG 保存在多个 div 下并隐藏除当前选定选项卡之外的所有 div 来实现的。

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100%" width="100%" id="svg1">
        <line style="stroke:black;stroke-width:0.1" y2="25%" x2="100%" y1="25%" x1="0"/>
        <text style="fill:#999999; font-size:9pt" y="24%" x="20" id="label_1_75">2.475 tab1units</text>

        <line style="stroke:black;stroke-width:0.1" y2="50%" x2="100%" y1="50%" x1="0"/>
        <text style="fill:#999999; font-size:9pt" y="49%" x="20" id="label_1_50">1.650 tab1units</text>

        <line style="stroke:black;stroke-width:0.1" y2="75%" x2="100%" y1="75%" x1="0"/>
        <text style="fill:#999999; font-size:9pt" y="74%" x="20" id="label_1_25">0.825 tab1units</text>


        <polyline style="fill-opacity:0;stroke:brown;stroke-width:1" points="0,300 0,340000000 5,340000000 10,340000000 15,340000000 20,340000000 25,340000000" id="custgraph_graph_1_1"/>


        <polyline style="fill:red;fill-opacity:0.4;stroke:red;stroke-width:1" points="0,300 0,340000000 5,340000000 10,340000000 15,340000000 20,340000000 25,340000000 " id="custgraph_graph_1_2"/>


        <line id="custgraph_del_line_1_15" x1="15" y1="0" x2="15" y2="100%" style="stroke:black;stroke-width:0.1"/>
        <text id="custgraph_del_text_1_15" x="20" y="15" style="fill:#999999; font-size:9pt">4m</text>
        <line id="custgraph_del_line_1_315" x1="315" y1="0" x2="315" y2="100%" style="stroke:black;stroke-width:0.1"/>
        <text id="custgraph_del_text_1_315" x="320" y="15" style="fill:#999999; font-size:9pt">3m</text>
        <line id="custgraph_del_line_1_615" x1="615" y1="0" x2="615" y2="100%" style="stroke:black;stroke-width:0.1"/>
        <text id="custgraph_del_text_1_615" x="620" y="15" style="fill:#999999; font-size:9pt">2m</text>
        <line id="custgraph_del_line_1_915" x1="915" y1="0" x2="915" y2="100%" style="stroke:black;stroke-width:0.1"/>
        <text id="custgraph_del_text_1_915" x="920" y="15" style="fill:#999999; font-size:9pt">1m</text>
    </svg>

这些 SVG 将线条和文本元素作为子节点用于显示网格（轴）。由于这些网格是基于浏览器大小的动态网格，因此每次选择选项卡时我都会重新创建网格。并且只要选择选项卡，我就会删除所有其他选项卡下的网格线。

    for (var i = width<%=tabnum[i]%> % (step<%=tabnum[i]%> * 60); i < width<%=tabnum[i]%>; i += step<%=tabnum[i]%> * 60)
    {
        var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            line.setAttribute('id','custgraph_del_line_<%=tabnum[i]%>_'+i );
            line.setAttribute('x1', i);
            line.setAttribute('y1', 0);
            line.setAttribute('x2', i);
            line.setAttribute('y2', '100%');
            line.setAttribute('style', 'stroke:black;stroke-width:0.1');

        var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            text.setAttribute('id','custgraph_del_text_<%=tabnum[i]%>_'+i );
            text.setAttribute('x', i + 5);
            text.setAttribute('y', 15);
            text.setAttribute('style', 'fill:#999999; font-size:9pt');
            text.appendChild(document.createTextNode(Math.round((width<%=tabnum[i]%> - i) / step<%=tabnum[i]%> / 60) + 'm'));

        label_<%=tabnum[i]%>_25.parentNode.appendChild(line);
        label_<%=tabnum[i]%>_25.parentNode.appendChild(text);
    }

为此，我在所有其他 SVG 对象上调用“childNodes”方法。问题是我没有得到所有的子节点。当我在 firebug 中查看 DOM 时，我可以看到只有一些孩子被删除了。

            childlist=label_<%=tabnum[i]%>_25.parentNode.childNodes;
            for(i = 0; i < childlist.length; i++)
            {

                if(typeof childlist[i].id !== "undefined")
                {        
                    if (childlist[i].id.indexOf("custgraph_del_") == 0) 
                    {

                        label_<%=tabnum[i]%>_25.parentNode.removeChild(childlist[i])

                    }
                }
            }         

所以有时当我导航到另一个选项卡并返回时，我看到一些旧的网格线仍然与新创建的网格线一起存在。

有人可以解释一下吗？

Answer 1

您似乎在循环时删除了集合中的项目。因此，当您在循环中进行并删除项目时，索引不会引用与原始数组中相同的项目。每次删除一个项目时，都会跳过下一个项目，因为它现在放置在您刚刚测试的索引处。

解决这个问题的一个经典技巧是向后循环数组，这样您就只会删除它末尾的项目。

PS：您可以考虑d3.js 为您的项目提供帮助。