从百度云盘玩一玩前端操作

起因是这样的，好早之前下载了一个学习视频，最近突然心血来潮想学习一下，等学到了第36个视频的时候，才发现视频没全部下载下来，本地只有49个。

于是去百度网盘上溜了一圈，找到了原资源，总共有116个视频。原本只需要简单的全选后下载即可，但是恰好b站最近又给我推了一抹多的什么硬盘损坏的视频，搞得我很紧张，想只下载缺失的部分。

然而事情可不会这么顺利，百度网盘的网页页面是真的难用，它在我点了十几个选择勾勾之后，突然一下子全清掉了，人都麻了。

成年人的崩溃就在一瞬间

成年人的崩溃就在一瞬间。

于是我就上头了，想要直接在这个页面，用代码自己去帮我点击选择要下载的视频。虽然我不会前端，但是说干就干。

首先查看这个框到底是个啥。本想着是个checkbox啥的，那就简单了。没想打开F12调试工具一看，居然是个span，而且选中和不选中，居然没有变化，怪了。

百度网盘的选中框居然是span

终于，在试了好几次之后，才看到，变化的居然是更上级的dd，这个dd又是什么鬼东西。麻了，要不算了吧。但是一想到在朋友面前刚装的b，不能不做呀，但是又毫无头绪。

百度网盘选中框居然是dd

只好再在F12里找找东西了。随便翻翻，发现在span上有好几个点击事件，右边还有一个Remove按钮，于是我就全都点了一下Remove。欸，页面上的选中框，点不动了，我好像又行了。但是为啥下面的点击事件都是一行，重复绑定了么？

无意间找到了选中框的点击事件

点进js source，点击的格式化，哦，来了来了，是源代码，打个断点试试。断点后，点击选中框，还是没有变化....破东西，不玩了。算了算了，，都到这步了（都浪费这么多时间了），再看看吧。

回到Elements的点击事件标签看，哦，哪路或多。原来不是重复绑定，不是同一个点击事件呀，是js压缩到一行了，好吧，那就每个都下个断点。

原来不是重复绑定的点击事件呀

终于，在一番操作后，点击span，进入到断点了，我彷佛看到了胜利的曙光，有个可爱的天使在向我招手（来自半夜1点的发言）。

终于找到了选中框的点击事件

找到了点击后调用的js了，然而我又陷入了迷茫，接下来该怎么办。突然又失去了头绪。

然后突然想起来，好像，可以直接触发元素的点击事件？赶紧试试。

给回到Elements页面，右键span，选择add attribute，然后输入id="aaaa"，给span加上id。接下来切换到Console页面，熟练的在console里写上，document.getElementById("aaaa")，回车，哦，有了。

在js里选中了span

接下来就是赶紧查一查，怎么触发点击。直接打开搜索，输入“js 触发click”，进入第一个页面。有了，而且好像很简单的样子，赶紧复制下来试试。

搜索出来的js触发click方法

回到Console页面，输入document.getElementById("aaaa").click()，回车确认，触发了断点，看来成功了，那么剩下的就都好说了。接下来，只需要选中所有的span，然后过滤出自己需要的，最后，触发他们的click事件就行了。

接下来的选中元素呀，啥的，过程就省略了，直接贴上代码。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// 查看过滤的情况
let arr = [];
document.querySelectorAll("dd.g-clearfix").forEach(item => {
    if (parseInt(item.querySelector("a").innerHTML.slice(0, 3)) > 49) {
        arr.push(item.querySelector("a").innerHTML);
    }
});

// 选中过滤后的文件
document.querySelectorAll("dd.g-clearfix").forEach(item => {
    if (parseInt(item.querySelector("a").innerHTML.slice(0, 3)) > 49) {
        item.querySelector("span").click()
    }
});

终于完成了目标，用js选中了想要的文件

到这里，这个突发奇想的目标，就算达成了。虽然总共花了半个多小时，手动选可能最多就1，2分钟的时间，但是，我得到了快乐哈哈哈。

从百度云盘玩一玩前端操作

相关文章：