節(jié)目編號：[08-1202S/08-1203R]

切記請勿用于違法用途，一切后果與作者無關！請尊重原作者著作權，除學習外禁止未經(jīng)同意隨意抓取數(shù)據(jù)，禁止應用于商業(yè)化行為！

原理架構分析

眾所周知網(wǎng)頁渲染出來還是html，而html都是由一部分一部分的標簽組成的，對于表格，圖庫這類網(wǎng)站來說，這一部分和一部分是相似的結構，比如<tr><td>，<div class="xxx">，通過class，id，tagName的規(guī)律，不難找到相似元素，本期就以壁紙站為例：

第一步，打開F12,開發(fā)者工具分析結構

這一個個整齊的DIV，就是每一個圖塊對應的結構，他們的query選擇器為'.thumb-container-big'

再把元素展開看看

我們正好只要這兩部分，原圖和標題

接下來展開boxgrid

控制臺里發(fā)現(xiàn)最大的一張

600*375顯然不是我們要的分辨率，進入圖片詳情看看

1920*1080的，他們的URL分別如下：

縮略：533/thumbbig-533007.png

原圖：533/533007.png

多看幾張，縮略圖都是thumbbig-xxx.webp，原圖都是xxx.png

所以我們只需要替換掉thumbbig-為空，.webp為png即可

或者如果我們注意到元素id正好對應圖片的名稱

替換掉thumb_即可，但是我們就無法獲取上級目錄了

如果要獲取，就得用indexOf索引內(nèi)容，太過于復雜，所以還是老老實實根據(jù)Picture里面的source屬性吧

理論存在實踐開始

考慮到一些網(wǎng)站沒有jquery，所以整個過程全部是原生js運行

捕捉父級元素

案例中的元素class為thumb-container-big

所以引入方法

已經(jīng)捕獲到了31個元素，先用第一個元素分析

捕捉子元素

一步一步抓下去

PS：這里用jQuery會更方便些

最后得到代碼：

這時候已經(jīng)獲取到我們的Picture元素了

只需要獲取他的屬性srcset就能獲得縮略圖地址

所以我們用attributes對象獲得屬性：

正是我們想要的鏈接

但是獲取出來的確實一個xml格式的內(nèi)容：

轉化為文本：.textContent

這就是我們第一個元素捕獲的方法，接下來就很簡單了，把它封裝為一個方法，方便調(diào)用：

獲得原圖

根據(jù)上面的分析，我們對鏈接進行字符串替換：

遍歷循環(huán)

由于class的數(shù)量正好是圖片數(shù)量，所以直接根據(jù)class進行遍歷

我們的代碼已經(jīng)很完美，但是我不希望在控制臺里輸出，想要保存到文本文檔怎么辦？直接post到一個支持保存文件的后端即可，在這里不介紹

代碼運行速度非常地快，回車一瞬間就全部跑完了，可見異步執(zhí)行的威力

技術總結

優(yōu)點：迅速，輕量，便捷

缺點：需要手動翻頁，手動運行代碼，半自動化