问题:jQuery中遍历XML文件时候,获取子节点children不支持的情况(已解决) 问题描述: 解决方法:

今天在写一个基于 jquery 的读取xml文件的程序时候,需要遍历xml的节点。

代码片段如下:

 1 function parse_xml_node(parent,result){
 2     // result[$(parent)[0].nodeName] = {};
 3     if( false == ($(parent)[0].nodeName in result)){
 4         result[$(parent)[0].nodeName] = {};
 5     }
 6 
 7     // 获取子节点
 8     var childs = $(parent)[0].children;
 9     // 遍历子节点
10     $.each(childs,function(i,val){
11         if(i==0){
12             result[$(parent)[0].nodeName]['children'] = [];
13         }
14         result[$(parent)[0].nodeName]['children'].push({});
15         parse_xml_node($(this),result[$(parent)[0].nodeName]['children'][i]); // 函数递归
16     });
17 
18     return result;
19 }

其中,parent 代表我需要遍历的父级节点,然后对获取到的子节点进行遍历,也就是 $.each(childs,function(){}) 的程序。

上述程序,采用递归的方式,一层层遍历子节点,直到遍历完成。

由于是在 Chrome 浏览器下开发的,所以在 Chrome 浏览器中,解析的是正确的,而在 IE 下却没有解析到子节点。

解决方法:

IE浏览器下,在上述程序 Line 8 地方打断点,发现:$(parent)[0] 没有 children 属性,度娘后也发现 IE 不支持 children,但是有 childNode 属性。

而 childNode 节点属性又分为 TextNode(文本节点)和 元素节点。

找到了问题的原因,就修改程序如下:

 1 var childs = $(parent)[0].children || (function(){
 2     // 兼容IE
 3     var children = [];
 4     $.each($(parent)[0].childNodes,function(i,e){
 5         if (Object.prototype.toString.call(e) === "[object Element]") {
 6             // 判断是元素节点
 7             children.push(e);
 8         }
 9     });
10     return children;
11 })();

当程序运行时,获取到 children 属性,就返回 children的属性值,若没有,则 children 值为 undefined。执行 || 之后的程序。

如此改动后,问题解决。

注意:|| 在此处充当短路运算的作用。