第一百二十六节，JavaScript，XPath操作xml节点

学习要点：

1.IE中的XPath

2.W3C中的XPath

3.XPath跨浏览器兼容

XPath是一种节点查找手段，对比之前使用标准DOM去查找XML中的节点方式，大大降低了查找难度，方便开发者使用。但是，DOM3级以前的标准并没有就XPath做出规范；直到DOM3在首次推荐到标准规范行列。大部分浏览器实现了这个标准，IE则以自己的方式实现了XPath。

一．IE中的XPath

在IE8及之前的浏览器，XPath是采用内置基于ActiveX的XML DOM文档对象实现的。在每一个节点上提供了两个方法：selectSingleNode()和selectNodes()。

selectSingleNode()方法接受一个XPath模式（也就是查找路径），找到匹配的第一个节点并将它返回，没有则返回null。

selectSingleNode()方法，查找xml节点，查找单一节点如果有相同的节点只返回第一个节点，有参参数是要查找的节点路径，此方法只支持IE并且是IE9以下
使用方式
XML DOM对象.selectSingleNode('要查找的节点路径')

var xml = '<root><user id="5">Lee</user><user id="6">Koko</user></root>';  //定义xml字符串
var xmldom = getXMLDOM(xml); //创建XML DOM对象,接收xml字符串
//通过XML DOM对象查找xml标签节点
var chzhao = xmldom.selectSingleNode('root/user'); //selectSingleNode()方法，查找xml节点，有参参数是要查找的节点路径，此方法只支持IE并且是IE9以下
alert(serializeXML(chzhao)); //执行序列化函数，序列化查找到的节点
alert(chzhao.tagName); //打印查找到的元素标签名称
alert(chzhao.firstChild.nodeValue); //打印查找到的元素文本内容//首先，我们需要跨浏览器获取XML DOM
function getXMLDOM(xmlStr) {  //自定义跨浏览器创建xml DOM对象，接收一个参数xml字符串var xmlDom = null;  //初始化一个对象if (typeof window.DOMParser != 'undefined') {        //判断DOMParser类型不等于undefined说明支持//创建DOMParser对象，并且创建xml DOM对象xmlDom = (new DOMParser()).parseFromString(xmlStr, 'text/xml');//获取错误信息的parsererror标签var errors = xmlDom.getElementsByTagName('parsererror');//判断错误信息标签返回集合长度大于0，说明xml有错误if (errors.length > 0) {//创建一个错误对象，获取到第一个错误标签，并且获取到他的文本内容throw new Error('XML解析错误：' + errors[0].firstChild.nodeValue);}//如果不支持DOMParser类型，尝试IE的方法} else if (typeof window.ActiveXObject != 'undefined') {    //判断ActiveXObject类型不等于undefined说明支持var version = [  //创建一个数组，元素分别为3个xml版本'MSXML2.DOMDocument.6.0','MSXML2.DOMDocument.3.0','MSXML2.DOMDocument'];for (var i = 0; i < version.length; i++) {  //根据数组的长度循环次数try {//尝试着执行每次循环到的xml版本，创建xml对象xmlDom = new ActiveXObject(version[i]);} catch (e) {  //如果出错跳过执行第二次循环//跳过
            }}xmlDom.loadXML(xmlStr);  //载入xml字符串if (xmlDom.parseError != 0) {  //判断载入xml错误返回代码，如果不等于0说明xml有错//创建一个错误对象，返回错误的解释信息throw new Error('XML解析错误：' + xmlDom.parseError.reason);}} else {  //如果 上面两种方式都不支持//创建一个错误对象，抛出您所使用的系统或浏览器不支持XML DOM！throw new Error('您所使用的系统或浏览器不支持XML DOM！');}return xmlDom;  //最后返回创建的xmlDOM对象
}//其次，我们还必须跨浏览器序列化XML
function serializeXML(xmlDom) {  //序列化xml函数，接收xmlDOM对象对象var xml = '';  //初始化一个变量等于空字符串if (typeof XMLSerializer != 'undefined') {  //判断XMLSerializer类型，不等于undefined，说明支持序列化//给xml重新赋值，创建XMLSerializer对象，并且使用serializeToString方法序列化xml = (new XMLSerializer()).serializeToString(xmlDom);//如果不支持XMLSerializer类型} else if (typeof xmlDom.xml != 'undefined') { //判断IE方式xmlDOM对象下的xml属性是否等于undefined，不等于说明支持//给xml重新赋值，序列化xmlxml = xmlDom.xml;} else { //如果上面两种都不支持//创建一个错误对象，抛出无法解析XML！错误信息throw new Error('无法解析XML！');}return xml; //最后返回序列化
}

上下文节点

上下文节点：我们通过xmlDom这个对象实例调用方法，而xmlDom这个对象实例其实就是一个上下文节点，这个节点指针指向的是根，也就是root元素之前。那么如果我们把这个指针指向user元素之前，那么结果就会有所变化。

通过xmlDom，并且使用root/user的路径

//通过xmlDom，并且使用root/user的路径var user = xmlDom.selectSingleNode('root/user');alert(user.tagName);                                                //user

通过xmlDom.documentElement，并且使用user路径，省去了root

//通过xmlDom.documentElement，并且使用user路径，省去了rootvar user = xmlDom.documentElement.selectSingleNode('user');alert(user.tagName);                                                //user

