参考手册
XPath 教程
XPath 运算符
XPath 总结

XPath 实例

在本节，让我们通过实例来学习一些基础的 XPath 语法。

XML实例文档

我们将在下面的例子中使用这个 XML 文档：

"books.xml" :
  1. <?xml version="1.0" encoding="utf-8"?>
  3. <bookstore>
  5. <book category="COOKING">
  6.   <title lang="en">Everyday Italian</title>
  7.   <author>Giada De Laurentiis</author>
  8.   <year>2005</year>
  9.   <price>30.00</price>
  10. </book>
  12. <book category="CHILDREN">
  13.   <title lang="en">Harry Potter</title>
  14.   <author>J K. Rowling</author>
  15.   <year>2005</year>
  16.   <price>29.99</price>
  17. </book>
  19. <book category="WEB">
  20.   <title lang="en">XQuery Kick Start</title>
  21.   <author>James McGovern</author>
  22.   <author>Per Bothner</author>
  23.   <author>Kurt Cagle</author>
  24.   <author>James Linn</author>
  25.   <author>Vaidyanathan Nagarajan</author>
  26.   <year>2003</year>
  27.   <price>49.99</price>
  28. </book>
  30. <book category="WEB">
  31.   <title lang="en">Learning XML</title>
  32.   <author>Erik T. Ray</author>
  33.   <year>2003</year>
  34.   <price>39.95</price>
  35. </book>
  37. </bookstore>

在您的浏览器中查看此 "books.xml" 文件。

加载 XML 文档

所有现代浏览器都支持使用 XMLHttpRequest 来加载 XML 文档的方法。

针对大多数现代浏览器的代码：

  1. var xmlhttp=new XMLHttpRequest()

针对古老的微软浏览器（IE 5 和 6）的代码：

  1. var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

选取节点

不幸的是，Internet Explorer 和其他处理 XPath 的方式不同。

在我们的例子中，包含适用于大多数主流浏览器的代码。

Internet Explorer 使用 selectNodes() 方法从 XML 文档中的选取节点：

  1. xmlDoc.selectNodes(xpath);

Firefox、Chrome、Opera 以及 Safari 使用 evaluate() 方法从 XML 文档中选取节点：

  1. xmlDoc.evaluate(xpath, xmlDoc, null, XPathResult.ANY_TYPE,null);

选取所有 title

下面的例子选取所有 title 节点：

  1. <html>
  2. <body>
  3.     <script type="text/javascript">
  4.         function loadXMLDoc(dname) {
  5.             if (window.XMLHttpRequest) {
  6.                 xhttp = new XMLHttpRequest();
  7.             }
  8.             else {
  9.                 xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  10.             }
  11.             xhttp.open("GET", dname, false);
  12.             xhttp.send("");
  13.             return xhttp.responseXML;
  14.         }
  16.         xml = loadXMLDoc("/example/xml/bookstore.xml");
  17.         path = "/bookstore/book/title"
  18.         // code for IE
  19.         if (window.ActiveXObject) {
  20.             var nodes = xml.selectNodes(path);
  22.             for (i = 0; i < nodes.length; i++) {
  23.                 document.write(nodes[i].childNodes[0].nodeValue);
  24.                 document.write("<br />");
  25.             }
  26.         }
  27.         // code for Mozilla, Firefox, Opera, etc.
  28.         else if (document.implementation && document.implementation.createDocument) {
  29.             var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
  30.             var result = nodes.iterateNext();
  32.             while (result) {
  33.                 document.write(result.childNodes[0].nodeValue);
  34.                 document.write("<br />");
  35.                 result = nodes.iterateNext();
  36.             }
  37.         }
  38.     </script>
  40. </body>
  41. </html>
运行一下

选取第一个 book 的 title

