⼿把⼿教你利⽤JavaScript获取任意⽹站图⽚链接
前⾔
⼤家好，我是IT共享者，⼈称⽪⽪。
妹纸图这个⽹站想必⼤家都⾮常熟悉了，⽼司机的天堂。⼩编第⼀次进表⽰⾝体逐渐变得空虚，表⽰⼀定要克制⾃⼰，远离这种正能量的⽹站。话不多说，今天带⼤家获取妹纸图上的图⽚链接。然后⼤家都懂得。
⼀、项⽬准备
360浏览器，仅此⽽已
⼆、项⽬⽬的
获取页⾯所有美⼥图⽚
三、项⽬步骤
1.打开浏览器，搜索图⽚，我们以美⼥图⽚为例：
画⾯太美，不忍直视。
2.打开浏览器控制台
F12，即可打开浏览器控制台，我们今天要做的是获取所有的图⽚链接，顺便查看下图⽚。如下图：
今天我们就是要在这⾥⾯获取到所有的图⽚链接，相信没接触过前端的⼈肯定对此⼀⽆所知，但是⼩编接下来讲过了之后你还是⼀⽆所知，那就是你的不对了。
3.控制台功能⼤揭秘
⼤家可能觉得这个地⽅没啥⽤处，啥都没有，还不如Element Network⽤处⼤；诚然前两者的确⽤处很⼤，可以⽤来分析⽹页结构和⽹页请求，但是我想说的是控制台的功能你永远不要⼩瞧了，因为它可以使你在开发过程中能快速的见到效果图，⽐如，你写个代码，但是你想看看它现在能否运⾏，⼀般的做法就是写个HTML+CSS然后将JavaScript嵌⼊到⾥⾯去，这样做显然太⿇烦，⽽且你修改后还得在刷新才能浏览器中运⾏看到效果，到最后就是浏览器和编辑器频繁切换，影响开发速度和效率甚⾄占⽤多余的系统资源。于是，控制台应运⽽⽣，它使得我们可以轻松的使⽤JavaScript代码⽽⽆需再搭配HTML和CSS才能运⾏，⼀个Console统统搞定，这就是我们刚刚说的控制台。我们可以先来看看它的功能：
可以看到，它是有⾃动提⽰功能的，⽽且⽐任何三⽅IDE的都要全⾯，因为它是和浏览器配套使⽤的，⽽其它IDE则⽆法做到这么齐全，所以你可以看到有时候如果你想⽤某种⽅法它不会提⽰，那就只有⼀个原因，就是你⽤错了。
1).改变它的编辑状态
控制台输⼊：
图片链接怎么生成.定位特定元素
这⾥我们可以先看看我们要看的浏览器图⽚元素的信息，可以先打印出所有的图⽚，这⾥使⽤⼀个特殊符号：
我们可以看到，通过这个语法糖可以打印当前页⾯所有的图⽚信息，显⽰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)).f
for(const a of aa){
console.log(a)
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论