一、Chrome 开发者工具的使用
chrome开发者工具
简单介绍
Element：把Html文档以DOM(Document Object Model)树的形式呈现出来
Console：用来输入命令的控制台，例如用XPath的命令查找相关html的元素
Sources: 网页的目录结构(代码<css, html....>、资源文件等),可用于了解网页的代码设计的层次，及其使用css代码等。
Other:https://www.cnblogs.com/Fang3s/p/3965231.html
二、XPath选择Html元素
1.路径表达式：
在开发者工具中Console界面使用$x工具函数：
使用Chrome获取Xpath表达式
2.常见函数、及其表达式：
条件表达式：元素[条件表达式]
id为home的div标签
div[@id = "home"]
text():获取文本信息的函数
获取id为firstHeading的h1标签下span中的text
//h1[@id="firstHeading"]/span/text()
多个相同元素的数组选择:img[]
选择class属性值为infobox的表格中的第一张图片的url
//table[@class="infobox"]//img[1]/@src
逻辑运算and 和 contains()函数
contains可用来对属性的选择(匹配)contains(@属性关键字，"属性值")
and就是与
获取class属性包含ltr和skin-vector的任意元素内所h1中的文本
//*[contains(@class,"ltr") and contains(@class, "skin-vector")]//h1//text()
开头固定的字符串匹配：starts-with(relative, base)
选择class属性以reflist开头的div标签中所有的url
//div[starts-with(@class, "reflist")]//a/@href
获取页面中每张图片的URL
//img/@src
详细XPath内容可参见W3cschool：http://www.w3school.com.cn/xpath/index.asp
3.XPath表达式使用的注意事项
- 避免使用数组索引(数值）
//*[@id="myid"]/div/div/div[1]/div[2]/div[1]/div[1]/a/img 例如广告区域一旦在其增加一个div或减少一个div就可能照成上述表达式的数据索引不能匹配到 理想的信息，应该尽可能的使用id号或者class等属性进行查找元素,提高代码的鲁棒性 //div[@class="thumbnail"]/a/img - 类并没有那么好用：布局类通常是通过css来改变页面的外观，一旦布局发生变化，可能class属性值就会发生变化
//div[@class="thumbnail"]/a/img 当页面布局发生变化时，信息就变为 //div[@class = "priview green"]/a/img - 有意义的面向数据的类比具体面向布局的类更好：有意义的数据类的有效期相对较长且不会轻易改变
- ID可靠性最佳
文章引用：