通过xmlDom，并且使用user路径，省去了root

//通过xmlDom，并且使用user路径，省去了rootvar user = xmlDom.selectSingleNode('user');alert(user.tagName);                                                //找不到了，出错

PS：xmlDom和xmlDom.documentElement都是上下文节点，主要就是定位当前路径查找的指针，而xmlDom对象实例的指针就是在最根上。

XPath常用语法

通过user[n]来获取第n+1条节点，PS：XPath其实是按1为起始值的，也就是通过索引位置来获取对应的标签

//通过user[n]来获取第n+1条节点，PS：XPath其实是按1为起始值的
var user = xmlDom.selectSingleNode('root/user[1]');
alert(user.xml);

通过text()获取节点内的值

//通过text()获取节点内的值
var user = xmlDom.selectSingleNode('root/user/text()');
alert(user.xml);
alert(user.nodeValue);

通过//user 表示在整个xml获取到user节点，不关心任何层次，通过双斜杠获取节点

//通过//user表示在整个xml获取到user节点，不关心任何层次
var user = xmlDom.selectSingleNode('//user');
alert(user.xml);

通过root//user表示在root包含的层次下获取到user节点，在root内不关心任何层次，通过指定节点下双斜杠获取节点

//通过root//user表示在root包含的层次下获取到user节点，在root内不关心任何层次
var user = xmlDom.selectSingleNode('root//user');
alert(user.tagName);

通过root/user[@id=6]表示获取user中id=6的节点，通过id获取指定节点

//通过root/user[@id=6]表示获取user中id=6的节点
var user = xmlDom.selectSingleNode('root/user[@id=6]');
alert(user.xml);

PS：更多的XPath语法，可以参考XPath手册或者XML DOM手册进行参考，这里只提供了最常用的语法。

selectNodes()方法，查找xml节点，返回相同名称的节点集合，有参参数是要查找的节点路径，此方法只支持IE并且是IE9以下
使用方式
XML DOM对象.selectNodes('要查找的节点路径')

var xml = '<root><user id="5">Lee</user><user id="6">Koko</user></root>';  //定义xml字符串
var xmldom = getXMLDOM(xml); //创建XML DOM对象,接收xml字符串
//通过XML DOM对象查找xml标签节点
var chzhao = xmldom.selectNodes('root/user'); //selectNodes()方法，查找xml节点，返回相同名称的节点集合，有参参数是要查找的节点路径，此方法只支持IE并且是IE9以下
alert(chzhao.length); //查看节点集合长度
alert(serializeXML(chzhao[0])); //通过索引，执行序列化函数，序列化查找到的节点
alert(chzhao[0].tagName); //通过索引打印查找到的元素标签名称
alert(chzhao[0].firstChild.nodeValue); //通过索引打印查找到的元素文本内容//首先，我们需要跨浏览器获取XML DOM
function getXMLDOM(xmlStr) {  //自定义跨浏览器创建xml DOM对象，接收一个参数xml字符串var xmlDom = null;  //初始化一个对象if (typeof window.DOMParser != 'undefined') {        //判断DOMParser类型不等于undefined说明支持//创建DOMParser对象，并且创建xml DOM对象xmlDom = (new DOMParser()).parseFromString(xmlStr, 'text/xml');//获取错误信息的parsererror标签var errors = xmlDom.getElementsByTagName('parsererror');//判断错误信息标签返回集合长度大于0，说明xml有错误if (errors.length > 0) {//创建一个错误对象，获取到第一个错误标签，并且获取到他的文本内容throw new Error('XML解析错误：' + errors[0].firstChild.nodeValue);}//如果不支持DOMParser类型，尝试IE的方法} else if (typeof window.ActiveXObject != 'undefined') {    //判断ActiveXObject类型不等于undefined说明支持var version = [  //创建一个数组，元素分别为3个xml版本'MSXML2.DOMDocument.6.0','MSXML2.DOMDocument.3.0','MSXML2.DOMDocument'];for (var i = 0; i < version.length; i++) {  //根据数组的长度循环次数try {//尝试着执行每次循环到的xml版本，创建xml对象xmlDom = new ActiveXObject(version[i]);} catch (e) {  //如果出错跳过执行第二次循环//跳过
            }}xmlDom.loadXML(xmlStr);  //载入xml字符串if (xmlDom.parseError != 0) {  //判断载入xml错误返回代码，如果不等于0说明xml有错//创建一个错误对象，返回错误的解释信息throw new Error('XML解析错误：' + xmlDom.parseError.reason);}} else {  //如果 上面两种方式都不支持//创建一个错误对象，抛出您所使用的系统或浏览器不支持XML DOM！throw new Error('您所使用的系统或浏览器不支持XML DOM！');}return xmlDom;  //最后返回创建的xmlDOM对象
}//其次，我们还必须跨浏览器序列化XML
function serializeXML(xmlDom) {  //序列化xml函数，接收xmlDOM对象对象var xml = '';  //初始化一个变量等于空字符串if (typeof XMLSerializer != 'undefined') {  //判断XMLSerializer类型，不等于undefined，说明支持序列化//给xml重新赋值，创建XMLSerializer对象，并且使用serializeToString方法序列化xml = (new XMLSerializer()).serializeToString(xmlDom);//如果不支持XMLSerializer类型} else if (typeof xmlDom.xml != 'undefined') { //判断IE方式xmlDOM对象下的xml属性是否等于undefined，不等于说明支持//给xml重新赋值，序列化xmlxml = xmlDom.xml;} else { //如果上面两种都不支持//创建一个错误对象，抛出无法解析XML！错误信息throw new Error('无法解析XML！');}return xml; //最后返回序列化
}

