web scraper插件爬蟲進階（能知足非技術人員的爬蟲需求，建議收藏！！！！）

爲了照顧更多的小夥伴，你們的學習能力及瞭解程度都不一樣，所以你們能夠經過如下目錄來有選擇性的學習，節約你們的時間。

備註：  必定要實操！！！

           必定要實操！！！

           必定要實操！！！

目錄：

#瞭解和介紹

#下載及安裝說明

#工欲善其事必先利其器

#簡單嘗試（初期用法）案例解析：百度貼吧NBA吧話題爬取

#初級用法（控制連接完成批量爬蟲）進階 案例解析：豆瓣電影TOP250名稱爬取

#中級用法（同步完成多項參數爬蟲）進階 案例解析：豆瓣電影TOP250名稱爬取

#高級進階（完成動態類（翻頁；滾動加載））爬蟲

 

 

#瞭解和介紹

相信能看到這篇文章的小夥伴們應該多多少少對web scraper有些瞭解，在這裏就再也不過分闡述。

首先先簡單介紹一下web scraper（web scraper 網頁刮板）插件

是一款瀏覽器插件，或者是一款應用程序，用於簡單的非代碼工程化的爬蟲工具，固然正是由於如此因此它的缺點即是對大規模的（數據集大、網頁複雜）爬蟲工程較爲吃力，優勢即是簡單易操做，能知足小白的平常爬蟲需求。

 

 #下載及安裝說明

其實一直一來web scraper是Googled的插件，可是由於Google下載商場在國內受到限制，因此爲了節約時間我就不介紹Goog瀏覽器如何下載此插件（感興趣的可自行查閱相關的資料，有不少）。

而FireFox瀏覽器插件能夠正常在國內訪問及安裝，而且適配環境和Google瀏覽器一致，因此建議你們下載Firefox瀏覽器來使用web scraper插件。

