手把手教你利用JavaScript 獲取任意網(wǎng)站圖片鏈接

前言

大家好，我是IT共享者，人稱皮皮。

妹紙圖這個網(wǎng)站想必大家都非常熟悉了，老司機(jī)的天堂。小編第一次進(jìn)表示身體逐漸變得空虛，表示一定要克制自己，遠(yuǎn)離這種正能量的網(wǎng)站。話不多說，今天帶大家獲取妹紙圖上的圖片鏈接。然后大家都懂得。

一、項目準(zhǔn)備

360瀏覽器，僅此而已

二、項目目的

獲取頁面所有美女圖片

三、項目步驟

1.打開瀏覽器，搜索圖片，我們以美女圖片為例：

畫面太美，不忍直視。

2.打開瀏覽器控制臺

F12，即可打開瀏覽器控制臺，我們今天要做的是獲取所有的圖片鏈接，順便查看下圖片。如下圖：

今天我們就是要在這里面獲取到所有的圖片鏈接，相信沒接觸過前端的人肯定對此一無所知，但是小編接下來講過了之后你還是一無所知，那就是你的不對了。

3.控制臺功能大揭秘

大家可能覺得這個地方?jīng)]啥用處，啥都沒有，還不如Element Network用處大；誠然前兩者的確用處很大，可以用來分析網(wǎng)頁結(jié)構(gòu)和網(wǎng)頁請求，但是我想說的是控制臺的功能你永遠(yuǎn)不要小瞧了，因為它可以使你在開發(fā)過程中能快速的見到效果圖，比如，你寫個代碼，但是你想看看它現(xiàn)在能否運(yùn)行，一般的做法就是寫個HTML+CSS然后將JavaScript嵌入到里面去，這樣做顯然太麻煩，而且你修改后還得在刷新才能瀏覽器中運(yùn)行看到效果，到最后就是瀏覽器和編輯器頻繁切換，影響開發(fā)速度和效率甚至占用多余的系統(tǒng)資源。于是，控制臺應(yīng)運(yùn)而生，它使得我們可以輕松的使用JavaScript代碼而無需再搭配HTML和CSS才能運(yùn)行，一個Console統(tǒng)統(tǒng)搞定，這就是我們剛剛說的控制臺。我們可以先來看看它的功能：

可以看到，它是有自動提示功能的，而且比任何三方IDE的都要全面，因為它是和瀏覽器配套使用的，而其它IDE則無法做到這么齊全，所以你可以看到有時候如果你想用某種方法它不會提示，那就只有一個原因，就是你用錯了。

1).改變它的編輯狀態(tài)

控制臺輸入：

![4](4.jpgdocument.body.contentEditable=true

在編輯狀態(tài)下，我們的點擊操作是沒有任何作用的，也就是說只能修改，如果想還原，刷新一下瀏覽器即可。

2).定位特定元素

這里我們可以先看看我們要看的瀏覽器圖片元素的信息，可以先打印出所有的圖片 ，這里使用一個特殊符號：

我們可以看到，通過這個語法糖可以打印當(dāng)前頁面所有的圖片信息，顯示70，說明這個頁面有70張圖片，當(dāng)小編再次滾動鼠標(biāo)時發(fā)現(xiàn)圖片數(shù)量就變多了，變成了136張圖片，這說明它是Ajax加載的。

除了這種獲取圖片的方式外，還可以這樣：

document.images

得到的結(jié)果和上面的一模一樣，有了這幾樣的知識點積累，我們現(xiàn)在就可以輕松獲取所有的圖片鏈接了。

4.獲取圖片鏈接和圖片名

這里我們要把獲取到的圖片添加到數(shù)組中，然后在遍歷即可打印出所有的圖片。

1).建立數(shù)組存放所有的圖片

ab=document.images #獲取當(dāng)前頁面所有圖片var aa=[]           #建立數(shù)組for(const y of ab){    #建立const變量使得無法修改    aa.push(y); #把圖片裝進(jìn)數(shù)組}