二．W3C下的XPath

在DOM3级XPath规范定义的类型中，最重要的两个类型是XPathEvaluator和XPathResult。其中，XPathEvaluator用于在特定上下文对XPath表达式求值。

XPathEvaluator的方法

方法

说明

createExpression(e, n)

将XPath表达式及命名空间转化成XPathExpression

createNSResolver(n)

根据n命名空间创建一个新的XPathNSResolver对象

evaluate(e, c, n ,t ,r)

结合上下文来获取XPath表达式的值

W3C实现XPath查询节点比IE来的复杂，首先第一步就是需要得到XPathResult对象的实例。得到这个对象实例有两种方法，一种是通过创建XPathEvaluator对象执行evaluate()方法，另一种是直接通过上下文节点对象(比如xmlDom)来执行evaluate()方法。

XPathResult对象

XPathEvaluator类型

第一个方式，首先new XPathEvaluator类型，然后执行XPathEvaluator类型下的evaluate()方法来创建XPathResult对象

evaluate()方法，创建XPathResult对象有5个参数，1要查找的xml标签路径，2上下文节点对象也就是XMLDOM对象，3命名空间求解器(通常是null)，4返回结果类型，5保存结果的XPathResult对象(通常是null)。
使用方式：
XPathResult对象.evaluate(要查找的xml标签路径,XMLDOM对象,null,返回结果类型,null)

对于返回的结果类型，有10中不同的类型，常用的是红字的两个类型

常量

说明

XPathResult.ANY_TYPE

返回符合XPath表达式类型的数据

XPathResult.ANY_UNORDERED_NODE_TYPE

返回匹配节点的节点集合，但顺序可能与文档中的节点的顺序不匹配

XPathResult.BOOLEAN_TYPE

返回布尔值

XPathResult.FIRST_ORDERED_NODE_TYPE

返回只包含一个节点的节点集合，且这个节点是在文档中第一个匹配的节点

XPathResult.NUMBER_TYPE

返回数字值

XPathResult.ORDERED_NODE_ITERATOR_TYPE

返回匹配节点的节点集合，顺序为节点在文档中出现的顺序。这是最常用到的结果类型

XPathResult.ORDERED_NODE_SNAPSHOT_TYPE

返回节点集合快照，在文档外捕获节点，这样将来对文档的任何修改都不会影响这个节点列表

XPathResult.STRING_TYPE

返回字符串值

XPathResult.UNORDERED_NODE_ITERATOR_TYPE

返回匹配节点的节点集合，不过顺序可能不会按照节点在文档中出现的顺序排列

XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE

返回节点集合快照，在文档外捕获节点，这样将来对文档的任何修改都不会影响这个节点列表

PS：上面的常量过于繁重，对于我们只需要学习了解，其实也就需要两个：1.获取一个单一节、2.获取一个节点集合。

两种方式创建XPathResult对象

使用XPathEvaluator对象创建XPathResult

var xml = '<root><user id="5">Lee</user><user id="6">Koko</user></root>';  //定义xml字符串
var xmldom = getXMLDOM(xml); //创建XML DOM对象,接收xml字符串//使用XPathEvaluator对象创建XPathResult
var eva = new XPathEvaluator();  //创建XPathResult对象
//evaluate()方法，创建XPathResult对象有5个参数，1要查找的xml标签路径，2上下文节点对象也就是XMLDOM对象，3命名空间求解器(通常是null)，4返回结果类型，5保存结果的XPathResult对象(通常是null)。
var result = eva.evaluate('root/user', xmldom , null,XPathResult.FIRST_ORDERED_NODE_TYPE, null);
alert(result); //返回单一节点集合//首先，我们需要跨浏览器获取XML DOM
function getXMLDOM(xmlStr) {  //自定义跨浏览器创建xml DOM对象，接收一个参数xml字符串var xmlDom = null;  //初始化一个对象if (typeof window.DOMParser != 'undefined') {        //判断DOMParser类型不等于undefined说明支持//创建DOMParser对象，并且创建xml DOM对象xmlDom = (new DOMParser()).parseFromString(xmlStr, 'text/xml');//获取错误信息的parsererror标签var errors = xmlDom.getElementsByTagName('parsererror');//判断错误信息标签返回集合长度大于0，说明xml有错误if (errors.length > 0) {//创建一个错误对象，获取到第一个错误标签，并且获取到他的文本内容throw new Error('XML解析错误：' + errors[0].firstChild.nodeValue);}//如果不支持DOMParser类型，尝试IE的方法} else if (typeof window.ActiveXObject != 'undefined') {    //判断ActiveXObject类型不等于undefined说明支持var version = [  //创建一个数组，元素分别为3个xml版本'MSXML2.DOMDocument.6.0','MSXML2.DOMDocument.3.0','MSXML2.DOMDocument'];for (var i = 0; i < version.length; i++) {  //根据数组的长度循环次数try {//尝试着执行每次循环到的xml版本，创建xml对象xmlDom = new ActiveXObject(version[i]);} catch (e) {  //如果出错跳过执行第二次循环//跳过
            }}xmlDom.loadXML(xmlStr);  //载入xml字符串if (xmlDom.parseError != 0) {  //判断载入xml错误返回代码，如果不等于0说明xml有错//创建一个错误对象，返回错误的解释信息throw new Error('XML解析错误：' + xmlDom.parseError.reason);}} else {  //如果 上面两种方式都不支持//创建一个错误对象，抛出您所使用的系统或浏览器不支持XML DOM！throw new Error('您所使用的系统或浏览器不支持XML DOM！');}return xmlDom;  //最后返回创建的xmlDOM对象
}//其次，我们还必须跨浏览器序列化XML
function serializeXML(xmlDom) {  //序列化xml函数，接收xmlDOM对象对象var xml = '';  //初始化一个变量等于空字符串if (typeof XMLSerializer != 'undefined') {  //判断XMLSerializer类型，不等于undefined，说明支持序列化//给xml重新赋值，创建XMLSerializer对象，并且使用serializeToString方法序列化xml = (new XMLSerializer()).serializeToString(xmlDom);//如果不支持XMLSerializer类型} else if (typeof xmlDom.xml != 'undefined') { //判断IE方式xmlDOM对象下的xml属性是否等于undefined，不等于说明支持//给xml重新赋值，序列化xmlxml = xmlDom.xml;} else { //如果上面两种都不支持//创建一个错误对象，抛出无法解析XML！错误信息throw new Error('无法解析XML！');}return xml; //最后返回序列化
}

