JavaScript解析XML文件

今天get了一个新技能，用js来解析xml文件，xml格式的数据很普遍，在ajax里有个responseXML就返回的是xml格式的数据，下面是js如何解析xml文件，获得里面的数据。

---

一. 创建xmlDocument对象

/*声明XML对象*/
var XML = {};

XML.createDocument = function(){
    /*firefox*/
    if (document.implementation && document.implementation.createDocument)
        return document.implementation.createDocument("", "", null);
    /*IE*/
    else if(!window.DOMParser && window.ActiveXObject){
        var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0',
        'Microsoft.XMLDOM'];
        for(var i=0;i<xmlDomVersions.length;i++){
            try{
                    xmlDoc = new ActiveXObject(xmlDomVersions[i]);
                    break;
            }catch(e){

            }
        }
    }
};

有上面的代码可以总结出，该方法只被firefox和IE浏览器支持
firefox的创建方法中：
第一个参数是包含文档所使用的命名空间URI的字符串；
第二个参数是包含文档根元素名称的字符串；
第三个参数是要创建的文档类型（也称为doctype）
在IE中，所支持的xmlDom的版本不同，所以按照每个浏览器所支持的版本创建。

二. 加载xml文件的方法

XML.load = function(urlname){
    var xmldoc = XML.createDocument();
    xmldoc.load(urlname);
    return xmldoc;
};

三. 输出xml文件的内容

function showMess(){
    var xmldoc = XML.load("test.xml");
    var tagnames = xmldoc.getElementsByTagName("student");
    alert(tagnames.length);
    console.log(tagnames.length);
    for (var i = 0; i < tagnames.length; i++){
        var name = tagnames[i].getElementsByTagName("name");
        var age = tagnames[i].getElementsByTagName("age");
        var sex = tagnames[i].getElementsByTagName("sex");
        console.log(name[0].firstChild.data);
        console.log(age[0].firstChild.data);
        console.log(sex[0].firstChild.data);
    }
}

xml支持用getElementsByTagName（）方法来获得节点名，对于节点每个节点也可以有自己的属性，必须显式的调用，即：element.getAttribute("*"); element.setAttribute("key","value")

xml文件：

<?xml version="1.0" encoding="utf-8" ?>
<class>
  <student>
    <name>lily</name>
    <age>34</age>
    <sex>female</sex>
  </student>
  <student>
    <name>jack</name>
    <age>32</age>
    <sex>male</sex>
  </student>
  <student>
    <name>jhon</name>
    <age>56</age>
    <sex>male</sex>
  </student>
</class>

---

好多操作都是和html相通的，所以掌握还是比较简单的。