下面的例子选取 bookstore 元素下面的第一个 book 节点的 title：

  1. <html>
  2. <body>
  3.     <script type="text/javascript">
  4.         function loadXMLDoc(dname) {
  5.             if (window.XMLHttpRequest) {
  6.                 xhttp = new XMLHttpRequest();
  7.             }
  8.             else {
  9.                 xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  10.             }
  11.             xhttp.open("GET", dname, false);
  12.             xhttp.send("");
  13.             return xhttp.responseXML;
  14.         }
  16.         xml = loadXMLDoc("/example/xml/bookstore.xml");
  17.         path = "/bookstore/book[1]/title";
  18.         // code for IE
  19.         if (window.ActiveXObject) {
  20.             var nodes = xml.selectNodes(path);
  22.             for (i = 0; i < nodes.length; i++) {
  23.                 document.write(nodes[i].childNodes[0].nodeValue);
  24.                 document.write("<br />");
  25.             }
  26.         }
  27.         // code for Mozilla, Firefox, Opera, etc.
  28.         else if (document.implementation && document.implementation.createDocument) {
  29.             var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
  30.             var result = nodes.iterateNext();
  32.             while (result) {
  33.                 document.write(result.childNodes[0].nodeValue);
  34.                 document.write("<br />");
  35.                 result = nodes.iterateNext();
  36.             }
  37.         }
  38.     </script>
  39. </body>
  40. </html>
运行一下

这里有一个问题。上面的例子在 IE 和其他浏览器中输出不同的结果。

IE5 以及更高版本将 [0] 视为第一个节点，而根据 W3C 的标准，应该是 [1]。

为了解决 IE5+ 中 [0] 和 [1] 的问题，可以为 XPath 设置语言选择（SelectionLanguage）。

下面的例子选取 bookstore 元素下面的第一个 book 节点的 title：

  1. <html>
  2. <body>
  3.     <script type="text/javascript">
  4.         function loadXMLDoc(dname) {
  5.             if (window.XMLHttpRequest) {
  6.                 xhttp = new XMLHttpRequest();
  7.             }
  8.             else {
  9.                 xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  10.             }
  11.             xhttp.open("GET", dname, false);
  12.             xhttp.send("");
  13.             return xhttp.responseXML;
  14.         }
  16.         xml = loadXMLDoc("/example/xml/bookstore.xml");
  17.         path = "/bookstore/book[1]/title";
  18.         // code for IE
  19.         if (window.ActiveXObject) {
  20.             xml.setProperty("SelectionLanguage", "XPath");
  21.             var nodes = xml.selectNodes(path);
  23.             for (i = 0; i < nodes.length; i++) {
  24.                 document.write(nodes[i].childNodes[0].nodeValue);
  25.                 document.write("<br />");
  26.             }
  27.         }
  28.         // code for Mozilla, Firefox, Opera, etc.
  29.         else if (document.implementation && document.implementation.createDocument) {
  30.             var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
  31.             var result = nodes.iterateNext();
  33.             while (result) {
  34.                 document.write(result.childNodes[0].nodeValue);
  35.                 document.write("<br />");
  36.                 result = nodes.iterateNext();
  37.             }
  38.         }
  39.     </script>
  41. </body>
  42. </html>
运行一下

选取所有价格

下面的例子选取 price 节点中的所有文本：

  1. <html>
  2. <body>
  3.     <script type="text/javascript">
  4.         function loadXMLDoc(dname) {
  5.             if (window.XMLHttpRequest) {
  6.                 xhttp = new XMLHttpRequest();
  7.             }
  8.             else {
  9.                 xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  10.             }
  11.             xhttp.open("GET", dname, false);
  12.             xhttp.send("");
  13.             return xhttp.responseXML;
  14.         }
  16.         xml = loadXMLDoc("/example/xml/bookstore.xml");
  17.         path = "/bookstore/book/price/text()"
  18.         // code for IE
  19.         if (window.ActiveXObject) {
  20.             var nodes = xml.selectNodes(path);
  22.             for (i = 0; i < nodes.length; i++) {
  23.                 document.write(nodes[i].nodeValue);
  24.                 document.write("<br />");
  25.             }
  26.         }
  27.         // code for Mozilla, Firefox, Opera, etc.
  28.         else if (document.implementation && document.implementation.createDocument) {
  29.             var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
  30.             var result = nodes.iterateNext();
  32.             while (result) {
  33.                 document.write(result.nodeValue + "<br />");
  34.                 result = nodes.iterateNext();
  35.             }
  36.         }
  37.     </script>
  38. </body>
  39. </html>a