使用上下文节点对象(xmlDom)创建XPathResult对象，就是直接在XMLDOM对象执行evaluate()方法

var xml = '<root><user id="5">Lee</user><user id="6">Koko</user></root>';  //定义xml字符串
var xmldom = getXMLDOM(xml); //创建XML DOM对象,接收xml字符串//使用上下文节点对象(xmlDom)创建XPathResult
var result = xmldom.evaluate('root/user', xmldom, null,XPathResult.FIRST_ORDERED_NODE_TYPE, null);
alert(result);  //返回单一节点集合//首先，我们需要跨浏览器获取XML DOM
function getXMLDOM(xmlStr) {  //自定义跨浏览器创建xml DOM对象，接收一个参数xml字符串var xmlDom = null;  //初始化一个对象if (typeof window.DOMParser != 'undefined') {        //判断DOMParser类型不等于undefined说明支持//创建DOMParser对象，并且创建xml DOM对象xmlDom = (new DOMParser()).parseFromString(xmlStr, 'text/xml');//获取错误信息的parsererror标签var errors = xmlDom.getElementsByTagName('parsererror');//判断错误信息标签返回集合长度大于0，说明xml有错误if (errors.length > 0) {//创建一个错误对象，获取到第一个错误标签，并且获取到他的文本内容throw new Error('XML解析错误：' + errors[0].firstChild.nodeValue);}//如果不支持DOMParser类型，尝试IE的方法} else if (typeof window.ActiveXObject != 'undefined') {    //判断ActiveXObject类型不等于undefined说明支持var version = [  //创建一个数组，元素分别为3个xml版本'MSXML2.DOMDocument.6.0','MSXML2.DOMDocument.3.0','MSXML2.DOMDocument'];for (var i = 0; i < version.length; i++) {  //根据数组的长度循环次数try {//尝试着执行每次循环到的xml版本，创建xml对象xmlDom = new ActiveXObject(version[i]);} catch (e) {  //如果出错跳过执行第二次循环//跳过
            }}xmlDom.loadXML(xmlStr);  //载入xml字符串if (xmlDom.parseError != 0) {  //判断载入xml错误返回代码，如果不等于0说明xml有错//创建一个错误对象，返回错误的解释信息throw new Error('XML解析错误：' + xmlDom.parseError.reason);}} else {  //如果 上面两种方式都不支持//创建一个错误对象，抛出您所使用的系统或浏览器不支持XML DOM！throw new Error('您所使用的系统或浏览器不支持XML DOM！');}return xmlDom;  //最后返回创建的xmlDOM对象
}//其次，我们还必须跨浏览器序列化XML
function serializeXML(xmlDom) {  //序列化xml函数，接收xmlDOM对象对象var xml = '';  //初始化一个变量等于空字符串if (typeof XMLSerializer != 'undefined') {  //判断XMLSerializer类型，不等于undefined，说明支持序列化//给xml重新赋值，创建XMLSerializer对象，并且使用serializeToString方法序列化xml = (new XMLSerializer()).serializeToString(xmlDom);//如果不支持XMLSerializer类型} else if (typeof xmlDom.xml != 'undefined') { //判断IE方式xmlDOM对象下的xml属性是否等于undefined，不等于说明支持//给xml重新赋值，序列化xmlxml = xmlDom.xml;} else { //如果上面两种都不支持//创建一个错误对象，抛出无法解析XML！错误信息throw new Error('无法解析XML！');}return xml; //最后返回序列化
}

相对而言，第二种简单方便一点，但evaluate方法有五个属性：1.XPath路径、2.上下文节点对象、3.命名空间求解器(通常是null)、4.返回结果类型、5保存结果的XPathResult对象(通常是null)。

获取xml节点

1.获取一个单一节点

