這是簡易數據分析系列的第 14 篇文章。本文首發于博客園：Web Scraper 翻頁——利用 Link 選擇器翻頁
今天我們還來聊聊 Web Scraper 翻頁的技巧。
這次的更新是受一位讀者啟發的，他當時想用 Web scraper 爬取一個分頁器分頁的網頁，卻發現我之前介紹的分頁器翻頁方法不管用。我研究了一下才發現我漏講了一種很常見的翻頁場景。
在 web scraper 翻頁——分頁器翻頁的文章里，我們講了如何利用 Element Click 選擇器模擬鼠標點擊分頁器進行翻頁，但是把同樣的方法放在豆瓣 TOP 250 上，翻頁到第二頁時抓取窗口就會自動退出，一條數據都抓不到。
其實主要原因是我沒有講清楚這種方法的適用邊界。
通過 Element Click 點擊分頁器翻頁，只適用于網頁沒有刷新的情況，我在分頁器那篇文章里舉了蔡徐坤微博評論的例子，翻頁時網頁是沒有刷新的：
仔細看下圖，鏈接發生了變化，但是刷新按鈕并沒有變化，說明網頁并沒有刷新，只是內容變了
而在 豆瓣 TOP 250 的網頁里，每次翻頁都會重新加載網頁：
仔細看下圖，鏈接發生變化的同時網頁刷新了，有很明顯的 loading 轉圈動畫
其實這個原理從技術規范上很好解釋：當一個 URL 鏈接是 # 字符后數據變化時，網頁不會刷新；當鏈接其他部分變化時，網頁會刷新。當然這個只是隨口提一下，感興趣的同學可以去這個鏈接研究一下，不感興趣可以直接跳過。
1.創建 Sitemap
本篇文章就來講解一下，如何利用 Web Scraper 抓取翻頁時會刷新網頁的分頁器網站。
這次的網頁我們選用最開始練手 Web Scraper 的網站——豆瓣電影 TOP250，換個姿勢練習 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.推薦閱讀
簡易數據分析 05 | Web Scraper 翻頁——控制鏈接批量抓取數據
簡易數據分析 08 | Web Scraper 翻頁——點擊「更多按鈕」翻頁
簡易數據分析 10 | Web Scraper 翻頁——抓取「滾動加載」類型網頁
簡易數據分析 12 | Web Scraper 翻頁——抓取分頁器翻頁的網頁
簡易數據分析 13 | Web Scraper 高級用法——抓取二級頁面