运行一下

选取价格高于 35 的 price 节点

下面的例子选取价格高于 35 的所有 price 节点：

  1. <html>
  2. <body>
  3.     <script type="text/javascript">
  4.         function loadXMLDoc(dname) {
  5.             if (window.XMLHttpRequest) {
  6.                 xhttp = new XMLHttpRequest();
  7.             }
  8.             else {
  9.                 xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  10.             }
  11.             xhttp.open("GET", dname, false);
  12.             xhttp.send("");
  13.             return xhttp.responseXML;
  14.         }
  16.         xml = loadXMLDoc("/example/xml/bookstore.xml");
  17.         path = "/bookstore/book[price>35]/price";
  18.         // code for IE
  19.         if (window.ActiveXObject) {
  20.             var nodes = xml.selectNodes(path);
  22.             for (i = 0; i < nodes.length; i++) {
  23.                 document.write(nodes[i].childNodes[0].nodeValue);
  24.                 document.write("<br />");
  25.             }
  26.         }
  27.         // code for Mozilla, Firefox, Opera, etc.
  28.         else if (document.implementation && document.implementation.createDocument) {
  29.             var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
  30.             var result = nodes.iterateNext();
  32.             while (result) {
  33.                 document.write(result.childNodes[0].nodeValue);
  34.                 document.write("<br />");
  35.                 result = nodes.iterateNext();
  36.             }
  37.         }
  38.     </script>
  40. </body>
  41. </html>
运行一下

选取价格高于 35 的 title 节点

下面的例子选取价格高于 35 的所有 title 节点：

  1. <html>
  2. <body>
  3.     <script type="text/javascript">
  4.         function loadXMLDoc(dname) {
  5.             if (window.XMLHttpRequest) {
  6.                 xhttp = new XMLHttpRequest();
  7.             }
  8.             else {
  9.                 xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  10.             }
  11.             xhttp.open("GET", dname, false);
  12.             xhttp.send("");
  13.             return xhttp.responseXML;
  14.         }
  16.         xml = loadXMLDoc("/example/xml/bookstore.xml");
  17.         path = "/bookstore/book[price>35]/title";
  18.         // code for IE
  19.         if (window.ActiveXObject) {
  20.             var nodes = xml.selectNodes(path);
  22.             for (i = 0; i < nodes.length; i++) {
  23.                 document.write(nodes[i].childNodes[0].nodeValue);
  24.                 document.write("<br />");
  25.             }
  26.         }
  27.         // code for Mozilla, Firefox, Opera, etc.
  28.         else if (document.implementation && document.implementation.createDocument) {
  29.             var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
  30.             var result = nodes.iterateNext();
  32.             while (result) {
  33.                 document.write(result.childNodes[0].nodeValue);
  34.                 document.write("<br />");
  35.                 result = nodes.iterateNext();
  36.             }
  37.         }
  38.     </script>
  39. </body>
  40. </html>
运行一下
XPath 运算符
XPath 总结

分类导航

HTMLHTML5JAVASCRIPTCSSjQueryBootstrap 3 教程SassReactHTMl 颜色教程JSONXMLXPathTypeScriptAppML 教程XLinkXPointerXQueryXFormsXsltXML SchemaXSL-FOWeb ServiceWSDSOAPW3CSVGDHTMLTCP/IPjQuery Mobile 教程XHTML