singleNodeValue属性，得到XPathResult对象里的单一节点对象，获取返回类型XPathResult.FIRST_ORDERED_NODE_TYPE的节点对象

var xml = '<root><user id="5">Lee</user><user id="6">Koko</user></root>';  //定义xml字符串
var xmldom = getXMLDOM(xml); //创建XML DOM对象,接收xml字符串var result = xmldom.evaluate('root/user', xmldom, null,XPathResult.FIRST_ORDERED_NODE_TYPE, null);
if (result !== null) {//singleNodeValue属性，得到XPathResult对象里的节点对象alert(result.singleNodeValue.tagName);            //打印出节点的标签名称
}//首先，我们需要跨浏览器获取XML DOM
function getXMLDOM(xmlStr) {  //自定义跨浏览器创建xml DOM对象，接收一个参数xml字符串var xmlDom = null;  //初始化一个对象if (typeof window.DOMParser != 'undefined') {        //判断DOMParser类型不等于undefined说明支持//创建DOMParser对象，并且创建xml DOM对象xmlDom = (new DOMParser()).parseFromString(xmlStr, 'text/xml');//获取错误信息的parsererror标签var errors = xmlDom.getElementsByTagName('parsererror');//判断错误信息标签返回集合长度大于0，说明xml有错误if (errors.length > 0) {//创建一个错误对象，获取到第一个错误标签，并且获取到他的文本内容throw new Error('XML解析错误：' + errors[0].firstChild.nodeValue);}//如果不支持DOMParser类型，尝试IE的方法} else if (typeof window.ActiveXObject != 'undefined') {    //判断ActiveXObject类型不等于undefined说明支持var version = [  //创建一个数组，元素分别为3个xml版本'MSXML2.DOMDocument.6.0','MSXML2.DOMDocument.3.0','MSXML2.DOMDocument'];for (var i = 0; i < version.length; i++) {  //根据数组的长度循环次数try {//尝试着执行每次循环到的xml版本，创建xml对象xmlDom = new ActiveXObject(version[i]);} catch (e) {  //如果出错跳过执行第二次循环//跳过
            }}xmlDom.loadXML(xmlStr);  //载入xml字符串if (xmlDom.parseError != 0) {  //判断载入xml错误返回代码，如果不等于0说明xml有错//创建一个错误对象，返回错误的解释信息throw new Error('XML解析错误：' + xmlDom.parseError.reason);}} else {  //如果 上面两种方式都不支持//创建一个错误对象，抛出您所使用的系统或浏览器不支持XML DOM！throw new Error('您所使用的系统或浏览器不支持XML DOM！');}return xmlDom;  //最后返回创建的xmlDOM对象
}//其次，我们还必须跨浏览器序列化XML
function serializeXML(xmlDom) {  //序列化xml函数，接收xmlDOM对象对象var xml = '';  //初始化一个变量等于空字符串if (typeof XMLSerializer != 'undefined') {  //判断XMLSerializer类型，不等于undefined，说明支持序列化//给xml重新赋值，创建XMLSerializer对象，并且使用serializeToString方法序列化xml = (new XMLSerializer()).serializeToString(xmlDom);//如果不支持XMLSerializer类型} else if (typeof xmlDom.xml != 'undefined') { //判断IE方式xmlDOM对象下的xml属性是否等于undefined，不等于说明支持//给xml重新赋值，序列化xmlxml = xmlDom.xml;} else { //如果上面两种都不支持//创建一个错误对象，抛出无法解析XML！错误信息throw new Error('无法解析XML！');}return xml; //最后返回序列化
}

2.获取节点集合

 iterateNext()方法，得到XPathResult对象里的集合节点对象，获取返回类型XPathResult.ORDERED_NODE_ITERATOR_TYPE的节点对象

