XPath: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
(moved to MDC)
Line 1: Line 1:
{{extdev}}
Moved to [http://developer.mozilla.org/en/docs/Using_XPath here] (MDC).
 
XPath is a language for addressing parts of an XML document. It is a [http://www.w3.org/TR/xpath W3C recommendation].
 
This article describes Mozilla interfaces exposing XPath functionality to JavaScript code. These are described in [http://www.w3.org/TR/DOM-Level-3-XPath/ DOM Level 3 XPath] (which is W3C Working Group Note at this moment).
 
This article does not attempt teach XPath itself. If you're unfamiliar with this technology, please refer to [http://www.w3schools.com/xpath/ W3Schools XPath tutorial].
 
==Wrapper function==
The following function can be used to evaluate XPath expressions on given XML nodes. The first argument is a DOM node or Document object, while the second is a string defining an XPath expression.
 
<pre>
// 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;
}
</pre>
 
If you are using XmlHttpRequest to read a local or remote XML file into a DOM tree (as described in [[Parsing and serializing XML]]), the first argument to evaluateXPath() should be req.responseXML.
 
==Sample Usage==
Assume we have the following XML document (see also [[How to Create a DOM tree]] and [[Parsing and serializing XML]]):
 
<pre>
<?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>
</pre>
 
You can now "query" the document with XPath expressions. Although walking the DOM tree can achieve similar results, using XPath expressions is much quicker and more powerful. If you can rely on <code>id</code> attributes, <code>document.getElementById()</code> is still powerful, but it's not nearly as powerful as XPath. Here are some examples.
 
<pre>
// 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);
</pre>
 
==Resources==
* [http://www.topxml.com/code/default.asp?p=3&id=v20021221025528 XPath Visualizer for Mozilla and Firefox]
* [http://www.w3schools.com/xpath/ XPath tutorial]
* [http://forums.mozillazine.org/viewtopic.php?t=229106 Forum discussion on this topic]
* [http://zeus.jesus.cam.ac.uk/~jg307/mozilla/xpath-tutorial.html Using the Mozilla JavaScript Interface to XPath] - draft tutorial on using XPath from javascript
* [https://sourceforge.net/projects/sarissa/ Sarissa] - Sarissa is a cross-browser ECMAScript library for client side XML manipulation, including loading XML from URLs or strings, performing XSLT transformations, XPath queries and more. Supported: Gecko (Mozilla, Firefox etc), IE, KHTML (Konqueror, Safari). If you're writing JavaScript that is used in both XUL applications and HTML pages, and the HTML pages may be viewed in non-Gecko-based applications (such as Internet Explorer, Opera, Konqueror, Safari), you should consider using Sarissa to parse and/or serialize XML. ''Note:'' Do not create a DOM object using <code>document.implementation.createDocument()</code> and then use Sarissa classes and methods to manipulate that object. It will not work. You must use Sarissa to create the initial DOM object.
[[Category:Example code]] [[Category:XML in JavaScript]]

Revision as of 21:46, 7 November 2006

Moved to here (MDC).