前言
大家好，我是IT共享者，人稱皮皮。
妹紙圖這個網站想必大家都非常熟悉了，老司機的天堂。小編第一次進表示身體逐漸變得空虛，表示一定要克制自己，遠離這種正能量的網站。話不多說，今天帶大家獲取妹紙圖上的圖片鏈接。然后大家都懂得。
一、項目准備
360瀏覽器，僅此而已
二、項目目的
獲取頁面所有美女圖片
三、項目步驟
1.打開瀏覽器，搜索圖片，我們以美女圖片為例：
畫面太美，不忍直視。
2.打開瀏覽器控制台
F12，即可打開瀏覽器控制台，我們今天要做的是獲取所有的圖片鏈接，順便查看下圖片。如下圖：
今天我們就是要在這里面獲取到所有的圖片鏈接，相信沒接觸過前端的人肯定對此一無所知，但是小編接下來講過了之后你還是一無所知，那就是你的不對了。
3.控制台功能大揭秘
大家可能覺得這個地方沒啥用處，啥都沒有，還不如Element Network用處大；誠然前兩者的確用處很大，可以用來分析網頁結構和網頁請求，但是我想說的是控制台的功能你永遠不要小瞧了，因為它可以使你在開發過程中能快速的見到效果圖，比如，你寫個代碼，但是你想看看它現在能否運行，一般的做法就是寫個HTML+CSS然后將JavaScript嵌入到里面去，這樣做顯然太麻煩，而且你修改后還得在刷新才能瀏覽器中運行看到效果，到最后就是瀏覽器和編輯器頻繁切換，影響開發速度和效率甚至占用多余的系統資源。於是，控制台應運而生，它使得我們可以輕松的使用JavaScript代碼而無需再搭配HTML和CSS才能運行，一個Console統統搞定，這就是我們剛剛說的控制台。我們可以先來看看它的功能：
可以看到，它是有自動提示功能的，而且比任何三方IDE的都要全面，因為它是和瀏覽器配套使用的，而其它IDE則無法做到這么齊全，所以你可以看到有時候如果你想用某種方法它不會提示，那就只有一個原因，就是你用錯了。
1).改變它的編輯狀態
控制台輸入：
在編輯狀態下，我們的點擊操作是沒有任何作用的，也就是說只能修改，如果想還原，刷新一下瀏覽器即可。
2).定位特定元素
這里我們可以先看看我們要看的瀏覽器圖片元素的信息，可以先打印出所有的圖片 ，這里使用一個特殊符號：
我們可以看到，通過這個語法糖可以打印當前頁面所有的圖片信息，顯示70，說明這個頁面有70張圖片，當小編再次滾動鼠標時發現圖片數量就變多了，變成了136張圖片，這說明它是Ajax加載的。
除了這種獲取圖片的方式外，還可以這樣：
document.images
得到的結果和上面的一模一樣，有了這幾樣的知識點積累，我們現在就可以輕松獲取所有的圖片鏈接了。
4.獲取圖片鏈接和圖片名
這里我們要把獲取到的圖片添加到數組中，然后在遍歷即可打印出所有的圖片。
1).建立數組存放所有的圖片
ab=document.images #獲取當前頁面所有圖片
var aa=[] #建立數組
for(const y of ab){ #建立const變量使得無法修改
aa.push(y); #把圖片裝進數組
}
2).遍歷數組打印圖片鏈接
這里可以使用多種方法，小編一 一介紹。
1)).For ...in
for(const a in aa){
console.log(aa[a])
}
2)).For...of
for(const a of aa){
console.log(a)
}
3)).ForEach
aa.forEach(function(val,item,array){
console.log(val)
});
4)).Map
{
console.log(val)
});
可以看到第四種方法和第三種方法差不多，但是它們還是有差別的，前者是沒有返回值的，而后者有並且后者支持修改返回值。雖然我們打印出了圖片鏈接，但是圖片名字並沒有打印出來，於是小編開始找圖片名字：
發現它在Div標簽里，於是小編開始找滿足條件的Div：
document.querySelectorAll('div.img_tit')#精確找到所有類名為img_tit的Div
document.getElementsByClassName('img_tit')#找到所有類名為img_tit
然后我們先輸出圖片名再輸出圖片鏈接，這樣就可以使用循環然后進行判斷，如下圖：
var a=0;
do{
a++;
if(a%2==0){
console.log(aa[a])
}
else{
console.log(ac[a])
}
}
while(a<ac.length)
可以看到按照順序打印出了。另外，我們發現當我們打印出了這些結果值后感覺控制台都已經爆滿了，我們想清空這些信息那該怎么辦了？一行代碼就能搞定啦。
當然，這項功能你可別指望它能在你控制台相當干凈的時候起作用。看了這么多了我們再來看看圖片的查看功能吧。
5.圖片查看
希望上面的方法應該不會讓讀者眼花繚亂才是，因為Js是一門動態語言，所以它的騷操作實在是太多了，你懂的。言歸正傳，如果我們現在想快速查看某一張圖片，那么怎么辦呢？有人說單擊它，我想告訴你的是，雖然這可以實現查看功能，但這是在被包裹的網頁中查看，如果我們在單獨的網頁中查看了，比如說這樣:
那我們要想只看這一張圖片而不看其它的內容了，那又該怎么辦了？最傳統的方法：
點擊紅色箭頭處，可以看到如下圖：
感覺是不是就好多了，沒有其它的東西干擾我們，專心致志的看圖，多爽。但是我們開發者可不能這么做，因為太沒技術含量了，我們要時時刻刻挑戰自己；所以我決定用JS代碼來查看這張圖片。
我們可以先看看這個，代碼如下：
function view(src,filename) {
var link = document.createElement('a');#創建a標簽
link.setAttribute("download", filename);#設置download屬性
link.href = src;#設置href屬性
document.body.appendChild(link);#將a標簽添加到網頁主體中
link.click();
document.body.removeChild(link);#刪除a標簽
}
view('https://p0.ssl.qhimgs1.com/bdr/326__/t0160c8456511be3c4e.jpg','t0160c8456511be3c4e.jpg')
可以看到我們成功在瀏覽器中查看了這張圖片。
四、總結
突然發現小編還是比較有才的，這都能被小編捕捉到，不過還是不能太得意，以免翻車。另外，如果大家想在自家服務器上添加圖片下載功能，超簡單的，一行代碼搞定。
<a href="http://localhost:8080/12.jpg" download="12.jpg">點我下載</a>
這樣就能生成一個下載圖片的點擊鏈接了。