# javascript快速入门26--XPath
## XPath 简介
XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 XPointer 同时被构建于 XPath 表达之上。因此,对 XPath 的理解是很多高级 XML 应用的基础。 其实对些我们并不陌生,最与XPath相似的便是CSS的选择器.在CSS中使用CSS选择符选择元素来应用样式,而在XSLT中则使用XPath,XPath与CSS选择器相比如强大的许多!下面是CSS选择符与XPath选择符一些对照:
```
//CSS选择符
body p //选择所有body下面的p元素
body>p //选择body的子元素p
* //选择所有的元素
//与之对应的XPath选择符
body//p
body/p
*
```
虽然现在还不能了解这些XPath表达的含意,但可以发现,它和CSS选择符十分相像!但XPath有更强大的地方,比如它可以定位到body元素下具体位置上的p或可以选择前N个p:
```
body/p[position()=4] //这个XPath表达式将选取body子元素中第4个p元素,注意这里从1开始计数
body/p[position()<3] //将选取body子元素中前两个p元素
```
XPath 使用路径表达式来选取 XML 文档中的节点或者节点集。这些路径表达式和我们在常规的电脑文件系统中看到的表达式非常相似。另外,XPath 含有超过 100 个内建的函数。这些函数用于字符串值、数值,日期和时间比较、节点和 QName 处理、序列处理、逻辑值等等。
## 书写XPath
XPath使用路径表达式在 XML 文档中选取节点。节点是通过沿着路径(path)或者 步(step) 来选取的。如"/"表示文档节点,"."表示当前节点,而".."则表示当前节点的父节点.示例:
```
{因为XPath表示达式中有斜杠,所以暂时用这个表示注释!
/ {选取文档节点,nodeType为9
/root {选取文档根元素,类似于文件系统的路径(Unix),以/开头的路径都是绝对路径
/root/child/.. {选取根节点root的子节点child的父节点(就是root)
```
下面是一些常用路径表达式
* nodeName 选取名称为nodeName的节点
* / 从根节点选取
* // 选择元素后代元素,必须在后面跟上nodeName
* . 选取当前节点
* .. 选取当前节点的父节点
* @ 选取属性节点(@是attribute的缩写)
```
<?xml version="1.0"?>
<root>
<child attr="attr" />
<child>
<a><desc /></a>
</child>
</root>
```
```
{针对上面的XML文档的XPath结果,当前节点为document
/root {选取root
root {选取root
child {空,因为child不是document的子元素
//child {选取两个child元素,//表示后代
//@attr {选取attr属性节点
/root/child//desc {返回child的后代元素desc
```
### 谓语(Predicates)
谓语用于在查找节点时提供更详尽的信息,谓语被嵌在方括号中。下面是一些带有谓语的XPath表达式:
```
/root/child[3] {选取root元素的第三个child子元素,注意,这和数组下标不一样,从1开始计数
//child[@attr] {选取所有具有属性attr的child元素
//child[@attr="val"]/desc {选取所有属性attr的值为val的child元素的子元素desc
//child[desc] {选取所有的有desc子元素的child
//child[position()>3] {position()是XPath中的一个函数,表示节点的位置
//child[@attr>12] {XPath表达式还可以进行数值比较,该表达式将选取attr属性值大于12的child元素
//child[last()] {last()函数返回节点列表最后的位置,该表达式将选取最后一个child元素
```
### 通配符
XPath 通配符可用来选取未知的 XML 元素。
* * ,和CSS中的选择符一样,这将匹配任何元素节点
* @* ,匹配任何属性节点
* node() ,匹配任何类型的节点
```
/root/* {选取根元素下面的所有子元素
/root/node() {选取根元素下面的所有节点,包括文本节点
//* {选取文档中所有元素
//child[@*] {选取所有具有属性的child元素
//@* {选取所有的属性节点
```
### 组合路径
与CSS中使用逗号组合使用多个选择符一样,XPath支持一种使用"|"来组合多个路径的语法!
```
/root | /root/child {选取根元素root与它下面的子元素child
//child | //desc {选取所有的child元素与desc元素
```
### XPath 运算符
下面列出了可用在 XPath 表达式中的运算符:
* | ,计算两个节点集
* + ,加法
* - ,减法
* * ,乘法
* div ,除法,因为/已经被作为路径符了,所以不能用来作为除法标识
* mod ,取余
* = ,等于
* != ,不等于
* < ,小于
* <= ,小于或等于
* > ,大于
* >= ,大于或等于
* or ,或
* and ,与
### XPath 轴
轴可定义某个相对于当前节点的节点集。下面一可用的轴名称与对应的结果:
* ancestor 选取当前节点的所有先辈(父、祖父等)
* ancestor-or-self 选取当前节点的所有先辈(父、祖父等)以及当前节点本身
* attribute 选取当前节点的所有属性
* child 选取当前节点的所有子元素。
* descendant 选取当前节点的所有后代元素(子、孙等)。
* descendant-or-self 选取当前节点的所有后代元素(子、孙等)以及当前节点本身。
* following 选取文档中当前节点的结束标签之后的所有节点。
* namespace 选取当前节点的所有命名空间节点
* parent 选取当前节点的父节点。
* preceding 选取文档中当前节点的开始标签之前的所有节点。
* preceding-sibling 选取当前节点之前的所有同级节点。
* self 选取当前节点。
事实上,一个完整的XPath表达式由"/"与"步"构成的,而步又是由 "轴" 、 "节点测试"和"谓语"构成的.如下:
```
step/step/..... {一个XPath表达式
{step的构成
轴名称::节点测试[谓语]
```
在一般的XPath表达式中,没有谓语即表达没有其它条件限制,而没有轴名称,则默认使用child.如"abc"与"child::abc"是等效的, 下面是一些与使用轴名称等效的简单XPath表达式:
* child::abc --------------------- abc(子元素abc)
* root/attribute::id ------------ root/@id(root的属性id)
* selft::node() ------------------ .(自身)
* parent::node() --------------- ..(父节点)
* child::* ------------------------ *(子元素)
* child::text() ------------------ text()(子文本节点)
* descendant::tag ------------ .//tag (后代tag元素)
XPath还包含一套函数库,如position与last就是函数,一般的函数被用在谓语中,而在XSLT及XQuery中它们则得到了更广泛的使用.
## 浏览器中的XPath
IE浏览器对XPath的实现比较简单.一个XML DOM对象(及每个节点)都有selectSingleNode与selectNodes方法,传入XPath表达式,selectNodes返回匹配的节点列表,而selectSingleNode则只返回列表中第一个项目!
```
var xmlDom = getXMLDOM();//我们之前写的跨浏览器的XML DOM加载函数
loadXMLFile(xmlDom,"text.xml"); var root = xmlDom.selectSingleNode("/*");//返回文档根元素
root = xmlDom.selectNodes("/*")[0];//同上
var lastChild = xmlDom.selectSingleNode("/*/*[last()]");
```
Mozilla是根据DOM标准来实现对XPath的支持的。DOM Level 3附加标准DOM Level 3 XPath定义了用于在DOM中计算XPath表达式的接口。遗憾的是,这个标准要比微软直观的方式复杂得多。
虽然有好多与XPath相关的对象,最重要的两个是:XPathEvaluator和XPathResult。XPathEvaluator利用方法evaluate()计算XPath表达式。
evaluate()方法有五个参数:XPath表达式、上下文节点、命名空间解释程序和返回的结果的类型,同时,在XPathResult中存放结果(通常为null)。
命名空间解释程序,只有在XML代码用到了XML命名空间时才是必要的,所以通常留空,置为null。返回结果的类型,可以是以下十个常量值之一:
* XPathResult.ANY_TYPE——返回符合XPath表达式类型的数据
* XPathResult.ANY_UNORDERED_NODE_TYPE——返回匹配节点的节点集合,但顺序可能与文档中的节点的顺序不匹配
* XPathResult.BOOLEAN_TYPE——返回布尔值
* XPathResult.FIRST_ORDERED_NODE_TYPE——返回只包含一个节点的节点集合,且这个节点是在文档中第一个匹配的节点
* XPathResult.NUMBER_TYPE——返回数字值
* XPathResult.ORDERED_NODE_ITERATOR_TYPE——返回匹配节点的节点集合,顺序为节点在文档中出现的顺序。这是最常用到的结果类型
* XPathResult.ORDERED_NODE_SNAPSHOT_TYPE——返回节点集合快照,在文档外捕获节点,这样将来对文档的任何修改都不会影响这个节点列表。节点集合中的节点与它们出现在文档中的顺序一样
* XPathResult.STRING_TYPE——返回字符串值
* XPathResult.UNORDERED_NODE_ITERATOR_TYPE——返回匹配节点的节点集合,不过顺序可能不会按照节点在文档中出现的顺序排列
* XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE——返回节点集合快照,在文档外捕获节点,这样将来对文档的任何修改都不会影响这个节点列表。节点集合中的节点和文档中原来的顺序不一定一样。
下面是使用ORDERED_NODE_ITERATOR_TYPE的例子:
```
var xmlDom = getXMLDOM();//我们之前写的跨浏览器的XML DOM加载函数
loadXMLFile(xmlDom,"text.xml"); var evaluator = new XPathEvaluator(); var result =evaluator.evaluate("/root",xmlDom,null,XPathResult.ORDERED_NODE_ITERATOR_TYPE,null); var node; if (result) {//执行失败会返回null
while(node=result.iterateNext()) {//这个列表必须使用iterateNext方法遍历
alert(node.tagName);
}
}
```
- 介绍
- HTML/CSS 教程
- 第 1 章 HTML5 概述
- 第 2 章 基本格式
- 第 3 章 文本元素
- 第 4 章 超链接和路径
- 第 5 章 分组元素
- 第 6 章 表格元素
- 第 7 章 文档元素
- 第 8 章 嵌入元素
- 第 9 章 音频和视频
- 第 10 章 表单元素[上]
- 第 10 章 表单元素[中]
- 第 10 章 表单元素[下]
- 第 11 章 全局属性和其他
- 第 12 章 CSS 入门
- 第 13 章 CSS 选择器[上]
- 第 14 章 CSS 颜色与度量单位
- 第 15 章 CSS 文本样式[上]
- 第 15 章 CSS 文本样式[下]
- 第 16 章 CSS 盒模型[上]
- 第 16 章 CSS 盒模型[下]
- 第 17 章 CSS 边框与背景[上]
- 第 17 章 CSS 边框与背景[下]
- 第 18 章 CSS 表格与列表
- 第 19 章 CSS 其他样式
- 第 20 章 CSS3 前缀和 rem
- 第 21 章 CSS3 文本效果
- 第 21 章 CSS3 文本效果
- 第 23 章 CSS3 边框图片效果
- 第 24 章 CSS3 变形效果[下]
- 第 25 章 CSS3 过渡效果
- 第 26 章 CSS3 动画效果
- 第 27 章 CSS 传统布局[上]
- 第 27 章 CSS 传统布局[下]
- 第 28 章 CSS3 多列布局
- 第 29 章 CSS3 弹性伸缩布局[上]
- 第 29 章 CSS3 弹性伸缩布局[中]
- 第 29 章 CSS3 弹性伸缩布局[下]
- 第 30 章 使用 Emmet 插件
- Bootstrap 教程
- 第 1 章 Bootstrap 介绍
- 第 2 章 排版样式
- 第 3 章 表格和按钮
- 第 4 章 表单和图片
- 第 5 章 栅格系统
- 第 6 章 辅组类和响应式工具
- 第 7 章 图标菜单按钮组件
- 第 8 章 输入框和导航组件
- 第 9 章 路径分页标签和徽章组件
- 第 10 章 巨幕页头缩略图和警告框组件
- 第 11 章 进度条媒体对象和 Well 组件
- 第 12 章 列表组面板和嵌入组件
- 第 13 章 模态框插件
- 第 14 章 下拉菜单和滚动监听插件
- 第 15 章 标签页和工具提示插件
- 第 16 章 弹出框和警告框插件
- 第 17 章 按钮和折叠插件
- 第 18 章 轮播插件
- 第 19 章 附加导航插件
- 第 20 章 项目实战--响应式导航[1]
- 第 20 章 项目实战--响应式轮播图[2]
- 第 20 章 项目实战--首页内容介绍[上][3]
- 第 20 章 项目实战--首页内容介绍[下][4]
- 第 20 章 项目实战--资讯内容[5,6]
- 第 20 章 项目实战--案例和关于[7]
- javaScript 教程
- javascript快速入门1--JavaScript前世今生,HelloWorld与开发环境
- javascript快速入门2--变量,小学生数学与简单的交互
- javascript快速入门3--分支判断与循环
- javascript快速入门4--函数与内置对象
- javascript快速入门5--数组与对象
- javascript快速入门6--Script标签与访问HTML页面
- javascript快速入门7--ECMAScript语法基础
- javascript快速入门8--值,类型与类型转换
- javascript快速入门9--引用类型
- javascript快速入门10--运算符,语句
- javascript快速入门11--正则表达式
- javascript快速入门12--函数式与面向对象
- javascript快速入门13--BOM——浏览器对象模型(Browser Object Model)
- javascript快速入门14--DOM基础
- javascript快速入门15--节点
- javascript快速入门15--表单
- javascript快速入门16--表格
- javascript快速入门17--事件
- javascript快速入门18--样式
- javascript快速入门19--定位
- javascript快速入门20--Cookie
- javascript快速入门21--DOM总结
- javascript快速入门22--Ajax简介
- javascript快速入门23--XHR—XMLHttpRequest对象
- javascript快速入门24--XML基础
- javascript快速入门25--浏览器中的XML
- javascript快速入门26--XPath
- javascript快速入门27--XSLT基础
- PHP 教程
- 第一章 如何加载运行已发布的PHP项目
- 第二章 PHP基础
- 第三章 操作符与控制结构
- 第四章 数学运算
- 第五章 数组
- 第六章 目录与文件
- 第七章 自定义函数
- 第八章 字符串处理
- 第九章 正则表达式
- 第十章 日期与时间
- 第十一章 表单与验证
- 第十二章 会话控制
- 第十三章 上传文件
- 第十四章 处理图像
- 第十五章 MySQL 数据库
- 第十六章 PHP 操作MySQL
- 第十七章 面向对象基础
- 第十八章 面向对象的特性
- 第十九章 面向对象的工具