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"]