JS教程:学习如何通过代码批量导出页面链接地址提高操作

问题描述：如果网页上有很多链接需要提取并且有一定规律改怎么导出呢？

案例网站：https://www.hosthah.com/cloud文章源自

实现思路：可以将链接地址收集到一个字符串中，然后以文本格式输出。

定位元素：div.site-intro > h2 > a 其他网站只修改此处即可文章源自玩技e族

操作步骤：

1、以下是将链接地址收集并输出为文本格式的示例代码：

文章源自玩技e族https://www.playezu.com/834233.html

1. 打开谷歌浏览器并导航到你想要操作的页面。
2. 按下 F12 键打开开发者工具。
3. 选择“Console”选项卡。
4. 输入并运行以下JavaScript代码：

// 使用 querySelectorAll 定位所有符合条件的元素并获取链接地址
var elements = document.querySelectorAll('div.site-intro > h2 > a');
var linksText = '';
 
// 收集所有链接地址
elements.forEach(function(element) {
    linksText += element.href + '\n';
});
 
// 输出为文本格式
console.log(linksText);

2、这段代码将所有符合 div.site-intro > h2 > a 选择器的链接地址收集到一个字符串中，并在每个链接地址后添加一个换行符。最后，将整个字符串输出到控制台。你可以将输出的文本复制并保存到你需要的位置。文章源自玩技e族-https://www.playezu.com/834233.html

进阶教程：

实现获取所有链接地址并在新标签页中打开这些链接的功能，你可以在原有代码的基础上进行扩展。以下是修改后的代码：

// 使用 querySelectorAll 定位所有符合条件的元素并获取链接地址
var elements = document.querySelectorAll('div.site-intro > h2 > a');
var linksText = '';
 
// 收集所有链接地址并在新标签页中打开
elements.forEach(function(element) {
    var url = element.href;
    linksText += url + '\n';
    window.open(url, '_blank');
});
 
// 输出为文本格式
console.log(linksText);

这段代码将：

1. 使用 querySelectorAll 定位所有符合 div.site-intro > h2 > a 选择器的元素。
2. 遍历这些元素，收集每个元素的链接地址并将其添加到 linksText 字符串中。
3. 使用 window.open(url, '_blank') 在新标签页中打开每个链接。
4. 将所有链接地址输出到控制台作为文本格式。

请注意，这段代码会打开多个新标签页，取决于页面上的链接数量。如果链接数量很多，这可能会导致浏览器打开过多标签，从而影响性能。谨慎使用此代码。