js提取指定网站内容(IT共享者获取妹纸图上的图片链接功能大揭秘(组图))

　　js提取指定网站内容(IT共享者获取妹纸图上的图片链接功能大揭秘(组图))

　　前言

　　大家好，我是IT分享者，我叫皮皮。

　　妹纸地图网站大家一定很熟悉了，老司机的天堂。小编第一次说身体在逐渐变空，一定要克制自己，远离这种正能量网站。话不多说，今天就带大家去获取妹子纸质地图上的图片链接。然后大家就明白了。

　　一、项目准备

　　360浏览器，仅此而已

　　二、项目目的

　　获取页面上的所有美女图片

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

　　画面太美了，不忍直视。

　　2.打开浏览器控制台

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

　　今天我们将在这里获取所有图片链接。相信没接触过前端的人一定对它一无所知，但是编辑讲完之后，你还是什么都不知道，那是你的错。NS。

　　3.控制台功能的启示

　　你可能觉得这个地方没啥用，没啥用，不如Element Network有用；确实前两个确实很有用，可以用来分析网页结构和网页请求，但我想说的是控制台的功能。永远不要低估它，因为它可以让您在开发过程中快速查看效果图。例如，您编写了一段代码，但您想看看它现在是否可以运行。一般的做法是写HTML+CSS，然后Embedding 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)).对于...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)).地图

　　{

console.log(val)

});

　　可以看到，第四种方法与第三种方法类似，但还是有区别的。前者没有返回值，后者有，后者支持修改返回值。虽然我们把图片链接打印出来了，但是没有打印图片的名字，所以编辑开始找图片的名字：

　　发现是在Div标签中，于是编辑器开始寻找符合条件的Div：

　　document.querySelectorAll('div.img_tit')#精确找到所有类名为img_tit的Div

document.getElementsByClassName('img_tit')#找到所有类名为img_tit

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

<p>var a=0;

do{

a++;

if(a%2==0){

console.log(aa[a])

}

else{

console.log(ac[a])

}

}

while(a