Learning Scrapy 0 HTML and XPath

The Learning Scrapy notes is based on the Learning Scrapy book.
基于 Learning Scrapy 的个人笔记

• XPath可以在Chrome里直接复制，指定元素，右键复制提供对应的XPath地址

理解HTML and XPath

打开url的步骤

1. 发送给服务器请求 URL (domian name(xxx.com) + other data(e.g. cookies)) send to server
2. 收到服务器的HTML文件回复 (网页源代码) server replies with HTML document (or XML, JSON)
3. 把文件转化为树形表示 HTML translated to a tree reprsentation insider a browser: DOM
4. 对树形结构进行渲染 internal representation rendered

URL的组成

1. 主域名，用来定位服务器，通过DNS(Domain Name System)， 比如：

   • 发送urlhttps://mail.google.com/mail/u/0/#inbox,
   • 首先给mail.google.com发送一个DNS请求, 会解析为IP地址173.194.71.83.。
   • 所以实际是https://173.194.71.83/mail/u/0/#inbox

2. 其余信息，用来帮助服务器理解需求

原生HTML文件

基于World Wide Web规范的纯文本格式，就是网页源代码，
虽然是html文件，但是没有合适的空格。基本上全部挤在一起。
一个html文件由组成。

树形表示

是浏览器对HTML文件的一个’美化’, 具有可读性，增加空格，换行。
每个浏览器都对应的内部数据结构用来渲染页面。DOM表示是一个跨平台的表示被大多数浏览器支持。通过查看元素可以查看树形表示。

通过XPath提取HTML元素

XPath用来提取HTML中的指定元素。
在Chrome中的console中，输入$x('//h1')，即可return对应的<h1>元素

常用XPath表达

• 会无视css元素？link link active都会选中

$x(‘/html’)$x(‘/html/body’)
$x(‘/html/body/div/p’)$x(‘/html/body/div/p[1]’) 选择对应的第一个p元素

/直接继承
//全选指定元素

$x('//p') 选择页面全部p元素
$x('//div/a') 直接在div元素下的a元素
$x('//div//a') 间接包含在div元素下的a元素
$x('//a/@class') 选中指定属性

$x('//a/text()') 选中text
$x('//div/*') 选中div下的全部元素

或者用筛选函数 not(),contains(), starts-with()
$x('//a[contains(@href, "iana")]')
$x('//a[starts-with(@href, "http://www.")]')
$x('//a[not(contains(@href, "abc"))]')

常见example:
//*[contains(@class,"ltr") and contains(@class,"skin-vector")]//h1//text()

拔取每一幅图片//img/@src

应对HTML变化

• 避免过多的结构
  比如//*[@id="myid"]/div/div/div[1]/div[2]/div/div[1]/div[1]/a/img
  可以换成 //div[@class="thumbnail"]/a/img
• classes应该选择更有针对性的
• IDs 针对性更强 //[@id="order-F4982322"]