专栏首页Ar-Sr-Na【教程】纯原生异步特性,教你用JavaScript快速获取壁纸站
原创

【教程】纯原生异步特性,教你用JavaScript快速获取壁纸站

节目编号:[08-1202S/08-1203R]

切记请勿用于违法用途,一切后果与作者无关!请尊重原作者著作权,除学习外禁止未经同意随意抓取数据,禁止应用于商业化行为!


原理架构分析

众所周知网页渲染出来还是html,而html都是由一部分一部分的标签组成的,对于表格,图库这类网站来说,这一部分和一部分是相似的结构,比如<tr><td>,<div class="xxx">,通过class,id,tagName的规律,不难找到相似元素,本期就以壁纸站为例:

第一步,打开F12,开发者工具分析结构

这一个个整齐的DIV,就是每一个图块对应的结构,他们的query选择器为'.thumb-container-big'

再把元素展开看看

元素Class

内容

boxgrid

图片容器,放上面那张缩略图的

boxcaption

图片的一些描述,下面的描述文字

我们正好只要这两部分,原图和标题

接下来展开boxgrid

元素

属性

内容

a

href

跳转地址

picture

source

全都是图片源,我们要的就是这个

source

source

控制台里发现最大的一张

600*375显然不是我们要的分辨率,进入图片详情看看

1920*1080的,他们的URL分别如下:

缩略:533/thumbbig-533007.png

原图:533/533007.png

多看几张,缩略图都是thumbbig-xxx.webp,原图都是xxx.png

所以我们只需要替换掉thumbbig-为空,.webp为png即可

或者如果我们注意到元素id正好对应图片的名称

替换掉thumb_即可,但是我们就无法获取上级目录了

如果要获取,就得用indexOf索引内容,太过于复杂,所以还是老老实实根据Picture里面的source属性吧

理论存在实践开始

考虑到一些网站没有jquery,所以整个过程全部是原生js运行

捕捉父级元素

案例中的元素class为thumb-container-big

所以引入方法

document.getElementsByClassName()

已经捕获到了31个元素,先用第一个元素分析

捕捉子元素

document.getElementsByClassName('thumb-container-big')[0].childNodes

一步一步抓下去

PS:这里用jQuery会更方便些

最后得到代码:

document.getElementsByClassName('thumb-container-big')[0]
.childNodes[1]
.childNodes[1]
.childNodes[1]
.childNodes[1]
.childNodes[1]

这时候已经获取到我们的Picture元素了

只需要获取他的属性srcset就能获得缩略图地址

所以我们用attributes对象获得属性:

attributes[1]

正是我们想要的链接

但是获取出来的确实一个xml格式的内容:

srcset="https://images8.alphacoders.com/533/thumb-350-533007.webp"

转化为文本:.textContent

document.getElementsByClassName('thumb-container-big')[0].childNodes[1].childNodes[1].childNodes[1].childNodes[1].childNodes[1].attributes[1].textContent

这就是我们第一个元素捕获的方法,接下来就很简单了,把它封装为一个方法,方便调用:

function getLink(count) {
  return(document.getElementsByClassName('thumb-container-big')[count].childNodes[1].childNodes[1].childNodes[1].childNodes[1].childNodes[1].attributes[1].textContent)
}

获得原图

根据上面的分析,我们对链接进行字符串替换:

getLink(0).replace('thumb-350-','').replace('.webp','.png')

遍历循环

由于class的数量正好是图片数量,所以直接根据class进行遍历

var elem = document.getElementsByClassName('thumb-container-big')
for(i0=0;i0<elem.length;i0++){
  console.log(getLink(i0).replace('thumb-350-','').replace('.webp','.png'))
}

我们的代码已经很完美,但是我不希望在控制台里输出,想要保存到文本文档怎么办?直接post到一个支持保存文件的后端即可,在这里不介绍

代码运行速度非常地快,回车一瞬间就全部跑完了,可见异步执行的威力

技术总结

优点:迅速,轻量,便捷

缺点:需要手动翻页,手动运行代码,半自动化

原创声明,本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

登录 后参与评论
0 条评论

相关文章

  • 【必收】精心整理!小程序开发资源汇总(附带源码)

    很多小伙伴想在春节放假期间学小程序,但是小程序学习的资源和教程可能不太好找。所以小助手精心整理了一期,全是干货!认真学,开启美妙的小程序开发之旅,做一个属于自己...

    腾讯云开发TCB
  • 前端每周清单第 45 期: Safari 支持 Service Worker, Parcel 完整教程, 2017 前端大事件

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊
  • 一份传男也传女的 React Native 学习笔记

    这段时间了解了一些前端方面的知识,并且用 React Native 写了一个简易新闻客户端 Demo。

    网罗开发
  • Github 4 万 Star!最全面的 Node.js 资源汇总推荐

    【导读】:Node.js 是一个开源、跨平台的,用于编写服务器和命令行的 JavaScript 运行时工具。

    五月君
  • 为我赵灵儿点赞,express-node-mysql-react全家桶

    https://github.com/webVueBlog/express-node

    达达前端
  • Flutter与Dart 入门

    Flutter是google推出的,一个使用Dart语言开发的跨平台移动UI框架,通过自建绘制引擎,能高性能、高保真地进行Android和IOS开发。

    JadePeng
  • 「首席架构师推荐」React生态系统大集合

    首席架构师智库
  • Node Sass 弃用,以 Dart Sass 代替

    就在今天,Sass 官方团队正式宣布 Libsass 将弃用,以及基于它的 Node Sass 和 SassC,并且建议用户使用 Dart Sass。

    秋风的笔记
  • Hexo异步加载方案

    在博客魔改过程中,不可避免的会引入大量的第三方脚本(js),而基于页面读取js的加载顺序,每当浏览器在加载html的过程中遇到<script>js代码片段</s...

    Akilar
  • 前端每周清单第 48 期:Slack Webpack 构建优化,CSS 命名规范与用户追踪,Vue.js 单元测试

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊
  • 前端每周清单第 49 期:Webpack 4 Beta 尝鲜,React Windowing 与 setState 分析

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊
  • 实现返回顶部-wepy小程序-前端梳理

    echarts多条折线图和横柱状图实现 https://www.jianshu.com/p/f02d604844b6

    达达前端
  • 前端食堂技术周刊第 34 期:Node.js v18 、Nuxt 3 RC1、Parcel v2.5.0、计算机程序的构造和解释

    Node.js 的每个 LTS 的版本代号都是以化学元素命名,按照首字母 A-Z 的顺序,这次的版本代号为 Hydrogen,翻译成中文是 "氢"。不过此版本目...

    童欧巴
  • ajax传参形式

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    suveng
  • iOS开发常用之网络、网页

    GuangdongQi
  • 2021高频前端面试题汇总之React篇

    合成事件是 react 模拟原生 DOM 事件所有能力的一个事件对象,其优点如下:

    zz1998

扫码关注云+社区

领取腾讯云代金券