在SVG文档中遍历子节点的问题

 

在SVG文档中遍历子节点的问题

修订：

2007-03-12 删除了BATIK不计算空白节点的描述，因为在实际编程中发现BATIK1.6也将空白节点计算为子节点。不知道 www.carto.net中对BATIK节点计算的描述是否基于早期的BATIK版本。

相信很多使用Adobe SVG Viewer（ASV）进行SVG编程的都遇到过这个问题，在使用节点遍历时，返回的节点数总是有些奇怪，例如在SVG文档中如果写入：

 

<g id="choices">

 <!--this is a test-->

 <text x="20" y="100" font-size="30">by their</text>

 <text x="20" y="100" font-size="30">by their</text>

</g>

      

然后使用如下代码取该组下的子节点数量：

 

var elem = svgDocument.getElementById("choices");

var nodes = elem.childNodes;

alert(nodes.length);

 

我们期望返回的个数为3，包括一个注释和两个文本节点，但ASV实际返回为7。网上有些文档解释如下：

 

childNodes 中子节点列表的序号是从 1 开始，并且以 2 递增的。因此访问的方式为

for(var i = 1;i < ((nodes.length-1));i = i+2)

{

            alert(printNode(nodes.item(i)));

}

 

事实上这是不对的，在ASV中，节点下的空白也作为一个节点计算，因此上面的节点还要加上四个空白节点，因此是7个。如果我们在SVG中以不换行的方式写上述节点，

 

<g id="choices"> <!--this is a test--> <text x="20" y="100" font-size="30">by their</text> <text x="20" y="100" font-size="30">by their</text></g>

 

这时返回的节点数是3。在这种情况下，上面的代码就有问题了。特别是在我们动态生成SVG图形时，这个问题比较比较明显了。例如在原始的SVG文档中有：

 

<g id="choices">

</g>

 

       然后在脚本中，使用createElementNS在组中动态创建几个矩形图形节点：

 

var group = svgDocument.getElementById("choices ");

       for(var i=0; i < 3; i++)

       {

                     var elem = svgDocument.createElementNS(svgns, "rect" );

                     group.appendChild(elem);

       }

       此时组中的子节点数量为4（三个矩形节点和一个空白节点），对矩形子节点的遍历就应当是：

 

var elem = svgDocument.getElementById("choices");

       var nodes = elem.childNodes;

                      

       for(var i = 1; i < nodes.length ;i ++)

       {

            alert(nodes.item(i).nodeName);

       }

 

       但如果原始的文档中写为

<g id="choices"></g>

 

       在动态创建子节点后，组中子节点数量为3，对矩形子节点的遍历的遍历为：

 

var elem = svgDocument.getElementById("choices");

       var nodes = elem.childNodes;

                      

       for(var i = 0; i < nodes.length ;i ++)

       {

            alert(nodes.item(i).nodeName);

       }

 

       可见遍历循环的条件取决于原始文档中节点的写法，这是我们不希望的。因此，正确的方法是， 总是遍历所有子节点，然后根据节点的名称进行过滤。

 

              var elem = svgDocument.getElementById("choices ");

        var nodes = elem.getChildNodes;

      

            for(i = 0;i < nodes.length ;i ++)

              {

                         if(nodes.item(i).nodeName == "#text")

                                continue;

                           

                            // Do something

              }

 

       或者

 

              var elem = svgDocument.getElementById("choices ");

        var nodes = elem.getChildNodes;

      

            for(i = 0;i < nodes.length ;i ++)

              {

                         if(nodes.item(i).nodeName == "rect")

{

                                   // Do something

}

              }

 

       特别是在编写可以不同的SVG浏览器中移植的代码时，使用上述方式尤为重要，因为不同的浏览器对空白处理子是不一样的。