var xml = '<root><user id="5">Lee</user><user id="6">Koko</user></root>';  //定义xml字符串
var xmldom = getXMLDOM(xml); //创建XML DOM对象,接收xml字符串//使用上下文节点对象(xmlDom)创建XPathResult,返回类型为xml标签集合
var result = xmldom.evaluate('root/user', xmldom, null,XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
if (result !== null) {  //判断集合不为空var nodes = []; //创建空数组var node = result.iterateNext();  //获取到集合里的一个标签对象while (node !== null) { //判断获取集合里的一个标签对象不为空，循环这个节点集合nodes.push(node); //将循环到的节点添加到初始化数组node = result.iterateNext(); //再次取集合里的一个标签对象，进行迭代
    }
}alert(serializeXML(nodes[0])); //序列化打印第一个节点
alert(serializeXML(nodes[1])); //序列化打印第二个节点//首先，我们需要跨浏览器获取XML DOM
function getXMLDOM(xmlStr) {  //自定义跨浏览器创建xml DOM对象，接收一个参数xml字符串var xmlDom = null;  //初始化一个对象if (typeof window.DOMParser != 'undefined') {        //判断DOMParser类型不等于undefined说明支持//创建DOMParser对象，并且创建xml DOM对象xmlDom = (new DOMParser()).parseFromString(xmlStr, 'text/xml');//获取错误信息的parsererror标签var errors = xmlDom.getElementsByTagName('parsererror');//判断错误信息标签返回集合长度大于0，说明xml有错误if (errors.length > 0) {//创建一个错误对象，获取到第一个错误标签，并且获取到他的文本内容throw new Error('XML解析错误：' + errors[0].firstChild.nodeValue);}//如果不支持DOMParser类型，尝试IE的方法} else if (typeof window.ActiveXObject != 'undefined') {    //判断ActiveXObject类型不等于undefined说明支持var version = [  //创建一个数组，元素分别为3个xml版本'MSXML2.DOMDocument.6.0','MSXML2.DOMDocument.3.0','MSXML2.DOMDocument'];for (var i = 0; i < version.length; i++) {  //根据数组的长度循环次数try {//尝试着执行每次循环到的xml版本，创建xml对象xmlDom = new ActiveXObject(version[i]);} catch (e) {  //如果出错跳过执行第二次循环//跳过
            }}xmlDom.loadXML(xmlStr);  //载入xml字符串if (xmlDom.parseError != 0) {  //判断载入xml错误返回代码，如果不等于0说明xml有错//创建一个错误对象，返回错误的解释信息throw new Error('XML解析错误：' + xmlDom.parseError.reason);}} else {  //如果 上面两种方式都不支持//创建一个错误对象，抛出您所使用的系统或浏览器不支持XML DOM！throw new Error('您所使用的系统或浏览器不支持XML DOM！');}return xmlDom;  //最后返回创建的xmlDOM对象
}//其次，我们还必须跨浏览器序列化XML
function serializeXML(xmlDom) {  //序列化xml函数，接收xmlDOM对象对象var xml = '';  //初始化一个变量等于空字符串if (typeof XMLSerializer != 'undefined') {  //判断XMLSerializer类型，不等于undefined，说明支持序列化//给xml重新赋值，创建XMLSerializer对象，并且使用serializeToString方法序列化xml = (new XMLSerializer()).serializeToString(xmlDom);//如果不支持XMLSerializer类型} else if (typeof xmlDom.xml != 'undefined') { //判断IE方式xmlDOM对象下的xml属性是否等于undefined，不等于说明支持//给xml重新赋值，序列化xmlxml = xmlDom.xml;} else { //如果上面两种都不支持//创建一个错误对象，抛出无法解析XML！错误信息throw new Error('无法解析XML！');}return xml; //最后返回序列化
}

PS：节点集合的获取方式，是通过迭代器遍历而来的，我们保存到数据中就模拟出IE相似的风格。

三．XPath跨浏览器兼容

如果要做W3C和IE的跨浏览器兼容，我们要思考几个问题：1.如果传递一个节点的下标，IE是从0开始计算，W3C从1开始计算，可以通过传递获取下标进行增1减1的操作来进行。2.独有的功能放弃，为了保证跨浏览器。3.只获取单一节点和节点列表即可，基本可以完成所有的操作。

 跨浏览器获取单一节点

var xml = '<root><user id="5">Lee</user><user id="6">Koko</user></root>';  //定义xml字符串
var xmldom = getXMLDOM(xml); //创建XML DOM对象,接收xml字符串
var jied = selectSingleNode(xmldom,'root/user');  //执行跨浏览器获取单一节点函数
alert(serializeXML(jied));  //序列化节点标签//跨浏览器获取单一节点，返回单一节点对象
function selectSingleNode(xmlDom, xpath) {  //加收两个参数，参数1XML DOM对象，参数二要查找的标签路径var node = null;  //初始化if (typeof xmlDom.evaluate != 'undefined') {  //判断XML DOM对象下的evaluate方法不等于undefined，说明支持，就用ie9以下的方式var patten = /\[(\d+)\]/g;  //正则var flag = xpath.match(patten); //返回正则匹配到的字符串var num = 0; //初始化if (flag !== null) {num = parseInt(RegExp.$1) + 1;xpath = xpath.replace(patten, '[' + num + ']');}var result = xmlDom.evaluate(xpath, xmlDom, null,XPathResult.FIRST_ORDERED_NODE_TYPE, null);if (result !== null) {node = result.singleNodeValue;}} else if (typeof xmlDom.selectSingleNode != 'undefined') {  //w3c方式node = xmlDom.selectSingleNode(xpath);}return node;
}//首先，我们需要跨浏览器获取XML DOM
function getXMLDOM(xmlStr) {  //自定义跨浏览器创建xml DOM对象，接收一个参数xml字符串var xmlDom = null;  //初始化一个对象if (typeof window.DOMParser != 'undefined') {        //判断DOMParser类型不等于undefined说明支持//创建DOMParser对象，并且创建xml DOM对象xmlDom = (new DOMParser()).parseFromString(xmlStr, 'text/xml');//获取错误信息的parsererror标签var errors = xmlDom.getElementsByTagName('parsererror');//判断错误信息标签返回集合长度大于0，说明xml有错误if (errors.length > 0) {//创建一个错误对象，获取到第一个错误标签，并且获取到他的文本内容throw new Error('XML解析错误：' + errors[0].firstChild.nodeValue);}//如果不支持DOMParser类型，尝试IE的方法} else if (typeof window.ActiveXObject != 'undefined') {    //判断ActiveXObject类型不等于undefined说明支持var version = [  //创建一个数组，元素分别为3个xml版本'MSXML2.DOMDocument.6.0','MSXML2.DOMDocument.3.0','MSXML2.DOMDocument'];for (var i = 0; i < version.length; i++) {  //根据数组的长度循环次数try {//尝试着执行每次循环到的xml版本，创建xml对象xmlDom = new ActiveXObject(version[i]);} catch (e) {  //如果出错跳过执行第二次循环//跳过
            }}xmlDom.loadXML(xmlStr);  //载入xml字符串if (xmlDom.parseError != 0) {  //判断载入xml错误返回代码，如果不等于0说明xml有错//创建一个错误对象，返回错误的解释信息throw new Error('XML解析错误：' + xmlDom.parseError.reason);}} else {  //如果 上面两种方式都不支持//创建一个错误对象，抛出您所使用的系统或浏览器不支持XML DOM！throw new Error('您所使用的系统或浏览器不支持XML DOM！');}return xmlDom;  //最后返回创建的xmlDOM对象
}//其次，我们还必须跨浏览器序列化XML
function serializeXML(xmlDom) {  //序列化xml函数，接收xmlDOM对象对象var xml = '';  //初始化一个变量等于空字符串if (typeof XMLSerializer != 'undefined') {  //判断XMLSerializer类型，不等于undefined，说明支持序列化//给xml重新赋值，创建XMLSerializer对象，并且使用serializeToString方法序列化xml = (new XMLSerializer()).serializeToString(xmlDom);//如果不支持XMLSerializer类型} else if (typeof xmlDom.xml != 'undefined') { //判断IE方式xmlDOM对象下的xml属性是否等于undefined，不等于说明支持//给xml重新赋值，序列化xmlxml = xmlDom.xml;} else { //如果上面两种都不支持//创建一个错误对象，抛出无法解析XML！错误信息throw new Error('无法解析XML！');}return xml; //最后返回序列化
}

