原生JS解析XML文档

今天分享一下用js解析XMl的过程：

下面是我将要解析的XML文档（PictureResources.xml）：

<?xml version="1.0" encoding="utf-8"?>
<PictureConfig xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<BaseRoot>http://192.98.12.174:8086/gsWeb/Picture</BaseRoot>
<WallMapRoot>WallMaps</WallMapRoot>
<PictureListRoot>PitureList</PictureListRoot>
<WallMaps node="北京市挂图">
<WallMap>
<id>w_1</id>
<name>北京市挂图1</name>
<tileName>wm1</tileName>
<tileFolder>Tiles</tileFolder>
<tileExtension>.png</tileExtension>
<thumbImageName>PREVIEW.JPG</thumbImageName>
<beginLevel>0</beginLevel>
<endLevel>2</endLevel>
<totalLevels>3</totalLevels>
</WallMap>
</WallMaps>
<WallMaps node="北京市挂图">
<WallMap>
<id>w_2</id>
<name>北京市挂图1</name>
<tileName>wm2</tileName>
<tileFolder>Tiles</tileFolder>
<tileExtension>.png</tileExtension>
<thumbImageName>PREVIEW.JPG</thumbImageName>
<beginLevel>0</beginLevel>
<endLevel>2</endLevel>
<totalLevels>3</totalLevels>
</WallMap>
</WallMaps>
<PictureList node="北京图册1">
<PitureInfo>
<id>p_i_id_1</id>
<name>北京市图册1</name>
<dataName>TJ0</dataName>
<thumbImageName>PREVIEW.JPG</thumbImageName>
<coverName>Cover1.jpg</coverName>
<Tiles>
<Tile>
<id>dfsg1</id>
<tileName>wm1</tileName>
<tileFolder>Tiles1</tileFolder>
<tileExtension>.png</tileExtension>
<beginLevel>0</beginLevel>
<endLevel>1</endLevel>
<totalLevels>2</totalLevels>
</Tile>
<Tile>
<id>dfsg2</id>
<tileName>wm5</tileName>
<tileFolder>Tiles5</tileFolder>
<tileExtension>.png</tileExtension>
<beginLevel>0</beginLevel>
<endLevel>1</endLevel>
<totalLevels>2</totalLevels>
</Tile>
<Tile>
<id>dfsg3</id>
<tileName>wm8</tileName>
<tileFolder>Tiles8</tileFolder>
<tileExtension>.png</tileExtension>
<beginLevel>0</beginLevel>
<endLevel>1</endLevel>
<totalLevels>2</totalLevels>
</Tile>
<Tile>
<id>dfsg4</id>
<tileName>wm9</tileName>
<tileFolder>Tiles9</tileFolder>
<tileExtension>.png</tileExtension>
<beginLevel>0</beginLevel>
<endLevel>1</endLevel>
<totalLevels>2</totalLevels>
</Tile>
<Tile>
<id>dfsg5</id>
<tileName>wm50</tileName>
<tileFolder>Tiles50</tileFolder>
<tileExtension>.png</tileExtension>
<beginLevel>0</beginLevel>
<endLevel>3</endLevel>
<totalLevels>4</totalLevels>
</Tile>
<Tile>
<id>dfsg6</id>
<tileName>wm60</tileName>
<tileFolder>Tiles60</tileFolder>
<tileExtension>.png</tileExtension>
<beginLevel>0</beginLevel>
<endLevel>1</endLevel>
<totalLevels>2</totalLevels>
</Tile>
<Tile>
<id>dfsg7</id>
<tileName>wm90</tileName>
<tileFolder>Tiles90</tileFolder>
<tileExtension>.png</tileExtension>
<beginLevel>0</beginLevel>
<endLevel>1</endLevel>
<totalLevels>2</totalLevels>
</Tile>
</Tiles>
</PitureInfo>
</PictureList>
<PictureList node="北京图册3">
<PitureInfo>
<id>p_i_id_2</id>
<name>北京市图册1</name>
<dataName>TJ1</dataName>
<thumbImageName>PREVIEW.JPG</thumbImageName>
<coverName>Cover2.jpg</coverName>
<Tiles>
<Tile>
<id>dfsg1</id>
<tileName>wm1</tileName>
<tileFolder>Tiles1</tileFolder>
<tileExtension>.png</tileExtension>
<beginLevel>0</beginLevel>
<endLevel>1</endLevel>
<totalLevels>2</totalLevels>
</Tile>
<Tile>
<id>dfsg2</id>
<tileName>wm5</tileName>
<tileFolder>Tiles5</tileFolder>
<tileExtension>.png</tileExtension>
<beginLevel>0</beginLevel>
<endLevel>1</endLevel>
<totalLevels>2</totalLevels>
</Tile>
<Tile>
<id>dfsg3</id>
<tileName>wm8</tileName>
<tileFolder>Tiles8</tileFolder>
<tileExtension>.png</tileExtension>
<beginLevel>0</beginLevel>
<endLevel>1</endLevel>
<totalLevels>2</totalLevels>
</Tile>
<Tile>
<id>dfsg4</id>
<tileName>wm9</tileName>
<tileFolder>Tiles9</tileFolder>
<tileExtension>.png</tileExtension>
<beginLevel>0</beginLevel>
<endLevel>1</endLevel>
<totalLevels>2</totalLevels>
</Tile>
<Tile>
<id>dfsg5</id>
<tileName>wm50</tileName>
<tileFolder>Tiles50</tileFolder>
<tileExtension>.png</tileExtension>
<beginLevel>0</beginLevel>
<endLevel>3</endLevel>
<totalLevels>4</totalLevels>
</Tile>
<Tile>
<id>dfsg6</id>
<tileName>wm60</tileName>
<tileFolder>Tiles60</tileFolder>
<tileExtension>.png</tileExtension>
<beginLevel>0</beginLevel>
<endLevel>1</endLevel>
<totalLevels>2</totalLevels>
</Tile>
<Tile>
<id>dfsg7</id>
<tileName>wm90</tileName>
<tileFolder>Tiles90</tileFolder>
<tileExtension>.png</tileExtension>
<beginLevel>0</beginLevel>
<endLevel>1</endLevel>
<totalLevels>2</totalLevels>
</Tile>
</Tiles>
</PitureInfo>
</PictureList>
</PictureConfig>

