簡易資料分析 10 | Web Scraper 翻頁——抓取「滾動載入」型別網頁
這是簡易資料分析系列的第 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 翻頁——點選「更多按鈕」翻頁