DOM操作XML

前一篇博客介绍DOM操作HTML，主要是通过控制节点属性和方法，这篇博客中我们主要介绍内容为：

1、  JavaScript如何装载XML文件

2、  DOM如何操作XML

3、  如何解决浏览器处理空白信息的差异

一、JavaScript如何装载XML文件：

        XML是一种可扩展的标记语言，我们用来传输和存储数据，我们将数据赋予这种载体，传到前端的同时，需要解析XML，这里采用的是javascript解析xml，至于如何解析，就离不开上一节博客中介绍的DOM文档对象模型。虽然这种解析方式存在弊端，但是相对于用户体验度来说，这种方式的解析也占有一定的优势。

在HTML文件中引入JS文件方式和以前一样：

在HTML文件中编写JS代码：

IE浏览器装载XML文档对象：

if(window.ActiveXObject){
    //IE浏览器装载xml文档的对象
    var activexName=["MSXML2.DOMDocument","Miscrosoft.XmlDom"];
    var xmlObj;
    for(var i=0;i<activexName.length;i++){
    try{
        xmlObj=new ActiveXObject(activexName[i]);
        break;
       }catch(e){
                
     }            
  }

设置同步方式装载XML数据

     xmlObj.async=false;

装载XML的文件：

     xmlObj.load(xmldoc);

装载XML的字符串：

     xmlObj.loadXML(xmldoc);

非IE浏览器装载XML文档对象：

//装载XML文件：
xmlObj=document.implementation.createDocument("","",null);
//装载XML数据：
xmlObj.load(xmldoc);

//装载XML字符串：
xmlObj=new DOMParser();
var docRoot=xmlObj.parseFromString(xmldoc,"text/xml");
return docRoot.documentElement;

二、DOM操作XML

对XML装载完成之后就是利用XPATH技术获取XML中的内容，XPATH技术类似于SQL查询语言，都是通过一种表达式去查询满足条件的信息，下面是编写的一段XML文件代码：

<?xml version="1.0" encoding="UTF-8"?>
<books>
    <book isdn="0001">
        <author>Wang</author>
        <name>AJAX Professional</name>
        <price>35</price>
    </book>
    <book isdn="0002">
        <author>Lee</author>
        <name>AJAX In Action</name>
        <price>65</price>
    </book>
    <book>
        <author>Zhu</author>
        <name>AJAX For Dummies</name>
        <price>40</price>
    </book>
    <author>aaa</author>
</books>

编写xpath.js文件：

    XPATH技术的核心就是两个方法的使用：selectNodes()和selectSingleNode()。

   selectNodes()方法表示根据XPATH表达式找到满足条件的所有节点

其中的两个参数为需要查找的节点以及xpath表达式

function selectNodes(xmldoc,sXpath){
     if(window.ActiveXObject){
        //IE浏览器
        return xmldoc.selectNode(sXpath);
    }else if(window.XPathEvaluator){
        //非IE浏览器
        var xpathObj=new XPathEvaluator();
        if(xpathObj){
            var result=xpathObj.evaluate(sXpath,xmldoc,null,XPathResult.ORDERED_NODE_ITERATOR_TYPE,null);
            var nodes=new Array();
            var node;
            while((node=result.iterateNext())!==null){
                nodes.push(node);
            }
            return nodes;
        }else{
            return null;
        }
    }else{
        return null;
    }
}

    selectSingleNode()方法表示根据XPATH表达式找到满足条件的第一个节点

其中的两个参数和selectNode()方法一样

function selectSingleNode(xmldoc,sXpath){
    if(window.ActiveXObject){
        //IE浏览器
        return xmldoc.selectSingleNode(sXpath);
    }else if(window.XPathEvaluator){
        //非IE浏览器
        var xpathObj=new XPathEvaluator();
        if(xpathObj){
            varresult=xpathObj.evaluate(sXpath,xmldoc,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null);
            return result.singleNodeValue;
        }else{
            return null;
        }
    }else{
        return null;
    }

}

    evaluate()方法返回的是一个节点列表，得到节点列表后再用iterateNext()方法来遍历这个列表中的所有节点。而ORDERED_NODE_ITERATOR_TYPE就是节点的列表，按照文档中节点的属性排列。

 

通过调用这两个方法来获取不同函数值，这样很方便的找到你想要的节点：
var rootElement=loadXML(true,"XPATH.xml");
//查找所有的author元素节点
//关键就是如何表示元素节点在DOM树中的路径
 //绝对路径/books/book/author
//相对路径
//全文档搜索法
//author写法 //book/author
varauthor1=selectNodes(rootElement,"/books/book/author");
//查找属性节点
//关键是先找到包含属性节点的元素节点
var isdn1=selectNodes(rootElement,"/books/book/@isdn");
//查找文本节点
//关键是找到包含文本节点的那个元素节点
vartext1=selectNodes(rootElement,"/books/book/name/text()");
//有条件的查找元素节点
//需要首先找到元素节点，然后在增加条件表达式
varbook1=selectNodes(rootElement,"/books/book[@isdn]");
//多个条件与关系的查找元素节点
//需要首先找到元素节点，然后每一个查询条件写到中括号中
var bookA1=selectNodes(rootElement,"/books/book[@isdn='0002'][price>35]");
//多个条件或关系的查找元素节点
//需要首先找到元素节点，然后每一个查询条件写成一个XPATH的表达式，这些表达式用|组合，表达或关系
varbookO1=selectNodes(rootElement,"/books/book[@isdn='0002'] |/books/book[price>35]”);

XPath:俗语“路径表达式”，及通过一种表示路径的表达式来查找我们需要的信息。

三、浏览器处理空白信息差异？

function removeBlank(doc){
if(doc.childNodes.length>1){
for(var loopIndex=0;loopIndex++){
var currentNode=doc.childNodes[loopIndex];
	if(currentNode.nodeType===1){
		removeBlank(currentNode);
	}
if(currentNode.nodeType===3 &&(/^\s+$/.test(currentNode.nodeValue))){
	doc.removeChild(doc.childNodes[loopIndex--]);
<span style="white-space:pre">	</span>}
    }
}

四、将DOM对象序列化成表示XML的字符串

IE浏览器中有一个xml的属性，可以获得对象所对应的XML字符串

非IE，新建一个XMLSerializer的对象，然后使用serialize To String方法将DOM对象转换成XML对象。

//封装不同浏览器对象序列化成DOM表示XML的字符串
 function serializeDOM(xmldoc){ 
if(xmldoc.xml){ 
//IE浏览器 
return xmldoc.xml;
 }else if(window.XMLSerializer){ 
//非IE
 	var seria=new XMLSerializer(); 
<span style="white-space:pre">	</span>return seria.serializeToString(xmldoc); 
<span style="white-space:pre">	</span>} 
   return null;
 }

    分析getElementById()在解析XML时是否合适？

首先XML中每一个元素节点不一定有id属性,其次XML中的两个元素节点有两个相同的id属性，在使用这个方法就不能找到唯一的节点，getElementsByTagName()方法一次获得的节点太多，还需要进行遍历获取数据，比较麻烦。最好的方法我们采用XPATH技术。