跨浏览器获取节点集合

var xml = '<root><user id="5">Lee</user><user id="6">Koko</user></root>';  //定义xml字符串
var xmldom = getXMLDOM(xml); //创建XML DOM对象,接收xml字符串
var jied = selectNodes(xmldom,'root/user');  //执行跨浏览器获取集合节点函数
alert(serializeXML(jied[0]));  //序列化节点标签//跨浏览器获取节点集合，返回节点集合
function selectNodes(xmlDom, xpath) { //接收两个参数，参数1XML DOM对象，参数2要查找的节点标签路径var nodes = [];if (typeof xmlDom.evaluate != 'undefined') {var patten = /\[(\d+)\]/g;var flag = xpath.match(patten);var num = 0;if (flag !== null) {num = parseInt(RegExp.$1) + 1;xpath = xpath.replace(patten, '[' + num + ']');}var node = null;var result = xmlDom.evaluate('root/user', xmlDom, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);if (result !== null) {while ((node = result.iterateNext()) !== null) {nodes.push(node);}}} else if (typeof xmlDom.selectNodes != 'undefined') {nodes = xmlDom.selectNodes(xpath);}return nodes;
}//首先，我们需要跨浏览器获取XML DOM
function getXMLDOM(xmlStr) {  //自定义跨浏览器创建xml DOM对象，接收一个参数xml字符串var xmlDom = null;  //初始化一个对象if (typeof window.DOMParser != 'undefined') {        //判断DOMParser类型不等于undefined说明支持//创建DOMParser对象，并且创建xml DOM对象xmlDom = (new DOMParser()).parseFromString(xmlStr, 'text/xml');//获取错误信息的parsererror标签var errors = xmlDom.getElementsByTagName('parsererror');//判断错误信息标签返回集合长度大于0，说明xml有错误if (errors.length > 0) {//创建一个错误对象，获取到第一个错误标签，并且获取到他的文本内容throw new Error('XML解析错误：' + errors[0].firstChild.nodeValue);}//如果不支持DOMParser类型，尝试IE的方法} else if (typeof window.ActiveXObject != 'undefined') {    //判断ActiveXObject类型不等于undefined说明支持var version = [  //创建一个数组，元素分别为3个xml版本'MSXML2.DOMDocument.6.0','MSXML2.DOMDocument.3.0','MSXML2.DOMDocument'];for (var i = 0; i < version.length; i++) {  //根据数组的长度循环次数try {//尝试着执行每次循环到的xml版本，创建xml对象xmlDom = new ActiveXObject(version[i]);} catch (e) {  //如果出错跳过执行第二次循环//跳过
            }}xmlDom.loadXML(xmlStr);  //载入xml字符串if (xmlDom.parseError != 0) {  //判断载入xml错误返回代码，如果不等于0说明xml有错//创建一个错误对象，返回错误的解释信息throw new Error('XML解析错误：' + xmlDom.parseError.reason);}} else {  //如果 上面两种方式都不支持//创建一个错误对象，抛出您所使用的系统或浏览器不支持XML DOM！throw new Error('您所使用的系统或浏览器不支持XML DOM！');}return xmlDom;  //最后返回创建的xmlDOM对象
}//其次，我们还必须跨浏览器序列化XML
function serializeXML(xmlDom) {  //序列化xml函数，接收xmlDOM对象对象var xml = '';  //初始化一个变量等于空字符串if (typeof XMLSerializer != 'undefined') {  //判断XMLSerializer类型，不等于undefined，说明支持序列化//给xml重新赋值，创建XMLSerializer对象，并且使用serializeToString方法序列化xml = (new XMLSerializer()).serializeToString(xmlDom);//如果不支持XMLSerializer类型} else if (typeof xmlDom.xml != 'undefined') { //判断IE方式xmlDOM对象下的xml属性是否等于undefined，不等于说明支持//给xml重新赋值，序列化xmlxml = xmlDom.xml;} else { //如果上面两种都不支持//创建一个错误对象，抛出无法解析XML！错误信息throw new Error('无法解析XML！');}return xml; //最后返回序列化
}

