Web Scraper 翻頁——利用 Link 選擇器翻頁 | 簡易數據分析 14

這是簡易數據分析系列的第 14 篇文章。

今天我們還來聊聊 Web Scraper 翻頁的技巧。

這次的更新是受一位讀者啟發的，他當時想用 Web scraper 爬取一個分頁器分頁的網頁，卻發現我之前介紹的方法不管用。我研究了一下才發現我漏講了一種很常見的翻頁場景。

在 的文章里，我們講了如何利用 Element Click 選擇器模擬鼠標點擊分頁器進行翻頁，但是把同樣的方法放在 上，翻頁到第二頁時抓取窗口就會自動退出，一條數據都抓不到。

其實主要原因是我沒有講清楚這種方法的適用邊界。

通過 Element Click 點擊分頁器翻頁，只適用於網頁沒有刷新的情況，我在那篇文章里舉了蔡徐坤微博評論的例子，翻頁時網頁是沒有刷新的：

仔細看下圖，鏈接發生了變化，但是刷新按鈕並沒有變化，說明網頁並沒有刷新，只是內容變了

而在 豆瓣 TOP 250 的網頁里，每次翻頁都會重新加載網頁：

仔細看下圖，鏈接發生變化的同時網頁刷新了，有很明顯的 loading 轉圈動畫

其實這個原理從技術規範上很好解釋：當一個 URL 鏈接是 # 字符后數據變化時，網頁不會刷新；當鏈接其他部分變化時，網頁會刷新。當然這個只是隨口提一下，感興趣的同學可以去研究一下，不感興趣可以直接跳過。

1.創建 Sitemap

本篇文章就來講解一下，如何利用 Web Scraper 抓取翻頁時會刷新網頁的分頁器網站。

這次的網頁我們選用練手 Web Scraper 的網站——，換個姿勢練習 Web Scraper 翻頁技巧。

像這種類型的網站，我們要藉助 Link 選擇器來輔助我們翻頁。Link 標籤我們在介紹過了，我們可以利用這個標籤跳轉網頁，抓取另一個網頁的數據。這裏我們利用 Link 標籤跳轉到分頁網站的下一頁。

首先我們用 Link 選擇器選擇下一頁按鈕，具體的配置可以見下圖：

這裡有一個比較特殊的地方：Parent Selectors ——父選擇器。

之前我們都沒有碰過這個選擇框的內容，**next_page 這次要有兩個父節點——_root 和 next_page**，鍵盤按 shift 再鼠標點選就可以多選了，先按我說的做，後面我會解釋這樣做的理由。

保存 next_page 選擇器后，在它的同級下再創建 container 節點，用來抓取電影數據：

這裏要注意：翻頁選擇器節點 next_page 和數據選擇器節點 container 是同一級，兩個節點的父節點都是兩個：_root 和 next_page：

因為重點是 web scraper 翻頁技巧，抓取的數據上我只簡單的抓取標題和排名：

然後我們點擊 Selector graph 查看我們編寫的爬蟲結構：

可以很清晰的看到這個爬蟲的結構，可以無限的嵌套下去：

點擊 Scrape，爬取一下試試，你會發現所有的數據都爬取下來了：

2.分析原理

按照上面的流程下來，你可能還會比較困擾，數據是抓下來了，但是為什麼這樣操作就可以呢，**為什麼 next_page 和 container 要同級，為什麼他們要同時選擇兩個父節點：_root 和 next_page？**

產生困擾的原因是因為我們是倒敘的講法，從結果倒推步驟；下面我們從正向的思維分步講解。

首先我們要知道，我們抓取的數據是一個樹狀結構，_root 表示根節點，就是我們的抓取的第一個網頁，我們在這個網頁要選擇什麼東西呢？

1.一個是下一頁的節點，在這個例子里就是用 Link 選擇器選擇的 next_page

2.一個是數據節點，在這個例子里就是用 Element 選擇器選擇的 container

因為 next_page 節點是會跳轉的，會跳到第二頁。第二頁除了數據不一樣，結構和第一頁還是一樣的，為了持續跳轉，我們還要選擇下一頁，為了抓取數據，還得選擇數據節點：

如果我們把箭頭反轉一下，就會發現真相就在眼前，next_page 的父節點，不正好就是 _root 和 next_page  嗎？container 的父節點，也是 _root 和 next_page！

到這裏基本就真相大白了，不理解的同學可以再多看幾遍。像 next_page 這種我調用我自己的形式，在編程里有個術語——遞歸，在計算機領域里也算一種比較抽象的概念，感興趣的同學可以自行搜索了解一下。

3.sitemap 分享

下面是這次實戰的 Sitemap，同學們可以導入到自己的 web scraper 中進行研究：

{"_id":"douban_movie_top_250","startUrl":["https://movie.douban.com/top250?start=0&filter="],"selectors":[{"id":"next_page","type":"SelectorLink","parentSelectors":["_root","next_page"],"selector":".next a","multiple":true,"delay":0},{"id":"container","type":"SelectorElement","parentSelectors":["_root","next_page"],"selector":".grid_view li","multiple":true,"delay":0}]}

4.推薦閱讀

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※收購3c,收購IPHONE,收購蘋果電腦-詳細收購流程一覽表

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想要讓你的商品在網路上成為最夯、最多人討論的話題?

※高價收購3C產品,價格不怕你比較

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!