批量获取网页中想要的信息

主要是 JavaScript 选择器的运用

事情是这样的，在这篇文章中有一个 PTT 迟迟加载不了，因此使用 chrome 元素选择器定位到元素，发现结构是这样的

<div data-index="2" class="slide">
    <img class="slide_image" data-normal="URL" data-full="URL" data-small="URL">
</div>
<div data-index="3" class="slide">
    <img class="slide_image" data-normal="URL" data-full="URL" data-small="URL">
</div>
<div data-index="4" class="slide">
    <img class="slide_image" data-normal="URL" data-full="URL" data-small="URL">
</div>
<!--以此类推-->

之后在 Console 中输入代码，获取所有连接然后粘贴至迅雷成功批量下载

var imgUrls = "";
for(var i of document.querySelectorAll("img.slide_image[data-full]")){
	imgUrls += i.getAttribute("data-full") + "\r\n"
}
console.warn("\r\n"+imgUrls);

Console 中换行输入需要 Shift + Enter

以上代码中关键在于 document.querySelectorAll 方法，入参为 CSS 选择器表达式，其意为选择所有 class=slide_image 的 img 标签，且标签包含 data-full 属性。

这篇文章【MDN web docs】Document.querySelectorAll 很详细介绍了这个方法的使用（如果选择一个元素使用 querySelector 方法即可）

//返回所有img元素
var matches = document.querySelectorAll("img");
//返回第一个class=stage元素
var matches = document.querySelector(".stage");
//返回第一个id=test元素
var container = document.querySelector("#test");
//返回class=slide_image的img元素，且具有data-full属性
document.querySelectorAll("img.slide_image[data-full]");

关于 CSS 选择器可以参考以下几篇文章