日期:2014-05-16 浏览次数:20326 次
关于XPath的相关知识可以参看http://www.w3school.com.cn/xpath/index.asp
注意:以下代码的测试环境为FF3.6.3及IE6.0 。chrome浏览器没有测试过,应该不支持。
在进行XPath之前要对xml文档进行加载。如何加载可参看上篇文章。
var oXmlDom = XmlDom(); oXmlDom.load("exam1.xml");
针对IE,当在读取XML文档后,本身的对象提供了两个方法用于接收XPATH表达式。分别是:selectNodes及selectSingleNode,这两个方法是作为oXmlDom.documentElement的方法调用的。相对Mozilla比较简单,当然功能是没有Mozilla实现XPATH的功能强大。
oXmlDom.documentElement.selectNodes(xPath) oXmlDom.documentElement.selectSingleNode(xPath)
Mozilla实现XPATH的方式则相对比较复杂。需要创建XPathEvaluator对象,然后调用evaluate方法执行XPATH表达式。evaluate包含五个参数:XPath表达式、上下文节点、命名空间解释程序及返回的结果类型,同时在XPathResult中存放结果(通常为null)命名空间解释程序通常留空。返回结果类型有:
下面针对Mozilla实现selectNodes及selectSingleNode方法。由于oXmlDom.documentElement为Elment对象,那么为了用相同的代码兼容IE及Mozilla,可以将selectNodes及selectSingleNode作为Element的属性。代码如下:
/** * 查找匹配XPath表达式的节点(Mozilla实现selectNodes方法;IE自带该方法) * * @param sXPath * XPAHT表达式 * @return 节点集合数组 Array<Element> */ Element.prototype.selectNodes = function(sXPath) { var oEvaluator = new XPathEvaluator(); var oResult = oEvaluator.evaluate(sXPath, this, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null); var aNodes = new Array(); if (oResult != null) { var oElement = oResult.iterateNext(); while (oElement) { aNodes.push(oElement); oElement = oResult.iterateNext(); } } return aNodes; }; /** * 查找第一个匹配XPath表达式的节点(Mozilla实现selectSingleNode方法;IE自带该方法) * * @param sXPath * XPAHT表达式 * @return 节点元素对象 instanceof Element is true */ Element.prototype.selectSingleNode = function(sXPath) { var oEvaluator = new XPathEvaluator(); var oResult = oEvaluator.evaluate(sXPath, this, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null); if (oResult != null) { return oResult.singleNodeValue; } else { return null; } };
这样我们就完成了Mozilla对XPath的实现。
当然Mozilla本身实现的XPath的操作要比单纯的IE提供的selectNodes及selectSingleNode方法更强大,而且对与XPath表达式的支持也更好。我们可以再扩充一些方法,但注意了,下面这些方法只能在支持Mozilla的浏览器中使用:
/** * 统计匹配指定模式的节点个数(该方法仅限于Mozilla) * * @param sXPath * XPAHT表达式 * @return 返回匹配节点个数。如没有匹配则返回0 */ Element.prototype.count = function(sXPath) { var __count = 0; sXPath = "count(" + sXPath + ")"; var oEvaluator = new XPathEvaluator(); var oResult = oEvaluator.evaluate(sXPath, this, null, XPathResult.NUMBER_TYPE, null); if (oResult) { __count = oResult.numberValue; } return __count; }; /** * 判断指定XPath表达式是否有匹配节点(该方法仅限于Mozilla) * * @param sXPath * XPAHT表达式 * @return true|false */ Element.prototype.isMatch = function(sXPath) { var oEvaluator = new XPathEvaluator(); var oResult = oEvaluator.evaluate(sXPath, this, null, XPathResult.BOOLEAN_TYPE, null); return oResult.booleanValue; };
当然上述方法,如果是在IE中,可以同过IE提供最基本的两个方法解决,这里就不多做赘述。
下面我们最完成的代码做下测试,看下上述编码对与XPath语法的支持情况,为此做如下测试页面
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> #hea { border: 1px dotted orange; } #xml { float: left; width