1.下載安裝Firefox瀏覽器(地址：https://www.mozilla.org/zh-CN/firefox/download/thanks/）

2.打開瀏覽器，點擊右上角菜單欄，找到附加組件選項

 

 3.進入附加組件管理器，左側選擇欄選擇組件，搜索欄內搜索 web scraper，點擊添加到Firefox便可，插件安裝成功後，Firefox瀏覽器右上角便會顯示web scraper圖標，這表示安裝成功了。

 

#工欲善其事必先利其器（後面的都要認真學了哦）

 首先使用插件須要打開瀏覽器的開發者後臺(想深刻了解的小夥伴能夠打開http://www.javashuo.com/article/p-wvcddjgz-dz.html學習）

如何打開呢，首先定格在瀏覽器頁面，而後按 F12 就能夠實現(QQ 瀏覽器 F12 被禁掉了)。有的電腦須要fn+f12,Mac 電腦也能夠用 option + command + I 打開，Win 電腦能夠用 Ctrl + Shift + I 打開。

打開後會發現工具欄最右側出現web scraper圖標，點擊後便進入web scraper插件，爬蟲工做就從這裏展開了！

 

 打開後發現有三個工做欄：

 

先介紹如下URL：統一資源定位符，說白了就是一個網頁地址，經常使用的https://www.baidu.com/ 這即是一個URL

sitemaps：網站地圖

 create new sitemap：建立新的網站地圖

create new sitemap子工做欄：

                                                create sitemap （建立網站地圖），打開後會name和URL選項

                                                import sitemap （導入網站地圖），打開後會有個Sitemap JSON的選項，顧名思義，這個選項須要咱們自主添加json來建立網站地圖，（後面會學習到）

好了，先知道這麼多便可，下面開始咱們的web scraper爬蟲進階，衝啊

今天咱們開始數據抓取的第一課，完成咱們的第一個爬蟲。由於是剛剛開始，操做我會講的很是詳細，可能會有些囉嗦，但願各位不要嫌棄啊：）

有人以前可能學過一些爬蟲知識，總以爲這是個複雜的東西，什麼 HTTP、HTML、IP 池，在這裏咱們都不考慮這些東西。一是小的數據量根本不須要考慮，二是這些亂七八糟的東西根本沒有說到爬蟲的本質。

爬蟲的本質是什麼？其實就是找規律。

並且爬蟲的找規律難度，大部分都是小學三年級的數學題水平。

咱們下面拿個例子說明一下，下圖歷史文章的一個截圖，咱們能夠很清晰的看到，每一條推文能夠分爲三大部分：標題、圖片和做者，咱們只要找到這個規律，就能夠批量的抓取這類數據。

好了，理論的地方咱們講完了，下面咱們開始進行實操。

但凡作爬蟲練手，第一個爬取的網站通常都是豆瓣電影 TOP 250，網址連接是 https://movie.douban.com/top250?start=0&filter=。第一次上手，咱們爬取的內容儘可能簡單，因此咱們只爬取第一頁的電影標題。

瀏覽器按 F12 打開控制檯，並把控制檯放在網頁的下方（具體操做能夠看上一篇文章），而後找到 Web Scraper 這個 Tab，點進去就來到了 Web Scraper 的控制頁面。

進入 Web Scraper 的控制頁面後，咱們按照 Create new sitemap -> Create Sitemap 的操做路徑，建立一個新的爬蟲，sitemap 是啥意思並不重要，你就當他是個爬蟲的別名就行了。

咱們在接下來出現的輸入框裏依次輸入爬蟲名和要爬取的連接。

爬蟲名可能會有字符類型的限制，咱們看一下規則規避就行了，最後點擊 Create Sitemap 這個按鈕，建立咱們的第一個爬蟲。

這時候會跳到一個新的操做面板，不要管別的，咱們直接點擊 Add new selector 這個藍底白字的按鈕，顧名思義，建立一個選擇器，用來選擇咱們想要抓取的元素。

這時候就要開始正式的數據抓取環節了！咱們先觀察一下這個面板有些什麼東西：

1.首先有個 Id，這個就是給咱們要爬取的內容標註一個 id，由於咱們要抓取電影的名字，簡單起見就取個 name 吧；

2.電影名字很明顯是一段文字，因此 Type 類型確定是 Text，在這個爬蟲工具裏，默認 Type 類型就是 Text，此次的爬取工做就不須要改動了；

3.咱們把多選按鈕 Multiple 勾選上，由於咱們要抓的是批量的數據，不勾選的話只能抓取一個；

4.最後咱們點擊黃色圓圈裏的 Select，開始在網頁上勾選電影名字；

當你把鼠標移動到網頁時，會發現網頁上出現了綠色的方塊兒，這些方塊就是網頁的構成元素，當咱們點擊鼠標時，綠色的方塊兒就會變爲紅色，表示這個元素被選中了：

這時候咱們就能夠進行咱們的抓取工做了。

咱們先選擇「肖生克的救贖」這個標題，而後再選擇「霸王別姬」這個標題（注意：想達到多選的效果，必定要手動選取兩個以上的內容）

選完這兩個標題後，向下拉動網頁，你就會發現全部的電影名字都被選中了：

拉動網頁檢查一遍，發現全部的電影標題都被選中後，咱們就能夠點擊 Done selecting!這個按鈕，表示選擇完畢；

點擊按鈕後你會發現下圖的紅框位置會出現了一些字符，通常出現這個就表示選取成功了：

咱們點擊 Data preview 這個按鈕，就能夠預覽咱們的抓取效果了：

沒什麼問題的話，關閉 Data Preview 彈窗，翻到面板的最下面，有個 Save selector 的藍色按鈕，點擊後咱們會回退到上一個面板。

這時候你會發現多了一行數據，其實就是咱們剛剛的操做內容被記錄下來了。

在頂部的 tab 欄，有一個 Sitemap top250 的 tab，這個就是咱們剛剛建立的爬蟲。點擊它，再點擊下拉菜單裏的 Scrape 按鈕，開始咱們的數據抓取。

這時候你會跳到另外一個面板，裏面有兩個輸入框，先別管他們是什麼，所有輸入 2000 就行了。

點擊 Start scraping 藍色按鈕後，會跳出一個新的網頁，Web Scraper 插件會在這裏進行數據抓取：

通常彈出的網頁自動關閉就表明着數據抓取結束了，咱們點擊面板上的 refresh 藍色按鈕，就能夠看到咱們抓取的數據了！

在這個預覽面板上，第一列是 web scraper 自動添加的編號，沒啥意義；第二列是抓取的連接，第三列就是咱們抓取的數據了。

這個數據會存儲在咱們的瀏覽器裏，咱們也能夠點擊 Sitemap top250 下的 Export data as CSV，這樣就能夠導出成 .csv 格式的數據，這種格式能夠用 Excel 打開，咱們能夠用 Excel 作一些數據格式化的操做。

今天咱們爬取了豆瓣電影TOP250 的第 1 頁數據（也就是排名最高的 25 部電影），下一篇咱們講講，如何抓取全部的電影名。

上篇文章咱們爬取了豆瓣電影 TOP250 前 25 個電影的數據，今天咱們就要在原來的 Web Scraper 配置上作一些小改動，讓爬蟲把 250 條電影數據所有爬取下來。

前面咱們同時說了，爬蟲的本質就是找規律，當初這些程序員設計網頁時，確定會依循一些規則，當咱們找到規律時，就能夠預測他們的行爲，達到咱們的目的。

今天咱們就找找豆瓣網站的規律，想辦法抓取所有數據。今天的規律就從經常被人忽略的網址連接開始。

 

1.連接分析

咱們先看看第一頁的豆瓣網址連接：

https://movie.douban.com/top250?start=0&filter=

1. https://movie.douban.com 這個很明顯就是個豆瓣的電影網址，沒啥好說的
2. top250 這個一看就是網頁的內容，豆瓣排名前 250 的電影，也沒啥好說的
3. ? 後面有個 start=0&filter= ，根據英語提示來看，好像是說篩選（filter），從 0 開始（start）

 

再看看第二頁的網址連接，前面都同樣，只有後面的參數變了，變成了 start=25，從 25 開始；

咱們再看看第三頁的連接，參數變成了 start=50 ，從 50 開始；

分析 3 個連接咱們很容易得出規律：

start=0，表示從排名第 1 的電影算起，展現 1-25 的電影

start=25，表示從排名第 26 的電影算起，展現 26-50 的電影

start=50，表示從排名第 51 的電影算起，展現 51-75 的電影

…...

start=225，表示從排名第 226 的電影算起，展現 226-250 的電影

規律找到了就好辦了，只要技術提供支持就行。隨着深刻學習，你會發現 Web Scraper 的操做並非難點，最須要思考的其實仍是這個找規律。

 

2.Web Scraper 控制連接參數翻頁

Web Scraper 針對這種經過超連接數字分頁獲取分頁數據的網頁，提供了很是便捷的操做，那就是範圍指定器。

好比說你想抓取的網頁連接是這樣的：

• http://example.com/page/1
• http://example.com/page/2
• http://example.com/page/3

你就能夠寫成 http://example.com/page/[1-3]，把連接改爲這樣，Web Scraper 就會自動抓取這三個網頁的內容。

固然，你也能夠寫成 http://example.com/page/[1-100]，這樣就能夠抓取前 100 個網頁。

那麼像咱們以前分析的豆瓣網頁呢？它不是從 1 到 100 遞增的，而是 0 -> 25 -> 50 -> 75 這樣每隔 25 跳的，這種怎麼辦？

• http://example.com/page/0
• http://example.com/page/25
• http://example.com/page/50

其實也很簡單，這種狀況能夠用 [0-100:25] 表示，每隔 25 是一個網頁，100/25=4，爬取前 4 個網頁，放在豆瓣電影的情景下，咱們只要把連接改爲下面的樣子就好了；

https://movie.douban.com/top250?start=[0-225:25]&filter=

這樣 Web Scraper 就會抓取 TOP250 的全部網頁了。

 

3.抓取數據

解決了連接的問題，接下來就是如何在 Web Scraper 裏修改連接了，很簡單，就點擊兩下鼠標：

1.點擊 Stiemaps，在新的面板裏點擊 ID 爲 top250 的這列數據：

2.進入新的面板後，找到 Stiemap top250 這個 Tab，點擊，再點擊下拉菜單裏的 Edit metadata：

3.修改原來的網址，圖中的紅框是不一樣之處：

修改好了超連接，咱們從新抓取網頁就行了。操做和上文同樣，我這裏就簡單複述一下：

1. 點擊 Sitemap top250 下拉菜單裏的 Scrape 按鈕
2. 新的操做面板的兩個輸入框都輸入 2000
3. 點擊 Start scraping 藍色按鈕開始抓取數據
4. 抓取結束後點擊面板上的 refresh 藍色按鈕，檢測咱們抓取的數據

若是你操做到這裏並抓取成功的話，你會發現數據是所有抓取下來了，可是順序都是亂的。

咱們這裏先無論順序問題，由於這個屬於數據清洗的內容了，咱們如今的專題是數據抓取。先把相關的知識點講完，再攻克下一個知識點，纔是更合理的學習方式。

這期講了經過修改超連接的方式抓取了 250 個電影的名字。下一期咱們說一些簡單輕鬆的內容換換腦子，講講 Web Scraper 如何導入別人寫好的爬蟲文件，導出本身寫好的爬蟲軟件。

 

上兩期咱們學習瞭如何經過 Web Scraper 批量抓取豆瓣電影 TOP250 的數據，內容都太乾了，今天咱們說些輕鬆的，講講 Web Scraper 如何導出導入 Sitemap 文件。

前面也沒有說，SItemap 是個什麼東西，其實它就是咱們操做 Web Scraper 後生成的爬蟲文件，至關於 python 爬蟲的源代碼，導入 Web Scraper 一運行就能夠爬取數據。學習了這一章節，就能夠分享咱們的設置好的爬蟲文件了。

導出 Sitemap

導出 Sitemap 很簡單，好比說咱們建立的 top250 Sitemap，點擊 Sitemap top250，在下拉菜單裏選擇 Export Sitemap，就會跳到一個新的面板。

新的面板裏有咱們建立的 top250 的 Sitemap 信息，咱們把它複製下來，再新建一個 TXT 文件，粘貼保存就行了。

導入 Sitemap

導入 Sitemap 也很簡單，在建立新的 Sitemap 時，點擊 Import Sitemap 就行了。

在新的面板裏，在 Sitemap JSON 裏把咱們導出的文字複製進去，Rename Sitemap 裏取個名字，最後點擊 Import Sitemap 按鈕就能夠了。

這期咱們介紹了 Web Scraper 如何導入導出 Sitemap 爬蟲文件，下一期咱們對上一期的內容進行擴展，不僅僅抓取 250 個電影名，還要抓取每一個電影對應的排名，名字，評分和一句話影評。

 

 

在第 4 篇文章裏，我講解了如何抓取單個網頁裏的單類信息；

在第 5 篇文章裏，我講解了如何抓取多個網頁裏的單類信息；

今天咱們要講的是，如何抓取多個網頁裏的多類信息。

此次的抓取是在簡易數據分析 05的基礎上進行的，因此咱們一開始就解決了抓取多個網頁的問題，下面全力解決如何抓取多類信息就能夠了。

咱們在實操前先把邏輯理清：

上幾篇只抓取了一類元素：電影名字。這期咱們要抓取多類元素：排名，電影名，評分和一句話影評。

根據 Web Scraper 的特性，想抓取多類數據，首先要抓取包裹多類數據的容器，而後再選擇容器裏的數據，這樣才能正確的抓取。我畫一張圖演示一下：

咱們首先要抓取多個 container（容器），再抓取 container 裏的元素：編號、電影名、評分和一句話影評，當爬蟲運行完後，咱們就會成功抓取數據。

概念上搞清楚了，咱們就能夠講實際操做了。

若是對如下的操做有疑問，能夠看 簡易數據分析 04 的內容，那篇文章詳細圖解了如何用 Web Scraper 選擇元素的操做

1.點擊 Stiemaps，在新的面板裏點擊 ID 爲 top250 的這列數據

2.刪除掉舊的 selector，點擊 Add new selector 增長一個新的 selector

3.在新的 selector 內，注意把 Type 類型改成 Element（元素），由於在 Web Scraper 裏，只有元素類型才能包含多個內容。

咱們勾選的元素區域以下圖所示，確認無誤後點擊 Save selector 按鈕，就會回退到上一個操做面板。

在新的面板裏，點擊剛剛建立的 selector 那行數據：

點擊後咱們就會進入一個新的面板，根據導航咱們可知在 container 內部。

在新的面板裏，咱們點擊 Add new selector，新建一個 selector，用來抓取電影名，類型爲 Text，值得注意的是，由於咱們是在 container 內選擇文字的，一個 container 內只有一個電影名，因此多選不要勾選，要否則會抓取失敗。

選擇電影名的時候你會發現 container 黃色高亮，咱們就在黃色的區域裏選擇電影名就行了。

點擊 Save selector 保存選擇器後，咱們再建立三個選擇器，分別選擇編號、評分和一句話影評，由於操做和上面如出一轍，我這裏就省略講解了。

排名編號：

評分：

一句話影評：

咱們能夠在面板裏觀察咱們選擇的多個元素，一共有四個元素：分別爲 name、number、score 和 review，類型都是 Text，不須要多選，父選擇器都是 container。

咱們能夠點擊 點擊 Stiemap top250 下的 selector graph，查看咱們爬蟲選擇元素的層級關係，確認正確後咱們再點擊 Stiemap top250 下的 Selectors，回到選擇器展現面板。

下圖就是咱們此次爬蟲的層級關係，是否是和咱們以前理論分析的同樣？

確認選擇無誤後，咱們就能夠抓取數據了，操做在 簡易數據分析 04 、 簡易數據分析 05 裏都說過了，忘記的朋友能夠看舊文回顧一下。下圖是我抓取的數據：

仍是和之前同樣，數據是亂序的，不過這個沒關係，由於排序屬於數據清洗的內容了，咱們如今的專題是數據抓取。先把相關的知識點講完，再攻克下一個知識點，纔是更合理的學習方式。

咱們在Web Scraper 翻頁——控制連接批量抓取數據一文中，介紹了控制網頁連接批量抓取數據的辦法。

可是你在預覽一些網站時，會發現隨着網頁的下拉，你須要點擊相似於「加載更多」的按鈕去獲取數據，而網頁連接一直沒有變化。

因此控制連接批量抓去數據的方案失效了，因此咱們須要模擬點擊「加載更多」按鈕，去抓取更多的數據。

今天咱們講的，就是利用 web scraper 裏的 Element click 模擬點擊「加載更多」，去加載更多的數據。

此次的練習網站，咱們拿少數派網站的熱門文章做爲咱們的練習對象，對應的網址連接是：

https://sspai.com/tag/%E7%83%AD%E9%97%A8%E6%96%87%E7%AB%A0#home

爲了複習上一個小節的內容，此次咱們模擬點擊翻頁的同時，還要抓取多條內容，包括做者、標題、點贊數和評論數。

下面開始咱們的數據採集之路。

2019-12-22 補充：
少數派官網改版，和我當初寫教程的時抓取的網站有些許不一樣，主要改動有如下幾點：

• 「加載更多」按鈕改成「更多」按鈕，並且在網頁全屏的狀況下改成下拉自動加載，網頁寬度半屏的狀況下爲點擊「更多」按鈕翻頁，建議你們在半屏的狀況下練習
• 只能抓取做者、標題和點贊數這 3 個數據，沒法抓取評論數
• 網頁 UI 樣式有些許改動，但邏輯都是相通的，不影響教程學習和數據抓取

 

1.建立 sitmap

老規矩，第一步咱們先建立一個少數派的 sitmap，取名爲 sspai_hot，起始連接爲 https://sspai.com/tag/熱門文章#home。

2.建立容器的 selector

經過上一節的內容，咱們知道想在 web scraper 裏想抓取多種類型的數據，必須先建立一個容器（container），這個容器包含多種類型的數據，因此咱們第二步就是要建立容器的 selector。

要注意的是，這個 selector 的 Type 類型選爲 Element click，翻譯成中文就是模擬點擊元素，意如其名，咱們能夠利用這種類型模擬點擊「加載更多」按鈕。

這種類型的 selector，會多出幾個選項，第一個就是 Click selector，這個就是選擇「加載更多」按鈕的，具體操做可見下圖的動圖。

還有幾個多出來的選項，咱們一一解釋一下：

1.Click type

點擊類型，click more 表示點擊屢次，由於咱們要抓取批量數據，這裏就選擇 click more，還有一個 click once 選項，點擊一次

2.Click element uniqueness

這個選項是控制 Web Scraper 何時中止抓取數據的。好比說 Unique Text，表示文字改變時中止抓取數據。

咱們都知道，一個網站的數據不多是無窮無盡的，總有加載完的時候，這時候「加載更多」按鈕文字可能就變成「沒有更多」、「沒有更多數據」、「加載完了」等文字，當文字變更時，Web scraper 就會知道沒有更多數據了，會自動中止抓取數據。

3.Multiple

這個咱們的老朋友了，表示是否多選，這裏咱們要抓取多條數據，固然要打勾。

4.Discard initial elements

是否丟棄初始元素，這個主要是去除一些網站的重複數據用的，不是很重要，咱們這裏也用不到，直接選擇 Never discard，從不丟棄數據。

5.Delay

延遲時間，由於點擊加載更多後，數據加載須要一段時間，delay 就是等待數據加載的時間。通常咱們設置要大於等於 2000，由於延遲 2s 是一個比較合理的數據，若是網絡很差，咱們能夠設置更大的數字。

3.建立子選擇器

接下來咱們建立幾個子選擇器，分別抓取做者、標題、點贊數和評論數四種類型的數據，詳細操做我在上一篇教程中已經說明了，這裏我就不詳細說明了。整個爬蟲的結構以下，你們能夠參考一下：

4.抓取數據

按照 Sitemap spay_hot -> Scrape 的操做路徑就能夠抓取數據了。

今天咱們學習了經過 Web Scraper 抓取點擊加載更多類型的網頁。實踐過程當中，你會發現這種類型的網頁沒法控制爬取數目，不像豆瓣 TOP250，明明白白就是 250 條數據，很少也很多。下一篇咱們就聊聊，如何利用 Web Scraper，自動控制抓取的數目。

今天咱們說說 Web Scraper 的一些小功能：自動控制 Web Scraper 抓取數量和 Web Scraper 的父子選擇器。

如何只抓取前 100 條數據？

若是跟着上篇教程一步一步作下來，你會發現這個爬蟲會一直運做，根本停不下來。網頁有 1000 條數據，他就會抓取 1000 條，有 10W 條，就會抓取 10W 條。若是咱們的需求很小，只想抓取前 200 條怎麼辦？

若是你手動關閉抓取數據的網頁，就會發現數據所有丟失，一條都沒有保存下來，因此說這種暴力的方式不可取。咱們目前有兩種方式中止 Web Scraper 的抓取。

2019-10-26 補充：0.4.2 版本的 Web Scraper 已經支持實時保存，也就是說手動關閉抓取數據的網頁也能夠保存數據了

1.斷網大法

當你以爲數據抓的差很少了，直接把電腦的網絡斷了。網絡一斷瀏覽器就加載不了數據，Web Scraper 就會誤覺得數據抓取完了，而後它會自動中止自動保存。

斷網大法簡單粗暴，雖不優雅，可是有效。缺點就是你得在旁邊盯着，關鍵點手動操做，不是很智能。

2.經過數據編號控制條數

2019-10-26 補充：0.4.2 版本的 Web Scraper 改進了抓取方式，這種方法可能會失效

好比說上篇文章的少數派熱門文章爬蟲，container 的 Selector 爲 dl.article-card，他會抓取網頁裏全部編號爲 dl.article-card 的數據。

咱們能夠在這個 Selector 後加一個 :nth-of-type(-n+100)，表示抓取前 100 條數據，前 200 條就爲 :nth-of-type(-n+200)，1000 條爲 :nth-of-type(-n+1000)，以此類推。

這樣，咱們就能夠經過控制數據的編號來控制須要抓取的數據。

抓取連接數據時，頁面跳轉怎麼辦？

在上文抓取數據時，可能會遇到一些問題，好比說抓取標題時，標題自己就是個超連接，點擊圈選內容後打開了新的網頁，干擾咱們肯定圈選的內容，體驗不是很好。

其實 Web scraper 提供了對應的解決方案，那就是經過鍵盤來選擇元素，這樣就不會觸發點擊打開新的網頁的問題了。具體的操做面板以下所示，就是咱們點擊 Done Selecting  的那個控制條。

咱們把單選按鈕選擇後，會出現 S ，P， C 三個字符，意思分別以下：

S：Select，按下鍵盤的 S 鍵，選擇選中的元素

P：Parent，按下鍵盤的 P 鍵，選擇選中元素的父節點

C：Child，按下鍵盤的 C 鍵，選擇選中元素的子節點

咱們分別演示一下，首先是經過 S 鍵選擇標題節點：

咱們對比上個動圖，會發現節點選中變紅的同時，並無打開新的網頁。

如何抓取選中元素的父節點 or 子節點？

經過 P 鍵和 C 鍵選擇父節點和子節點：

按壓 P 鍵後，咱們能夠明顯看到咱們選擇的區域大了一圈，再按 C 鍵後，選擇區域又小了一圈，這個就是父子選擇器的功能。

這是簡易數據分析系列的第 10 篇文章。

友情提示：這一篇文章的內容較多，信息量比較大，但願你們學習的時候多看幾遍。

咱們在刷朋友圈刷微博的時候，總會強調一個『刷』字，由於看動態的時候，當把內容拉到屏幕末尾的時候，APP 就會自動加載下一頁的數據，從體驗上來看，數據會源源不斷的加載出來，永遠沒有盡頭。

咱們今天就是要講講，如何利用 Web Scraper 抓取滾動到底翻頁的網頁。

今天咱們的練手網站是知乎數據分析模塊的精華帖，網址爲：

https://www.zhihu.com/topic/19559424/top-answers

此次要抓取的內容是精華帖的標題、答題人和贊同數。下面是今天的教程。

1.製做 Sitemap

剛開始咱們要先建立一個 container，包含要抓取的三類數據，爲了實現滾動到底加載數據的功能，咱們把 container 的 Type 選爲 Element scroll down，就是滾動到網頁底部加載數據的意思。

在這個案例裏，選擇的元素名字爲 div.List-item。

爲了複習上一節經過數據編號控制條數的方法，咱們在元素名後加個 nth-of-type(-n+100) ，暫時只抓取前 100 條數據。

而後咱們保存 container 這個節點，並在這個節點下選擇要抓取的三個數據類型。

首先是標題，咱們取名爲 title，選擇的元素名爲 [itemprop='zhihu:question'] a：

而後是答題人名字 name 與 贊同數 like，選擇的元素名分別爲 #Popover10-toggle a 和 button.VoteButton--up：

2.爬取數據，發現問題

元素都選擇好了，咱們按 Sitemap zhihu_top_answers -> Scrape -> Start craping 的路徑進行數據抓取，等待十幾秒結果出來後，內容卻讓咱們傻了眼：

數據呢？我要抓的數據呢？怎麼全變成了 null？

在計算機領域裏，null 通常表示空值，表示啥都沒有，放在 Web Scraper 裏，就表示沒有抓取到數據。

咱們能夠回想一下，網頁上的的確確存在數據，咱們在整個的操做過程當中，惟一的變數就是選擇元素這個操做上。因此，確定是咱們選擇元素時出錯了，致使內容匹配上出了問題，沒法正常抓取數據。要解決這個問題，咱們就要查看一下網頁的構成。

3.分析問題

查看一下網頁的構成，就要用瀏覽器的另外一個功能了，那就是選擇查看元素。

1.咱們點擊控制面板左上角的箭頭，這時候箭頭顏色會變藍。

2.而後咱們把鼠標移動到標題上，標題會被一個藍色的半透明遮罩蓋住。

3.咱們再點擊一下標題，會發現咱們會跳轉到 Elements 這個子面板，內容是一些花花綠綠看不大懂的代碼

作到這裏內心別發怵，這些 HTML 代碼不涉及什麼邏輯，在網頁裏就是個骨架，提供一些排版的做用。若是你日常用 markdown 寫做，就能夠把 HTML 理解爲功能更復雜的 markdown。

結合 HTML 代碼，咱們先看看 [itemprop='zhihu:question'] a 這個匹配規則是怎麼回事。

首先這是個樹形的結構：

• 先是一個名字爲 h2 的標籤 <h2>...</h2>，它有個 class='ContentItem-title' 的屬性；
• 裏面又有個名爲 div 的標籤 <div>...</div>，它有個 itemprop='zhihu:question' 的屬性；
• div 標籤裏又有一個 名字爲 a 的標籤 <a>...</a>；
• a 標籤裏有一行字，就是咱們要抓取的標題：如何快速成爲數據分析師？

上句話從可視化的角度分析，其實就是一個嵌套的結構，我把關鍵內容抽離出來，內容結構是否是清晰了不少？

<h2 class='ContentItem-title'/> <div itemprop='zhihu:question'/> <a>如何快速成爲數據分析師？</a> </div> </h2> 

咱們再分析一個抓取標題爲 null 的標題 HTML 代碼。

咱們能夠很清楚的觀察到，在這個標題的代碼裏，少了名爲 div 屬性爲 itemprop='zhihu:question' 的標籤！這樣致使咱們的匹配規則匹配時找不到對應標籤，Web Scraper 就會放棄匹配，認爲找不到對應內容，因此就變成 null 了。

找到緣由後咱們就好解決問題了。

4.解決問題

咱們發現，選擇標題時，不管標題的嵌套關係怎麼變，總有一個標籤不變，那就是包裹在最外層的，屬性名爲 class='ContentItem-title' 的 h2 標籤。咱們若是能直接選擇 h2 標籤，不就能夠完美匹配標題內容了嗎？

邏輯上理清了關係，咱們如何用 Web Scraper 操做？這時咱們就能夠用上一篇文章介紹的內容，利用鍵盤 P 鍵選擇元素的父節點：

放在今天的課程裏，咱們點擊兩次 P 鍵，就能夠匹配到標題的父標籤 h2 （或 h2.ContentItem-title）：

以此類推，由於答題人名字也出現了 null，咱們分析了 HTML 結構後選擇名字的父標籤 span.AuthorInfo-name，具體的分析操做和上面差很少，你們能夠嘗試一下。

個人三個子內容的選擇器以下，能夠做爲一個參考：

最後咱們點擊 Scrape 爬取數據，檢查一下結果，沒有出現 null，完美！

5.吐槽時間

爬取知乎數據時，咱們會發現滾動加載數據那一起很快就作完了，在元素匹配那裏卻花了不少時間。

這間接的說明，知乎這個網站從代碼角度上分析，寫的仍是比較爛的。

若是你爬取的網站多了，就會發現大部分的網頁結構都是比較「爲所欲爲」的。因此在正式抓取數據前，常常要先作小規模的嘗試，好比說先抓取 20 條，看看數據有沒有問題。沒問題後再加大規模正式抓取，這樣作必定程度上能夠減小返工時間。

今天咱們講講如何抓取網頁表格裏的數據。首先咱們分析一下，網頁裏的經典表格是怎麼構成的。

• First Name 所在的行比較特殊，是一個表格的表頭，表示信息分類
• 2-5 行是表格的主體，展現分類內容

經典表格就這些知識點，沒了。下面咱們寫個簡單的表格 Web Scraper 爬蟲。

1.製做 Sitemap

咱們今天的練手網站是

http://www.huochepiao.com/search/chaxun/result.asp?txtChuFa=�Ϻ�&txtDaoDa=����

爬蟲的內容是抓取上海到北京的全部列車時刻表。

咱們先建立一個包含整個表格的 container，Type 類型選爲 Table，表示咱們要抓取表格。

具體的參數如上圖所示，由於比較簡單，就很少說了。

在這個面板下向下翻，會發現多了一個不同的面板。觀察一下你就會發現，這些數據其實就是表格數據類型的分類，在這個案例裏，他把車次、出發站、開車時間等分類都列了出來。

在 Table columns 這個分類裏，每一行的內容旁邊的選擇按鈕默認都是打勾的，也就是說默認都會抓取這些列的內容。若是你不想抓取某類內容，去掉對應的勾選就能夠了。

在你點擊 Save selector 的按鈕時，會發現 Result key 的一些選項報錯，說什麼 invalid format 格式無效：

解決這個報錯很簡單，通常來講是 Result key 名字的長度不夠，你給加個空格加個標點符號就行。若是還報錯，就試試換成英文名字：

解決報錯保存成功後，咱們就能夠按照 Web Scraper 的爬取套路抓取數據了。

2.爲何我不建議你用 Web Scraper 的 Table Selector？

若是你按照剛剛的教程作下里，就會感受很順利，可是查看數據時就會傻眼了。

剛開始抓取時，咱們先用 Data preview 預覽一下數據，會發現數據很完美：

抓取數據後，在瀏覽器的預覽面板預覽，會發現車次這一列數據爲 null，意味着沒有抓取到相關內容：

咱們下載抓取的 CSV 文件後，在預覽器裏打開，會發現車次的數據出現了，但出發站的數據又爲 null 了！

這不是坑爹呢！

關於這個問題我調查了半天，應該是 Web Scraper 對中文關鍵字索引的支持不太友好，因此會拋出一些詭異的 bug，所以我並不建議你們用它的 Table 功能。

若是真的想抓取表格數據，咱們能夠用以前的方案，先建立一個類型爲 Element 的 container，而後在 container 裏再手動建立子選擇器，這樣就能夠規避這個問題。

上面只是一個緣由，還有一個緣由是，在現代網站，不多有人用 HTML 原始表格了。

HTML 提供了表格的基礎標籤，好比說 <table>、 <thead>、 <tbody> 等標籤，這些標籤上提供了默認的樣式。好處是在互聯網剛剛發展起來時，能夠提供開箱即用的表格；缺點是樣式太單一，不太好定製，後來不少網站用其它標籤模擬表格，就像 PPT裏用各類大小方塊組合出一個表格同樣，方便定製：

出於這個緣由，當你在用 Table Selector 匹配一個表格時，可能會死活匹配不上，由於從 Web Scraper 的角度考慮，你看到的那個表格就是個高仿，根本不是原裝正品，天然是不認的。

3.總結

咱們並不建議直接使用 Web Scraper 的 Table Selector，由於對中文支持不太友好，也不太好匹配現代網頁。若是有抓取表格的需求，能夠用以前的建立父子選擇器的方法來作。

前面幾篇文章咱們介紹了 Web Scraper 應對各類翻頁的解決方法，好比說修改網頁連接加載數據、點擊「更多按鈕「加載數據和下拉自動加載數據。今天咱們說說一種更常見的翻頁類型——分頁器。

原本想解釋一下啥叫分頁器，翻了一堆定義以爲很繁瑣，你們也不是第一年上網了，看張圖就知道了。我找了個功能最全的例子，支持數字頁碼調整，上一頁下一頁和指定頁數跳轉。

今天咱們就學學，Web Scraper 怎麼對付這種類型的網頁翻頁。

其實咱們在本教程的第一個例子，抓取豆瓣電影 TOP 排行榜中，豆瓣的這個電影榜單就是用分頁器分割數據的：

但當時咱們是找網頁連接規律抓取的，沒有利用分頁器去抓取。由於當一個網頁的連接變化規律時，控制連接參數抓取是實現成本最低的；若是這個網頁進能夠翻頁，可是連接的變化不是規律的，就得去會一會這個分頁器了。

說這些理論有些枯燥，咱們舉個翻頁連接不規律的例子。

8 月 2 日是蔡徐坤的生日，爲了表達慶祝，在微博上粉絲們給坤坤刷了 300W 的轉發量，微博的轉發數據正好是用分頁器分割的，咱們就分析一下微博的轉發信息頁面，看看這類數據怎麼用 Web Scraper 抓取。

這條微博的直達連接是：

https://weibo.com/1776448504/I0gyT8aeQ?type=repost

看了他那麼多的視頻，爲了表達感激，咱們能夠點進去出爲坤坤加一份閱讀量。

首先咱們看看第 1 頁轉發的連接，長這個樣子：

https://weibo.com/1776448504/I0gyT8aeQ?type=repost

第 2 頁長這個樣子，注意到多了個 #_rnd1568563840036 參數：

https://weibo.com/1776448504/I0gyT8aeQ?type=repost#_rnd1568563840036

第 3 頁參數爲 #_rnd1568563861839

https://weibo.com/1776448504/I0gyT8aeQ?type=repost#_rnd1568563861839

第 4 頁參數爲 #_rnd1568563882276：

https://weibo.com/1776448504/I0gyT8aeQ?type=repost#_rnd1568563882276

多看幾個連接你就能夠發現，這個轉發網頁的網址毫無規律可言，因此只能經過分頁器去翻頁加載數據。下面就開始咱們的實戰教學環節。

1.建立 SiteMap

咱們首先建立一個 SiteMap，此次取名爲 cxk，起始連接爲 https://weibo.com/1776448504/I0gyT8aeQ?type=repost。

2.建立容器的 selector

由於咱們要點擊分頁器，外面的容器的類型咱們選爲 Element Click，具體的參數解釋能夠看下圖，咱們以前在簡易數據分析 08詳細解釋過一次，這裏就很少言了。

container 的預覽是下圖的樣子：

分頁器選擇的過程能夠參看下圖：

3.建立子選擇器

這幾個子選擇器都比較簡單，類型都是文字選擇器，咱們選擇了評論用戶名，評論內容和評論時間三種類型的內容。

4.抓取數據

按照 Sitemap cxk -> Scrape 的操做路徑就能夠抓取數據了。

5.一些問題

若是你看了我上面的教程立馬去爬數據，可能遇到的第一個問題就是，300w 的數據，難道我所有爬下來嗎？

聽上去也不太現實，畢竟 Web Scraper 針對的數據量都是相對比較小的，幾萬數據都算多的了，數據再大你就得考慮爬取時間是否太長，數據如何存儲，如何應對網址的反爬蟲系統（好比說冷不丁的跳出一個驗證碼，這個 Web Scraper 是無能爲力的）。

考慮到這個問題，前面的自動控制抓取數量的教程你又看過的話，可能想着用 :nth-of-type(-n+N) 控制抓取 N 條數據。若是你嘗試了，就會發現這個方法根本沒用。

失效的緣由其實涉及到一點點網頁的知識了，感興趣的話能夠看看下面的解釋，不感興趣能夠直接看最後的結論。

像我前面介紹的點擊更多加載型網頁和下拉加載型網頁，他們新加載的數據，是在當前頁面追加的，你一直下拉，數據一直加載，同時網頁的滾動條會愈來愈短，這意味着全部的數據都在同一個頁面。

當咱們用 :nth-of-type(-n+N) 控制加載數量時，其實至關於在這個網頁設立一個計數器，當數據一直累加到咱們想要的數量時，就會中止抓取。

可是對於使用翻頁器的網頁，每次的翻頁至關於刷新當前網頁，這樣每次都會設立一個計數器。

好比說你想抓取 1000 條數據，可是第 1 頁網頁只有 20 條數據，抓到最後一條了，還差 980 條；而後一翻頁，又設立一個新的計數器，抓完第 2 頁的最後一條數據，還差 980，一翻頁計數器就重置，又變成 1000 了......因此這個控制數量的方法就失效了。

因此結論就是，若是翻頁器類型的網頁想提早結束抓取，只有斷網的這種方法。固然，若是你有更好的方案，能夠在評論裏回覆我，咱們能夠互相討論一下。

6.總結

分頁器是一種很常見的網頁分頁方法，咱們能夠經過 Web Scraper 中的 Element click 處理這種類型的網頁，並經過斷網的方法結束抓取。