爬虫基础一 Chrome 开发者工具 与 XPath选择Html

一、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可靠性最佳

文章引用：

• 《精通Python爬虫框架Scrapy》
•  W3cschool：http://www.w3school.com.cn/xpath/xpath_functions.asp
•  https://www.cnblogs.com/Fang3s/p/3965231.html