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 的標籤

  ...

  ，它有個 class='ContentItem-title' 的屬性；
• 裡面又有個名為 div 的標籤
  ...
  ，它有個 itemprop='zhihu:question' 的屬性；
• div 標籤裡又有一個 名字為 a 的標籤 ；
• a 標籤裡有一行字，就是我們要抓取的標題：如何快速成為數據分析師？
• 上句話從可視化的角度分析，其實就是一個嵌套的結構，我把關鍵內容抽離出來，內容結構是不是清晰了很多？