原生JS解析XML文档
来源：互联网 发布：知乎人均985 编辑：程序博客网 时间：2024/05/18 01:56
今天分享一下用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[n] = 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();//遍历所有的WallMapsfor(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');//遍历所有的PictureListfor(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[n] = object;n++;}this.result.PictureList.pictureListData = arrayPictureList;}console.log('result: ' + this.result); }};大家可以在浏览器的开发者工具开一下解析出来的对象。- 原生JS解析XML文档
- 加载xml文档(原生JS版及jQuery版)
- js 通过DOM方式解析XML文档
- Ajax解析html、xml、json、js原生方式、jquery方式
- js原生offsetParent解析
- 【iOS开发】原生XML解析
- XML数据格式原生解析器
- JS解析XML文档中的数据(兼容各个浏览器)
- js解析xml文档设置 同步/异步加载
- AJAX 原生js以及Jquery解析html,xml,txt,json格式文本
- Dom解析XML文档
- jdom解析xml文档
- Java解析XML文档
- JAVA 解析XML文档
- DOM 解析 XML 文档
- DOM解析XML文档
- TinyXML解析xml文档
- jdom解析xml文档
- 多路复用之poll
- 微软2013年校园实习生招聘笔试题及答案
- 动态SQL解决PIVOT透视多列的问题
- 关于Phalcon和Yaf比较
- 永久勘误:微软等面试100题系列，答案V0.4版[第41-60题答案]
- 原生JS解析XML文档
- ISAP模板 邻接表
- gdb显示内存命令
- 为何RTX客户端不能登录服务器，提示“登录超时”？
- Apk签名时报错Export aborted because fatal lint errors were found
- 永久勘误:微软等面试100题答案V0.3版[第21-40题答案]
- Let the Balloon Rise
- 【转】学习方法
- N 后问题
