這是簡易資料分析系列的第 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 标簽裡有一行字，就是我們要抓取的标題：如何快速成為資料分析師？
- 上句話從可視化的角度分析，其實就是一個嵌套的結構，我把關鍵内容抽離出來，内容結構是不是清晰了很多？
我們再分析一個抓取标題為 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 翻頁——點選「更多按鈕」翻頁