Snippets

本文提供了一些XPath代码片段 - 简单的例子，介绍如何基于DOM Level 3 XPath规范中的标准接口提供一些简单的实用程序函数，以便将XPath功能展示给JavaScript代码。片段是您可以在自己的代码中在现实世界中使用的函数。

特定于节点的评估程序功能

以下自定义实用程序功能可用于评估给定XML节点上的XPath表达式。第一个参数是一个DOM节点或Document对象，而第二个参数是一个定义XPath表达式的字符串。

示例：定义自定义节点特定的evaluateXPath()效用函数

// Evaluate an XPath expression aExpression against a given DOM node
// or Document object (aNode), returning the results as an array
// thanks wanderingstan at morethanwarm dot mail dot com for the
// initial work.
function evaluateXPath(aNode, aExpr) {
  var xpe = new XPathEvaluator();
  var nsResolver = xpe.createNSResolver(aNode.ownerDocument == null ?
    aNode.documentElement : aNode.ownerDocument.documentElement);
  var result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null);
  var found = [];
  var res;
  while (res = result.iterateNext())
    found.push(res);
  return found;
}

此功能使用new XPathEvaluator()构造函数，该函数在Firefox，Chrome，Opera和Safari中受支持，但不在Edge或Internet Explorer中受支持。可能由Edge或Internet Explorer用户访问的Web文档中的脚本应将呼叫替换new XPathEvaluator()为以下片段：

  // XPathEvaluator is implemented on objects that implement Document
  var xpe = aNode.ownerDocument || aNode;

在这种情况下，XPathNSResolver的创建可以简化为：

  var nsResolver = xpe.createNSResolver(xpe.documentElement);

但是请注意，createNSResolver只有在确定XPath表达式中的名称空间前缀与要查询的文档中的名称空间前缀匹配时（以及没有使用默认名称空间（尽管请参阅document.createNSResolver以获得解决方法）），才应使用它。否则，你必须提供你自己的XPathNSResolver实现。

如果您使用XMLHttpRequest将本地或远程XML文件读入DOM树（如解析和序列化XML中所述），则evaluateXPath()应该使用第一个参数req.responseXML。

示例用法

假设我们有以下XML文档（另请参阅如何创建DOM树以及解析和序列化XML）：

示例：用于自定义evaluateXPath()实用程序功能的XML文档

<?xml version="1.0"?>
<people>
  <person first-name="eric" middle-initial="H" last-name="jung">
    <address street="321 south st" city="denver" state="co" country="usa"/>
    <address street="123 main st" city="arlington" state="ma" country="usa"/>
  </person>

  <person first-name="jed" last-name="brown">
    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
    <address street="123 west st" city="seattle" state="wa" country="usa"/>
    <address street="321 south avenue" city="denver" state="co" country="usa"/>
  </person>
</people>

您现在可以使用XPath表达式“查询”文档。尽管漫步DOM树可以获得类似的结果，但使用XPath表达式更快更强大。如果你可以依赖id属性，document.getElementById()仍然强大，但它不如XPath强大。这里有些例子。

示例：使用自定义evaluateXPath()实用程序功能的JavaScript代码

// display the last names of all people in the doc
var results = evaluateXPath(people, "//person/@last-name");
for (var i in results)
  alert("Person #" + i + " has the last name " + results[i].value);

// get the 2nd person node
results = evaluateXPath(people, "/people/person[2]");

// get all the person nodes that have addresses in denver
results = evaluateXPath(people, "//person[address/@city='denver']");

// get all the addresses that have "south" in the street name
results = evaluateXPath(people,  "//address[contains(@street, 'south')]");
alert(results.length);

docEvaluateArray

下面是一个简单的实用函数，用于将（有序的）XPath结果获取到数组中，而不管是否存在对名称空间解析器的特殊需求等。它避免了document.evaluate()不需要的情况下更复杂的语法以及需要使用特殊的迭代器XPathResult（而不是返回一个数组）。

示例：定义一个简单的docEvaluateArray​()效用函数

// Example usage:
// var els = docEvaluateArray('//a');
// alert(els[0].nodeName); // gives 'A' in HTML document with at least one link

function docEvaluateArray (expr, doc, context, resolver) {
    var i, result, a = [];
    doc = doc || (context ? context.ownerDocument : document);
    resolver = resolver || null;
    context = context || doc;
	
    result = doc.evaluate(expr, context, resolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
    for(i = 0; i < result.snapshotLength; i++) {
        a[i] = result.snapshotItem(i);
    }
    return a;
}

getXPathForElement

以下函数允许传递一个元素和一个XML文档来查找一个返回该元素的唯一字符串XPath表达式。

示例：定义一个getXPathForElement​​()效用函数

function getXPathForElement(el, xml) {
	var xpath = '';
	var pos, tempitem2;
	
	while(el !== xml.documentElement) {		
		pos = 0;
		tempitem2 = el;
		while(tempitem2) {
			if (tempitem2.nodeType === 1 && tempitem2.nodeName === el.nodeName) { // If it is ELEMENT_NODE of the same name
				pos += 1;
			}
			tempitem2 = tempitem2.previousSibling;
		}
		
		xpath = "*[name()='"+el.nodeName+"' and namespace-uri()='"+(el.namespaceURI===null?'':el.namespaceURI)+"']["+pos+']'+'/'+xpath;

		el = el.parentNode;
	}
	xpath = '/*'+"[name()='"+xml.documentElement.nodeName+"' and namespace-uri()='"+(el.namespaceURI===null?'':el.namespaceURI)+"']"+'/'+xpath;
	xpath = xpath.replace(/\/$/, '');
	return xpath;
}

资源

• XPath

• Forum discussion on this topic