這是簡易數(shù)據(jù)分析系列的第 10 篇文章蛉鹿。
原文首發(fā)于博客園：簡易數(shù)據(jù)分析 10衙伶。
友情提示：這一篇文章的內(nèi)容較多蕴潦，信息量比較大，希望大家學(xué)習(xí)的時候多看幾遍汪榔。
我們在刷朋友圈刷微博的時候蒲拉，總會強調(diào)一個『刷』字，因為看動態(tài)的時候痴腌，當把內(nèi)容拉到屏幕末尾的時候雌团，APP 就會自動加載下一頁的數(shù)據(jù)，從體驗上來看士聪，數(shù)據(jù)會源源不斷的加載出來锦援，永遠沒有盡頭。
我們今天就是要講講剥悟，如何利用 Web Scraper 抓取滾動到底翻頁的網(wǎng)頁灵寺。
今天我們的練手網(wǎng)站是知乎數(shù)據(jù)分析模塊的精華帖，網(wǎng)址為：
https://www.zhihu.com/topic/19559424/top-answers
這次要抓取的內(nèi)容是精華帖的標題区岗、答題人和贊同數(shù)略板。下面是今天的教程。
1.制作 Sitemap
剛開始我們要先創(chuàng)建一個 container慈缔，包含要抓取的三類數(shù)據(jù)叮称，為了實現(xiàn)滾動到底加載數(shù)據(jù)的功能，我們把 container 的 Type 選為 Element scroll down藐鹤，就是滾動到網(wǎng)頁底部加載數(shù)據(jù)的意思。
在這個案例里，選擇的元素名字為 div.List-item章鲤。
為了復(fù)習(xí)上一節(jié)通過數(shù)據(jù)編號控制條數(shù)的方法辐益，我們在元素名后加個 nth-of-type(-n+100)，暫時只抓取前 100 條數(shù)據(jù)括堤。
然后我們保存 container 這個節(jié)點碌秸，并在這個節(jié)點下選擇要抓取的三個數(shù)據(jù)類型。
首先是標題悄窃，我們?nèi)∶麨?title讥电，選擇的元素名為 [itemprop='zhihu:question'] a：
然后是答題人名字 name 與 贊同數(shù) like，選擇的元素名分別為 #Popover10-toggle a 和 button.VoteButton--up：
2.爬取數(shù)據(jù)轧抗，發(fā)現(xiàn)問題
元素都選擇好了恩敌，我們按 Sitemap zhihu_top_answers -> Scrape -> Start craping 的路徑進行數(shù)據(jù)抓取，等待十幾秒結(jié)果出來后横媚，內(nèi)容卻讓我們傻了眼：
數(shù)據(jù)呢纠炮？我要抓的數(shù)據(jù)呢月趟？怎么全變成了 null？
在計算機領(lǐng)域里恢口，null 一般表示空值孝宗，表示啥都沒有，放在 Web Scraper 里耕肩，就表示沒有抓取到數(shù)據(jù)因妇。
我們可以回想一下，網(wǎng)頁上的的確確存在數(shù)據(jù)猿诸，我們在整個的操作過程中婚被，唯一的變數(shù)就是選擇元素這個操作上。所以梳虽，肯定是我們選擇元素時出錯了址芯，導(dǎo)致內(nèi)容匹配上出了問題，無法正常抓取數(shù)據(jù)窜觉。要解決這個問題谷炸，我們就要查看一下網(wǎng)頁的構(gòu)成。
3.分析問題
查看一下網(wǎng)頁的構(gòu)成禀挫，就要用瀏覽器的另一個功能了淑廊，那就是選擇查看元素。
1.我們點擊控制面板左上角的箭頭特咆，這時候箭頭顏色會變藍季惩。
2.然后我們把鼠標移動到標題上，標題會被一個藍色的半透明遮罩蓋住腻格。
3.我們再點擊一下標題画拾，會發(fā)現(xiàn)我們會跳轉(zhuǎn)到 Elements 這個子面板，內(nèi)容是一些花花綠綠看不大懂的代碼
做到這里心里別發(fā)怵菜职，這些 HTML 代碼不涉及什么邏輯青抛，在網(wǎng)頁里就是個骨架，提供一些排版的作用酬核。如果你平常用 markdown 寫作蜜另，就可以把 HTML 理解為功能更復(fù)雜的 markdown。
結(jié)合 HTML 代碼嫡意，我們先看看 [itemprop='zhihu:question'] a 這個匹配規(guī)則是怎么回事举瑰。
首先這是個樹形的結(jié)構(gòu)：
- 先是一個名字為 h2 的標簽
<h2>...</h2>，它有個class='ContentItem-title'的屬性蔬螟； - 里面又有個名為 div 的標簽
<div>...</div>此迅，它有個itemprop='zhihu:question'的屬性； - div 標簽里又有一個 名字為 a 的標簽
<a>...</a>； - a 標簽里有一行字耸序，就是我們要抓取的標題：
如何快速成為數(shù)據(jù)分析師忍些？
上句話從可視化的角度分析，其實就是一個嵌套的結(jié)構(gòu)坎怪，我把關(guān)鍵內(nèi)容抽離出來罢坝，內(nèi)容結(jié)構(gòu)是不是清晰了很多？
<h2 class='ContentItem-title'/>
<div itemprop='zhihu:question'/>
<a>如何快速成為數(shù)據(jù)分析師搅窿？</a>
</div>
</h2>
我們再分析一個抓取標題為 null 的標題 HTML 代碼炸客。
我們可以很清楚的觀察到，在這個標題的代碼里戈钢，少了名為 div 屬性為 itemprop='zhihu:question' 的標簽！這樣導(dǎo)致我們的匹配規(guī)則匹配時找不到對應(yīng)標簽是尔，Web Scraper 就會放棄匹配殉了，認為找不到對應(yīng)內(nèi)容，所以就變成 null 了拟枚。
找到原因后我們就好解決問題了薪铜。
4.解決問題
我們發(fā)現(xiàn)，選擇標題時恩溅，無論標題的嵌套關(guān)系怎么變隔箍，總有一個標簽不變，那就是包裹在最外層的脚乡，屬性名為 class='ContentItem-title' 的 h2 標簽蜒滩。我們?nèi)绻苤苯舆x擇 h2 標簽，不就可以完美匹配標題內(nèi)容了嗎奶稠？
邏輯上理清了關(guān)系俯艰，我們?nèi)绾斡?Web Scraper 操作？這時我們就可以用上一篇文章介紹的內(nèi)容锌订，利用鍵盤 P 鍵選擇元素的父節(jié)點：
放在今天的課程里竹握，我們點擊兩次 P 鍵，就可以匹配到標題的父標簽 h2 （或 h2.ContentItem-title）：
以此類推辆飘，因為答題人名字也出現(xiàn)了 null啦辐，我們分析了 HTML 結(jié)構(gòu)后選擇名字的父標簽 span.AuthorInfo-name，具體的分析操作和上面差不多蜈项，大家可以嘗試一下芹关。
我的三個子內(nèi)容的選擇器如下，可以作為一個參考：
最后我們點擊 Scrape 爬取數(shù)據(jù)紧卒，檢查一下結(jié)果充边，沒有出現(xiàn) null，完美！
5.吐槽時間
爬取知乎數(shù)據(jù)時浇冰，我們會發(fā)現(xiàn)滾動加載數(shù)據(jù)那一塊兒很快就做完了贬媒，在元素匹配那里卻花了很多時間。
這間接的說明肘习，知乎這個網(wǎng)站從代碼角度上分析际乘，寫的還是比較爛的。
如果你爬取的網(wǎng)站多了漂佩，就會發(fā)現(xiàn)大部分的網(wǎng)頁結(jié)構(gòu)都是比較「隨心所欲」的脖含。所以在正式抓取數(shù)據(jù)前，經(jīng)常要先做小規(guī)模的嘗試投蝉，比如說先抓取 20 條养葵，看看數(shù)據(jù)有沒有問題。沒問題后再加大規(guī)模正式抓取瘩缆，這樣做一定程度上可以減少返工時間关拒。
6.下期預(yù)告
這期內(nèi)容比較多，大家可以多看幾遍消化一下庸娱，下期我們說些簡單的內(nèi)容着绊，講講如何抓取表格內(nèi)容。
7.推薦閱讀
簡易數(shù)據(jù)分析 09 | Web Scraper 自動控制抓取數(shù)量 & Web Scraper 父子選擇器
