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

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

　　今日鸡汤

　　下马喝你的酒，问问你的目的是什么。

　　前言

　　大家好，我是一名IT分享者，人称皮皮。

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

　　一、项目准备

　　360浏览器，仅此而已

　　二、项目目的

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

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

　　图片太美了，看不下去了。

　　2.打开浏览器控制台

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

　　今天我们将获取其中的所有图片链接。相信没接触过前端的人一定对此一无所知，但是小编接下来讲了之后，你还是一无所知，那是你的错。

　　3.控制台功能揭晓

　　你可能觉得这个地方没用，什么都没有，还不如 Element Network 好用；确实前两个非常好用，可以用来分析网页结构和网页请求，但是我要说的是控制台的功能。千万不要小看它，因为它可以让你在开发过程中快速看到效果图，比如你写了一段代码，但是你现在想看看能不能用，一般的做法是写HTML+CSS然后嵌入JavaScript进去显然太麻烦了，修改后必须刷新浏览器才能看到效果。最终导致浏览器和编辑器频繁切换，影响开发速度和效率，甚至占用额外空间。系统资源。于是，控制台应运而生，这使我们能够轻松地使用 JavaScript 代码，而无需匹配 HTML 和 CSS 即可运行。一个控制台可以做任何事情，这就是我们刚才说的控制台。我们可以先来看看它的作用：

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

　　1).更改其编辑状态

　　控制台输入：

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

　　在编辑状态下，我们的点击操作是没有效果的，也就是说只能修改。如果要恢复它，只需刷新浏览器即可。

　　2)。针对特定元素

　　这里我们可以先看一下我们想看的浏览器图片元素的信息。我们可以先打印出所有的图像。这里我们使用一个特殊的符号：

　　我们可以看到，通过这个句法糖，可以打印出当前页面的所有图片信息，显示70，说明本页有70张图片。当小编再次滚动鼠标时，发现图片数量增加了，变成了136张图片。，这意味着它已加载 Ajax。

　　除了这种获取图片的方式，你还可以这样做：

　　document.images

　　得到的结果与上面完全相同。随着这些知识点的积累，我们现在可以轻松获取所有的图片链接。

　　4.获取图片链接和图片名称

　　这里我们需要将获取到的图片加入到数组中，然后遍历完后将所有图片打印出来。

　　1).创建一个数组来存储所有的图片

　　ab=document.images #获取当前页面所有图片<br />var aa=[] #建立数组<br />for(const y of ab){ #建立const变量使得无法修改<br /> aa.push(y); #把图片装进数组<br />}

　　2)。遍历数组打印图片链接

　　这里可以使用的方法有很多，我将一一介绍。

　　1)).对于 ...in

　　for(const a in aa){<br /> console.log(aa[a])<br />}

　　2)).对于...的

　　for(const a of aa){<br /> console.log(a)<br />}

　　3)).ForEach

　　aa.forEach(function(val,item,array){<br /> console.log(val)<br />});

　　4)).地图

　　{<br /> console.log(val)<br />});

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

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

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

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

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