2).遍歷數(shù)組打印圖片鏈接

這里可以使用多種方法，小編一 一介紹。

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

![10](10.jpgaa.map(function(val,item,array){  console.log(val)});

可以看到第四種方法和第三種方法差不多，但是它們還是有差別的，前者是沒有返回值的，而后者有并且后者支持修改返回值。雖然我們打印出了圖片鏈接，但是圖片名字并沒有打印出來，于是小編開始找圖片名字：

發(fā)現(xiàn)它在Div標(biāo)簽里，于是小編開始找滿足條件的Div：

document.querySelectorAll('div.img_tit')#精確找到所有類名為img_tit的Divdocument.getElementsByClassName('img_tit')#找到所有類名為img_tit

然后我們先輸出圖片名再輸出圖片鏈接，這樣就可以使用循環(huán)然后進(jìn)行判斷，如下圖：

var a=0;do{  a++;  if(a%2==0){    console.log(aa[a])}    else{    console.log(ac[a])  }
}while(a<ac.length)

可以看到按照順序打印出了。另外，我們發(fā)現(xiàn)當(dāng)我們打印出了這些結(jié)果值后感覺控制臺都已經(jīng)爆滿了，我們想清空這些信息那該怎么辦了？一行代碼就能搞定啦。

當(dāng)然，這項功能你可別指望它能在你控制臺相當(dāng)干凈的時候起作用。看了這么多了我們再來看看圖片的查看功能吧。

5.圖片查看

希望上面的方法應(yīng)該不會讓讀者眼花繚亂才是，因為Js是一門動態(tài)語言，所以它的騷操作實在是太多了，你懂的。言歸正傳，如果我們現(xiàn)在想快速查看某一張圖片，那么怎么辦呢？有人說單擊它，我想告訴你的是，雖然這可以實現(xiàn)查看功能，但這是在被包裹的網(wǎng)頁中查看，如果我們在單獨的網(wǎng)頁中查看了，比如說這樣:

那我們要想只看這一張圖片而不看其它的內(nèi)容了，那又該怎么辦了？最傳統(tǒng)的方法：

點擊紅色箭頭處，可以看到如下圖：

感覺是不是就好多了，沒有其它的東西干擾我們，專心致志的看圖，多爽。但是我們開發(fā)者可不能這么做，因為太沒技術(shù)含量了，我們要時時刻刻挑戰(zhàn)自己；所以我決定用JS代碼來查看這張圖片。

我們可以先看看這個，代碼如下：

function view(src,filename) {                var link = document.createElement('a');#創(chuàng)建a標(biāo)簽                link.setAttribute("download", filename);#設(shè)置download屬性                link.href = src;#設(shè)置href屬性                document.body.appendChild(link);#將a標(biāo)簽添加到網(wǎng)頁主體中                link.click();                document.body.removeChild(link);#刪除a標(biāo)簽            }view('https://p0.ssl.qhimgs1.com/bdr/326__/t0160c8456511be3c4e.jpg','t0160c8456511be3c4e.jpg')

可以看到我們成功在瀏覽器中查看了這張圖片。

四、總結(jié)

突然發(fā)現(xiàn)小編還是比較有才的，這都能被小編捕捉到，不過還是不能太得意，以免翻車。另外，如果大家想在自家服務(wù)器上添加圖片下載功能，超簡單的，一行代碼搞定。

<a href="http://localhost:8080/12.jpg" download="12.jpg">點我下載</a>

這樣就能生成一個下載圖片的點擊鏈接了。

看完本文有收獲？請轉(zhuǎn)發(fā)分享給更多的人

IT共享之家

入群請在微信后臺回復(fù)【入群】

------------------- End -------------------

往期精彩文章推薦：

• 手把手教你進(jìn)行Mysql5.x版本的安裝及解決安裝過程中的bug

• 手把手教你用用Python爬取上道網(wǎng)的贊助公司名稱

• 一篇文章教會你用Python抓取抖音app熱點數(shù)據(jù)