XPath是一种能够快速在HTML文档中选择并抽取元素、属性和文本的方法。html
在Chrome,打开开发者工具,能够使用$x工具函数来使用XPath来选择元素,好比选中全部的超连接。node
XPath经过"路径表达式"(Path Expression)来选择节点。函数
在形式上,"路径表达式"与传统的文件系统很是相似。工具
好比咱们依次得到Html节点(即最根节点)、Html下的Body节点、Html下的Body下的全部Div节点。post
单斜杠与双斜杠: 学习
在这里咱们使用了单斜杠(/)做为最开始的元素,表示从根节点选取。若是我不想每次都从HTML元素出发,想直接取到Body元素,能够使用双斜杠(//),它表示直接命中待选择元素,而不考虑位置,如//body能够直接取到Body元素。htm
获取到节点的属性,能够使用@符号blog
[例1]开发
//h1/a/@id :获取全部h1元素直接子元素a的id属性。文档
获取节点的文本,使用text()函数
[例1]
//h1/a/text():获取全部h1元素直接子元素a的文本内容。
咱们以一个简易的类HTML文档,来进行实例分析。
<bookstore> <book> <title lang="eng">Harry Potter</title> <price>29.99</price> </book> <book> <title lang="eng">Learning XML</title> <price>39.95</price> </book> </bookstore>
[例1]
bookstore :选取 bookstore 元素的全部子节点。
[例2]
/bookstore :选取根节点bookstore,这是绝对路径写法。
[例3]
bookstore/book :选取全部属于 bookstore 的子元素的 book元素,这是相对路径写法。
[例4]
//book :选择全部 book 子元素,而无论它们在文档中的位置。
[例5]
bookstore//book :选择全部属于 bookstore 元素的后代的 book 元素,而无论它们位于 bookstore 之下的什么位置。
[例6]
//@lang :选取全部名为 lang 的属性。
谓语用来在查询的时候设置条件,来达到筛选的效果。
[例1]
//div[@class] :选择文档中的全部拥有class属性的div节点。
[例2]
//div[@class='postTitle']:选择文档中的全部拥有class属性且值为postTitle的div节点。
[例1]
//div[a] :选择文档中的全部拥有a子元素的div节点。
"*"表示匹配任何元素节点。"@*"表示匹配任何属性值。node()表示匹配任何类型的节点。
[例1]
//* :选择文档中的全部元素节点。
[例2]
/*/* :表示选择全部第二层的元素节点。
[例3]
/HTML/* :表示选择HTML的全部元素子节点。
[例4]
//title[@*] :表示选择全部带有属性的title元素。
[例5]
//book/title | //book/price :表示同时选择book元素的title子元素和price子元素。