xpath简明教程

1. XPath简介

        XPath (XML Path Language) 是由国际标准化组织W3C指定的，用来在 XML 和 HTML 文档中选择节点的语言。目前主流浏览器 (chrome、firefox，edge，safari) 都支持XPath语法，xpath有 1 和 2 两个版本，目前浏览器支持的是 xpath 1的语法。

2. XPath语法

        2.1  根结点

        xpath 语法中，整个HTML文档根节点用'/‘表示，如果我们想选择的是根节点下面的html节点，则可以在搜索框输入

/html

        如果输入下面的表达式

/html/body/div

        这个表达式表示选择html下面的body下面的div元素，‘/’ 表示直接子节点关系。

       2.2  绝对路径选择

        从根节点开始的，到某个节点，每层都依次写下来，每层之间用‘/’分隔的表达式，就是某元素的绝对路径。上面的xpath表达式‘/html/body/div’，就是一个绝对路径的xpath表达式。

        2.3  相对路径选择

        有的时候，我们需要选择网页中某个元素， 不管它在什么位置 。比如，选择示例页面的所有标签名为 div 的元素，xpath只需要在前面加 ‘//’ , 表示从当前节点往下寻找所有的后代元素,不管它在什么位置。所以xpath表达式，应该这样写：

//div

        ‘//’符号也可以继续加在后面,比如，要选择所有的div元素里面的所有的p元素 ，不管div 在什么位置，也不管p元素在div下面的什么位置，则可以这样写：

 //div//p

        如果，要选择所有的 div元素里面的直接子节点p，xpath就应该这样写：

 //div/p

        2.4  通配符

        如果要选择所有div节点的所有直接子节点，可以使用表达式：

 //div/*

        ‘*’是一个通配符，对应任意节点名的元素。

        2.5  根据属性选择

        Xpath 可以根据属性来选择元素，根据属性来选择元素的格式是

[@属性名='属性值']

注意：
属性名注意前面有个‘@’；
属性值一定要用引号，可以是单引号，也可以是双引号；

        2.5.1 根据id属性选择。
        选择 id 为 west 的元素，可以这样：

 //*[@id='west']

        2.5.2 根据class属性选择
        选择所有select元素中class为single_choice的元素，可以这样 ：

//select[@class='single_choice']

        如果一个元素class 有多个，比如‘<p id="beijing" class='capital huge-city'>北京</p>’
如果要选它，对应的xpath 就应该是：

//p[@class="capital huge-city"]

        不能只写一个属性，像这样‘//p[@class="capital"]’则不行。
        2.5.3 根据其他属性
        同样的道理，我们也可以利用其它的属性选择。比如选择具有multiple属性的所有页面元素，可以这样：

//*[@multiple]

        2.5.4 属性值包含字符串
        要选择 style属性值包含color字符串的页面元素，可以这样：

//*[contains(@style,'color')]

        要选择style属性值以 color字符串开头的页面元素，可以这样： 

//*[starts-with(@style,'color')]

        要选择 style属性值 以 某个 字符串 结尾 的 页面元素 ，大家可以推测是 ‘//*[ends-with(@style,'color')]’， 但是，很遗憾，这是xpath 2.0 的语法 ，目前浏览器都不支持。

2.6  按次序选择

        xpath可以根据次序选择元素。

        2.6.1 选取第几个子元素
        直接在方括号中使用数字表示次序比如要选择 p类型第2个的子元素，就是：

//p[2]

        注意，选择的是 p类型第2个的子元素，不是第2个子元素，并且是p类型 。
        再比如，要选取父元素为div 中的 p类型第2个子元素：

//div/p[2]

        也可以选择第2个子元素，不管是什么类型，采用通配符‘*’。比如选择父元素为div的第2个子元素，不管是什么类型，可这样表示：

//div/*[2]

        2.6.2 选取倒数第几个子元素
        比如选取p类型倒数第1个子元素：

//p[last()]

        选取p类型倒数第2个子元素：

//p[last()-1]

        选择父元素为div中p类型倒数第3个子元素：

//div/p[last()-2]

        2.6.3 范围选择
        xpath还可以选择子元素的次序范围。比如选取option类型第1到2个子元素：

//option[position()<=2]
或者
//option[position()<3]

        选择class属性为multi_choice的前3个子元素：

//*[@class='multi_choice']/*[position()<=3]

        选择class属性为multi_choice的后3个子元素：

//*[@class='multi_choice']/*[position()>=last()-2]

为什么不是 last()-3 呢？ 因为：

last() 本身代表最后一个元素
last()-1 本身代表倒数第2个元素
last()-2 本身代表倒数第3个元素

        2.7  组选择

        组选择，可以同时使用多个表达式，多个表达式选择的结果都是要选择的元素，xpath的组选择语法是用竖线隔开多个表达式。
        比如，要选所有的option元素和所有的 h4元素，可以使用：

//option | //h4

        再比如，要选所有的 class为single_choice和class为multi_choice的元素，可以使用：

//*[@class='single_choice'] | //*[@class='multi_choice']

        2.8  选择父节点

        xpath可以选择父节点，某个元素的父节点用 /.. 表示。比如要选择id为china的节点的父节点，可以这样写：

 //*[@id='china']/.. 

        当某个元素没有特征可以直接选择，但是它有子节点有特征， 就可以采用这种方法，先选择子节点，再指定父节点。
        还可以继续找上层父节点，比如：

 //*[@id='china']/../../..

        2.9  兄弟节点选择

        xpath也可以选择后续兄弟节点，用这样的语法‘following-sibling::’。比如要选择class为single_choice的元素的所有后续兄弟节点： 

//*[@class='single_choice']/following-sibling::*

        如果，要选择后续节点中的div节点，就应该这样写：

//*[@class='single_choice']/following-sibling::div

        xpath还可以选择前面的兄弟节点，用这样的语法‘preceding-sibling::’，比如要选择 class为single_choice的元素的所有前面的兄弟节点： 

//*[@class='single_choice']/preceding-sibling::*

        2.10  注意点

        要在某个元素内部使用xpath选择元素，需要在xpath表达式最前面加个点，像这样：

.//p