這是簡易資料分析系列的第 13 篇文章。

不知不覺，web scraper 系列教程我已經寫了 10 篇了，這 10 篇內容，基本上覆蓋了 Web Scraper 大部分功能。今天的內容算這個系列的最後一篇文章了，下一章節我會開一個新坑，說說如何利用 Excel 對收集到的資料做一些格式化的處理和分析。

Web Scraper 教程的全盤總結我放在下一篇文章，今天先開始我們的實戰教程。

在前面的課程裡，我們抓取的資料都是在同一個層級下的內容，探討的問題主要是如何應對市面上的各種分頁型別，但對於詳情頁內容資料如何抓取，卻一直沒有介紹。

比如說我們想抓取 b 站的動畫區 TOP 排行榜的資料：

https://www.bilibili.com/ranking/all/1/0/3

按之前的抓取邏輯，我們是把這個榜單上和作品有關的資料抓取一遍，比如說下圖裡的排名、作品名字、播放量、彈幕數和作者名。

經常逛 B 站的小夥伴也知道，UP 主經常暗示觀看視訊小夥伴三連操作（點贊+投幣+收藏），由此可見，這 3 個數據對視訊的排名有一定的影響力，所以這些資料對我們來說也有一定的參考價值。

但遺憾的是，在這個排名列表裡，並沒有相關資料。這幾個資料在視訊詳情頁裡，需要我們點選連結進去才能看到：

今天的教程內容，就是教你如何利用 Web Scraper，在抓取一級頁面（列表頁）的同時，抓取二級頁面（詳情頁）的內容。

1.建立 SiteMap

首先我們找到要抓取的資料的位置，關鍵路徑我都在下圖的紅框裡標出來了，大家可以對照一下：

然後建立一個相關的 SiteMap，這裡我取了個 bilibili_rank 的名字：

2.建立容器的 selector

設定之前我們先觀察一下，發現這個網頁的排行榜資料是 100 條資料一次性載入完的，沒有分頁的必要，所以這裡的 Type 型別選為 Element 就行。

其他的引數都比較簡單，就不細說了（不太懂的可以看我之前的基礎教程）這裡截個圖大家可以做個參考：

3.建立列表頁子選擇器

這次子選擇器要抓取的內容如下，也都比較簡單，截個圖大家可以參考一下：

1. 排名（num）
2. 作品標題（title）
3. 播放量（play_amount）
4. 彈幕量（danmu_count）
5. 作者：（author）

如果做到這一步，其實已經可以抓到所有已知的列表資料了，但本文的重點是：如何抓取二級頁面（詳情頁）的三連資料？

跟著做了這麼多爬蟲，可能你已經發現了，Web Scraper 本質是模擬人類的操作以達到抓取資料的目的。

那麼我們正常檢視二級頁面（詳情頁）是怎麼操作的呢？其實就是點選標題連結跳轉：

Web Scraper 為我們提供了點選連結跳轉的功能，那就是 Type 為 Link 的選擇器。

感覺有些抽象？我們對照例子來理解一下。

首先在這個案例裡，我們獲取了標題的文字，這時的選擇器型別為 Text：

當我們要抓取連結時，就要再建立一個選擇器，選的元素是一樣的，但是 Type 型別為 Link：

建立成功後，我們點選這個 Link 型別的選擇器，進入他的內部，再建立相關的選擇器，下面我錄了個動圖，注意看我滑鼠強調的導航路由部分，可以很清晰的看出這幾個選擇器的層級關係：

4.建立詳情頁子選擇器

當你點選連結後就會發現，瀏覽器會在一個新的 Tab 頁開啟詳情頁，但是 Web Scraper 的選擇視窗開在列表頁，無法跨頁面選擇想要的資料。

處理這個問題也很簡單，你可以複製詳情頁的連結，拷貝到列表頁所在的 Tab 頁裡，然後回車重新載入，這樣就可以在當前頁面選擇了。

