DrewJhung's Blog

初识xpath

Xpath 简介

xpath是一种在xml中查找信息的语言, 它是W3C XSLT标准的主要元素, 利用它可以查找遍历元素及元素属性。

xpath 语法

xpath 利用路径表达式选取节点元素或者节点属性。路径表达式类似于文件路径,通过路径定位到指定元素。

xml 介绍

xml 实例: “books.xml” :

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

在上面的xml实例中, (文档节点) (元素节点) category=“WEB” (属性节点)

用xpath选取xml节点

  • 之前介绍过xpath利用路径表达式选取节点, 下面列出比较常用的路径:
表达式 含义
nodename 选取节点的所有
/ 从根节点选取
// 从任何节点选取
. 选取当前节点
.. 选取当前节点的父节点
@ 选取属性
  • 针对以上xml实例, 举例说明路径表达式的使用:
路径表达式 结果
bookstore 选取包含bookstore在内的所有
/bookstore 选取根元素
bookstore/book bookstore下的所有book元素节点及其子节点
//book 所有book元素及其子元素
//book/title[@lang] 选取有lang属性的title节点
//@lang 选取属性为lang的所有元素属性
  • 根据筛选条件选取元素:
路径表达式 结果
bookstore/book[last()] 选取最后一个book节点及其子节点
//book[1] 选取第一个book节点及其子节点
//book[position() < 4] 选取前三个book节点及其子节点
bookstore/book[price > 40] 选取价格大于40的book节点及其子节点
  • js中使用xpath解析xml文档

现在大多数浏览器使用XMLHttpRequest加载xml,加载xml工具的方式如下:

1
var httpRequest = new XMLHttpRequest()

但是比较古老的浏览器,如IE5、IE6 采用如下方式加载xml工具:

1
var httpRequest = new ActiveXObject('Microsoft.XMLHTTP')

在js中利用xpath解析xml时, IE浏览器 跟其他浏览器方式不同, 所以需要判断客户端浏览器分情况解析xml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
<body>
<script type="text/javascript">
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
{
// 大多数现代浏览器加载xml的工具实例
xhttp=new XMLHttpRequest();
}
else
{
// IE 浏览器加载xml的工具实例
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}
xml=loadXMLDoc("/example/xmle/books.xml");
path="/bookstore/book/title"
// code for IE
if (window.ActiveXObject)
{
var nodes=xml.selectNodes(path);
for (i=0;i<nodes.length;i++)
{
document.write(nodes[i].childNodes[0].nodeValue);
document.write("<br />");
}
}
// code for Chrome, Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
var nodes=xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result=nodes.iterateNext();
while (result)
{
document.write(result.childNodes[0].nodeValue);
document.write("<br />");
result=nodes.iterateNext();
}
}
</script>
</body>
</html>

Xpath测试工具

推荐一个很实用的xpath测试工具:XPathTester