PS：在传递xpath路径时，没有做验证判断是否合法，有兴趣的同学可以自行完成。在XML还有一个重要章节是XSLT和EX4，由于在使用频率的缘故，我们暂且搁置。

转载于:https://www.cnblogs.com/adc8868/p/6216078.html

第一百二十六节，JavaScript，XPath操作xml节点相关推荐

  1. 第三百二十六节，web爬虫，scrapy模块,解决重复ur——自动递归url

    第三百二十六节,web爬虫,scrapy模块,解决重复url--自动递归url 一般抓取过的url不重复抓取,那么就需要记录url,判断当前URL如果在记录里说明已经抓取过了,如果不存在说明没抓取过 ...

  2. 第一百二十六期:代码以外的生存之道，献给每位入了坑的码农

    本篇内容主要是对这本书的一个总结概括,也希望能用作抛砖引玉,让读者在看完之后,对这本书有所兴趣,或者希望能让读者对代码以外的需要做的事情更加积极明朗一点. 作者:码农三哥 前言 最近刚刚读完了一本书, ...

  3. 前端歌谣的刷题之路-第一百二十六题-浮动

    前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 ...

  4. 第一卷 第一百三十六章 好白菜

    第一卷 第一百三十六章 好白菜 其实我最恨两种人,一种是始乱终弃的小白脸,一种就是生孩子不养活的臭娘们儿.**  提供本书txt电子书下载 **既然你能生就要能养啊,虽然我不知道井里的那个死孩子的母亲 ...

  5. 第三百二十五节，web爬虫，scrapy模块标签选择器下载图片，以及正则匹配标签...

    第三百二十五节,web爬虫,scrapy模块标签选择器下载图片,以及正则匹配标签 标签选择器对象 HtmlXPathSelector()创建标签选择器对象,参数接收response回调的html对象 ...

  6. 第三百二十四节，web爬虫，scrapy模块介绍与使用

    第三百二十四节,web爬虫,scrapy模块介绍与使用 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中. 其最初是为 ...

  7. flash动画设计期末作业_「2019年下学期」第二十五二十六节：期末作品三-吉祥物设计...

    初心 伟大的艺术品不必追随潮流,他本身就能引领潮流. 课前准备 软件安装 [2019(上)]<三维建模与动画设计> [2019年下学期]第一节:选修介绍及选修人数确定 [2019年下学期] ...

  8. nmcli命令详解_【高新课堂】第一百二十五期Liunx必备命令

    点击上方"蓝字"关注我们吧! Liunx系统启动默认为字符界面,一般不会启用图像界面,所以对命令行的熟练程度能更加高效.便捷的管理Liunx服务器. 这节课向读者介绍Liunx系统 ...

  9. 第一百二十期:终于有篇看的懂的B树文章了！

    索引,相信大多数人已经相当熟悉了,很多人都知道 MySQL 的索引主要以 B+ 树为主,但是要问到为什么用 B+ 树,恐怕很少有人能把前因后果讲述完整.本文就来从头到尾介绍下数据库的索引. 作者:安静 ...

最新文章

  1. 爬虫基础（一）之概念、作用、分类和流程
  2. Scrum Master的成功定义是什么?
  3. Win10系列：JavaScript图形
  4. 矩阵微积分的一些实用结论与推导
  5. C语言程序设计输入x求函数y,C语言程序设计实践（OJ）-初识函数
  6. LeetCode 312. 戳气球（DP，难）
  7. netstat查询端口被占用
  8. ubuntu LVM
  9. 使用requests访问必应在线翻译
  10. 完美安装运行Xcelsius 2008 SP3解决方案
  11. 手写识别ocr java,OCR 指的是手写文字技术_学小易找答案
  12. 最大值最小值算法(象棋博弈)
  13. java段落对齐_Java 设置Word段落缩进、对齐方式
  14. 渗透攻击exp共享站点（建议收藏❤️）
  15. 谈谈入职前后的一个月吧
  16. 小程序如何把一个页面当作组件来引用，就是既可以当作一个组件也能当一个页面使用
  17. 深度学习之目标检测综述
  18. educoder 5-4Python计算思维训练——数组进阶之线性代数(答案）
  19. ECOSYS FS-1040 USB打印驱动安装
  20. 2的n次幂 2的1～200幂的结果

热门文章

  1. python c cmd_在Python cmd模块中处理CTRL-C
  2. 西北大学计算机排行,世界排名领先，西北大学到底有多厉害？
  3. 计算机桌面游戏开发,桌面游戏菜单怎么做
  4. vCenter线上操作磁盘扩容
  5. 神经网络模型模型转ONNX
  6. Confluence 6 在 Apache 或者系统级别阻止垃圾
  7. json传输二进制的方案【转】
  8. Python学习——02-Python基础——【9-面向对象进阶】——isinstance(obj,cls)、反射等...
  9. HashMap和ConcurrentHashMap的区别，HashMap的底层源码。
  10. 微软发布Visual Studio 2012 示例代码浏览器