然后我通过原生的JS来完成解析，将该XML文件转成一个JS对象，然后打印到浏览器，这里我们需要考虑浏览器的兼容性，另外一点我在这里是加载的XMl文件，而不是解析XML字符串。

js解析的代码：

var PictureConfig = {

xmlPath : "xml/PictureResources.xml",
xmlDoc : "",

//最终结果存储
result : {
BaseRoot : "",
WallMapRoot : "",
PictureListRoot : "",
WallMaps : {
node : ""
},
PictureList : {
node : ""
}
},

//判断浏览器类型
ParseBrower : function(){
//支持IE内核
if (!window.DOMParser && window.ActiveXObject){
this.IEParseXML();
}
else if(window.DOMParser && document.implementation && document.implementation.createDocument){
this.OtherParseXML();
}
},

//针对IE内核
IEParseXML : function(){
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false; //该功能不需要在xml文件读取完成之前去完成其他的操作，所以关闭异步
/*xmlDoc.loadXML(xmlString); loadXML方法载入xml字符串*/
xmlDoc.load(this.xmlPath);

var BaseRoot = xmlDoc.documentElement.childNodes(0).firstChild.data;
this.result.BaseRoot = BaseRoot;
var WallMapRoot = xmlDoc.documentElement.childNodes(1).firstChild.data;
this.result.WallMapRoot = WallMapRoot;
var PictureListRoot = xmlDoc.documentElement.childNodes(2).firstChild.data;
this.result.PictureListRoot = PictureListRoot;
//得到所有的WallMaps节点
var wallMapsList = xmlDoc.getElementsByTagName('WallMaps');
var m = 0;
var arrayWallMaps = new Array();
for(var i=0; i<wallMapsList.length; i++){
var node = wallMapsList[i].getAttribute('node');
this.result.WallMaps.node = node;
//得到每个WallMaps下的所有WallMap节点
var wallMapList = wallMapsList[i].childNodes;
for(var j=0; j<wallMapList.length; j++){
//取到每个WallMap下的属性值
var wallMap = wallMapList[j];
var id = wallMap.childNodes[0].text;
var name = wallMap.childNodes[1].text;
var tileName = wallMap.childNodes[2].text;
var tileFolder = wallMap.childNodes[3].text;
var tileExtension = wallMap.childNodes[4].text;
var thumbImageName = wallMap.childNodes[5].text;
var beginLevel = wallMap.childNodes[6].text;
var endLevel = wallMap.childNodes[7].text;
var totalLevels = wallMap.childNodes[8].text;

var object = new Object();
object.id = id;
object.name = name;
object.tileName = tileName;
object.tileFolder = tileFolder;
object.tileExtension = tileExtension;
object.thumbImageName = thumbImageName;
object.beginLevel = beginLevel;
object.endLevel = endLevel;
object.totalLevels = totalLevels;
arrayWallMaps[m] = object;
m = m+1;
}
this.result.WallMaps.wallMapData = arrayWallMaps;
}

//得到所有的PictureList节点
var n = 0;
var arrayPictureList = new Array();
var pictureList = xmlDoc.getElementsByTagName('PictureList');
for(var i=0; i<pictureList.length; i++){
var node = pictureList[i].getAttribute('node');
this.result.PictureList.node = node;
//得到每个PictureList下的所有PictureInfo节点
var pictureInfoList = pictureList[i].childNodes;
for(var j=0; j<pictureInfoList.length; j++){
//取到每个PictureInfo下的属性值
var pictureInfo = pictureInfoList[j];
var id = pictureInfo.childNodes[0].text;
var name = pictureInfo.childNodes[1].text;
var dataName = pictureInfo.childNodes[2].text;
var thumbImageName = pictureInfo.childNodes[3].text;
var coverName = pictureInfo.childNodes[4].text;

var object = new Object();
object.id = id;
object.name = name;
object.dataName = dataName;
object.thumbImageName = thumbImageName;
object.coverName = coverName;
var arrayTile = new Array();
var z = 0;
//取到Tiles下面的所有Tile节点
var tiles = pictureInfo.childNodes[5];
var tileList = tiles.childNodes;
for(var k=0; k<tileList.length; k++){
var tile = tileList[k];
//取到各个tile的属性值
var tile_id = tile.childNodes[0].text;
var tileName = tile.childNodes[1].text;
var tileFolder = tile.childNodes[2].text;
var tileExtension = tile.childNodes[3].text;
var beginLevel = tile.childNodes[4].text;
var endLevel = tile.childNodes[5].text;
var totalLevel = tile.childNodes[6].text;

var mytile = new Object();
mytile.id = tile_id;
mytile.tileName = tileName;
mytile.tileFolder = tileFolder;
mytile.tileExtension = tileExtension;
mytile.beginLevel = beginLevel;
mytile.endLevel = endLevel;
mytile.totalLevels = totalLevels;
arrayTile[z] = mytile;
z++;
}
object.Tiles = arrayTile;
arrayPictureList
= object;
n++;
}
this.result.PictureList.pictureListData = arrayPictureList;
}
console.log('result: ' + this.result);
},

//针对Firefox,Opera等其它浏览器
OtherParseXML : function(){
//解析XML字符串
/*var parser = new DOMParser();
xmlDoc = parser.parseFromString(this.xmlPath, "text/xml");*/
//解析XML文档
xmlDoc = new Document();
xmlDoc.async= false;
xmlDoc.load(this.xmlPath);

var PictureConfig = xmlDoc.documentElement.childNodes;
var BaseRoot = PictureConfig.item(1).firstChild.nodeValue;
this.result.BaseRoot = BaseRoot;
var WallMapRoot = PictureConfig.item(3).firstChild.nodeValue;
this.result.WallMapRoot = WallMapRoot;
var PictureListRoot = PictureConfig.item(5).firstChild.nodeValue;
this.result.PictureListRoot = PictureListRoot;
var wallMapsList = xmlDoc.getElementsByTagName('WallMaps');
var m = 0;
var arrayWallMaps = new Array();
//遍历所有的WallMaps
for(var i=0; i<wallMapsList.length; i++){
var node = wallMapsList[i].getAttribute('node');
//取出每个WallMaps里面的WallMap节点
this.result.WallMaps.node = node;
var wallMapList = wallMapsList[i].getElementsByTagName('WallMap');
//取到每个WallMap的属性值
for(var j=0; j<wallMapList.length; j++){
var wallMap = wallMapList[j];
var id =wallMap.childNodes.item(1).firstChild.nodeValue;
var name =wallMap.childNodes.item(3).firstChild.nodeValue;
var tileName =wallMap.childNodes.item(5).firstChild.nodeValue;
var tileFolder =wallMap.childNodes.item(7).firstChild.nodeValue;
var tileExtension =wallMap.childNodes.item(9).firstChild.nodeValue;
var thumbImageName =wallMap.childNodes.item(11).firstChild.nodeValue;
var beginLevel =wallMap.childNodes.item(13).firstChild.nodeValue;
var endLevel =wallMap.childNodes.item(15).firstChild.nodeValue;
var totalLevels =wallMap.childNodes.item(17).firstChild.nodeValue;

var object = new Object();
object.id = id;
object.name = name;
object.tileName = tileName;
object.tileFolder = tileFolder;
object.tileExtension = tileExtension;
object.thumbImageName = thumbImageName;
object.beginLevel = beginLevel;
object.endLevel = endLevel;
object.totalLevels = totalLevels;
arrayWallMaps[m] = object;
m = m+1;
}
this.result.WallMaps.wallMapData = arrayWallMaps;
}

var n = 0;
var arrayPictureList = new Array();
var pictureList = xmlDoc.getElementsByTagName('PictureList');
//遍历所有的PictureList
for(var i=0; i<pictureList.length; i++){
var node = pictureList[i].getAttribute('node');
this.result.PictureList.node = node;
//取出每个pictureList里面的PitureInfo节点

var pictureInfoList = pictureList[i].getElementsByTagName('PitureInfo');
//取到每个PitureInfo的属性值
for(var j=0; j<pictureInfoList.length; j++){
var pictureInfo = pictureInfoList[j];
var id = pictureInfo.childNodes.item(1).firstChild.nodeValue;
var name = pictureInfo.childNodes.item(3).firstChild.nodeValue;
var dataName = pictureInfo.childNodes.item(5).firstChild.nodeValue;
var thumbImageName = pictureInfo.childNodes.item(7).firstChild.nodeValue;
var coverName = pictureInfo.childNodes.item(9).firstChild.nodeValue;

var object = new Object();
object.id = id;
object.name = name;
object.dataName = dataName;
object.thumbImageName = thumbImageName;
object.coverName = coverName;
var arrayTile = new Array();
var z = 0;

//取到每个Tiles下面的每个Tile
var tiles = pictureInfo.childNodes.item(11);
var tileList = tiles.getElementsByTagName('Tile');
for(var k=0; k<tileList.length; k++){
var tile = tileList[k];
var tile_id = tile.childNodes.item(1).firstChild.nodeValue;
var tileName = tile.childNodes.item(3).firstChild.nodeValue;
var tileFolder = tile.childNodes.item(5).firstChild.nodeValue;
var tileExtension = tile.childNodes.item(7).firstChild.nodeValue;
var beginLevel = tile.childNodes.item(9).firstChild.nodeValue;
var endLevel = tile.childNodes.item(11).firstChild.nodeValue;
var totalLevels = tile.childNodes.item(13).firstChild.nodeValue;
console.log("Tile id:" + tile_id);
var mytile = new Object();
mytile.id = tile_id;
mytile.tileName = tileName;
mytile.tileFolder = tileFolder;
mytile.tileExtension = tileExtension;
mytile.beginLevel = beginLevel;
mytile.endLevel = endLevel;
mytile.totalLevels = totalLevels;
arrayTile[z] = mytile;
z++;
}
object.Tiles = arrayTile;
arrayPictureList
= object;
n++;
}
this.result.PictureList.pictureListData = arrayPictureList;
}
console.log('result: ' + this.result);
}

};
大家可以在浏览器的开发者工具开一下解析出来的对象。