我們在型別為 Link 的選擇器內部多建立幾個選擇器，這裡我選擇了點贊數、硬幣數、收藏數和分享數 4 個數據，這個操作也很簡單，這裡我就不詳細說了。

所有選擇器的結構圖如下：

我們可以看到 video_detail_link 這個節點包含 4 個二級頁面（詳情頁）的資料，到此為止，我們的子選擇器已經全部建立好了。

5.抓取資料

終於到了激動人心的環節了，我們要開始抓取資料了。但是抓取前我們要把等待時間調整得大一些，預設時間是 2000 ms，我這裡改成了 5000 ms。

為什麼這麼做？看了下圖你就明白了：

首先，每次開啟二級頁面，都是一個全新的頁面，這時候瀏覽器載入網頁需要花費時間；

其次，我們可以觀察一下要抓取的點贊量等資料，頁面剛剛載入的時候，它的值是 「--」，等待一會兒後才會變成數字。

所以，我們直接等待 5000 ms，等頁面和資料載入完成後，再統一抓取。

配置好引數後，我們就可以正式抓取並下載了。下圖是我抓取資料的一部分，特此證明此方法有用：

6.總結

這次的教程可能有些難度，我把我的 SiteMap 分享出來，製作的時候如果遇到難題，可以參考一下我的配置，SiteMap 匯入的功能我在第 6 篇教程裡詳細說明了，大家可以配合食用：

{"_id":"bilibili_rank","startUrl":["https://www.bilibili.com/ranking/all/1/0/3"],"selectors":[{"id":"container","type":"SelectorElement","parentSelectors":["_root"],"selector":"li.rank-item","multiple":true,"delay":0},{"id":"title","type":"SelectorText","parentSelectors":["container"],"selector":"a.title","multiple":false,"regex":"","delay":0},{"id":"author","type":"SelectorText","parentSelectors":["container"],"selector":"a span","multiple":false,"regex":"","delay":0},{"id":"play_amount","type":"SelectorText","parentSelectors":["container"],"selector":".detail > span:nth-of-type(1)","multiple":false,"regex":"","delay":0},{"id":"danmu_amount","type":"SelectorText","parentSelectors":["container"],"selector":"span:nth-of-type(2)","multiple":false,"regex":"","delay":0},{"id":"video_detail_link","type":"SelectorLink","parentSelectors":["container"],"selector":"a.title","multiple":false,"delay":0},{"id":"coin","type":"SelectorText","parentSelectors":["video_detail_link"],"selector":"span.coin","multiple":false,"regex":"","delay":0},{"id":"collect","type":"SelectorText","parentSelectors":["video_detail_link"],"selector":"span.collect","multiple":false,"regex":"","delay":0},{"id":"share","type":"SelectorText","parentSelectors":["video_detail_link"],"selector":"span.share","multiple":false,"regex":"[0-9]+","delay":0},{"id":"num","type":"SelectorText","parentSelectors":["container"],"selector":"div.num","multiple":false,"regex":"","delay":0},{"id":"like","type":"SelectorText","parentSelectors":["video_detail_link"],"selector":".ops span.like","multiple":false,"regex":"","delay":0}]}

當你掌握了二級頁面的抓取方式後，三級頁面、四級頁面也不在話下。因為套路都是一樣的：都是在 Link 選擇器指向的下一個頁面抓取資料，因為原理是一樣的，我就不演示了。

7.推薦閱讀

簡易資料分析 06 | 如何匯入別人已經寫好的 Web Scraper 爬蟲

簡易資料分析 05 | Web Scraper 翻頁——控制連結批量抓取資料

簡易資料分析 08 | Web Scraper 翻頁——點選「更多按鈕」翻頁

簡易資料分析 10 | Web Scraper 翻頁——抓取「滾動載入」型別網頁

簡易資料分析 12 | Web Scraper 翻頁——抓取分頁器翻頁的網頁

相關推薦