Web Scraper 翻頁——抓取「滾動加載」類型網頁（Web Scraper 高級用法）| 簡易數據分析 10

這是簡易數據分析系列的第 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 條，看看數據有沒有問題。沒問題後再加大規模正式抓取，這樣作必定程度上能夠減小返工時間。

6.下期預告

這期內容比較多，你們能夠多看幾遍消化一下，下期咱們說些簡單的內容，講講如何抓取表格內容。

7.推薦閱讀

簡易數據分析 09 | Web Scraper 自動控制抓取數量 & Web Scraper 父子選擇器

簡易數據分析 08 | Web Scraper 翻頁——點擊「更多按鈕」翻頁

8.聯繫我

由於文章發在各大平臺上，帳號較多不能及時回覆評論和私信，有問題可關注公衆號 ——「鹵代烴實驗室」，關注上車防失聯。

原文出處：https://www.cnblogs.com/web-scraper/p/web_scraper_element_scroll_down.html