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 有多个，比如‘
北京
’ 如果要选它，对应的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