*敏*感*词*教你利用JavaScript 获取任意网站图片链接

　　*敏*感*词*教你利用JavaScript 获取任意网站图片链接

　　点击上方“IT共享之家”，进行关注

　　回复“资料”可获赠Python学习福利

　　今

　　日

　　鸡

　　汤

　　下马饮君酒，问君何所之。前言

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

　　妹纸图这个网站想必大家都非常熟悉了，老司机的天堂。小编第一次进表示身体逐渐变得空虚，表示一定要克制自己，远离这种正能量的网站。话不多说，今天带大家获取妹纸图上的图片链接。然后大家都懂得。

　　一、项目准备

　　360浏览器，仅此而已

　　二、项目目的

　　获取页面所有美女图片

　　三、项目步骤1.打开浏览器，搜索图片，我们以美女图片为例：

　　画面太美，不忍直视。

　　2.打开浏览器控制台

　　F12，即可打开浏览器控制台，我们今天要做的是获取所有的图片链接，顺便查看下图片。如下图：

　　今天我们就是要在这里面获取到所有的图片链接，相信没接触过前端的人肯定对此一无所知，但是小编接下来讲过了之后你还是一无所知，那就是你的不对了。

　　3.控制台功能大揭秘

　　大家可能觉得这个地方没啥用处，啥都没有，还不如Element Network用处大；诚然前两者的确用处很大，可以用来分析网页结构和网页请求，但是我想说的是控制台的功能你永远不要小瞧了，因为它可以使你在开发过程中能快速的见到效果图，比如，你写个代码，但是你想看看它现在能否运行，一般的做法就是写个HTML+CSS然后将JavaScript嵌入到里面去，这样做显然太麻烦，而且你修改后还得在刷新才能浏览器中运行看到效果，到最后就是浏览器和编辑器频繁切换，影响开发速度和效率甚至占用多余的系统资源。于是，控制台应运而生，它使得我们可以轻松的使用JavaScript代码而无需再搭配HTML和CSS才能运行，一个Console统统搞定，这就是我们刚刚说的控制台。我们可以先来看看它的功能：

　　可以看到，它是有自动提示功能的，而且比任何三方IDE的都要全面，因为它是和浏览器配套使用的，而其它IDE则无法做到这么齐全，所以你可以看到有时候如果你想用某种方法它不会提示，那就只有一个原因，就是你用错了。

　　1).改变它的编辑状态

　　控制台输入：

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

　　在编辑状态下，我们的点击操作是没有任何作用的，也就是说只能修改，如果想还原，刷新一下浏览器即可。

　　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的Divdocument.getElementsByClassName('img_tit')#找到所有类名为img_tit

　　然后我们先输出图片名再输出图片链接，这样就可以使用循环然后进行判断，如下图：

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