如何从特定页面中提取所有链接并使用 JavaScript 将它们放入数组中？答案

【问题标题】：How to extract all links from a particular page and place them into an array with JavaScript?如何从特定页面中提取所有链接并使用 JavaScript 将它们放入数组中？
【发布时间】：2015-06-03 14:32:25
【问题描述】：

老实说，我不知道从哪里开始“提取”。我最好的猜测是使用 JQuery 中的基本 .html() 标签来解决这个问题。这是一个小项目来提高我的 JavaScript 技能。关于如何做到这一点的任何想法？非常感谢...

对于不清楚的地方，我深表歉意。我的意思是从我不拥有的域中提取特定页面的所有链接。然后，将这些链接放入一个数组中。谢谢！

【问题讨论】：

你能把那个远程页面放在一个新窗口中，然后从中提取 url 并将其存储在 localStorage 或 cookie 中。否则您将需要使用 ajax 并将检索到的页面放入 input type='hidden'>

标签： javascript hyperlink extraction

【解决方案1】：

嗯，想到了这个？

var arr = [].slice.call( document.querySelectorAll('a') );

它获取所有与querySelectorAll匹配的元素，并将返回的nodeList转换为使用[].slice.call的数组，其中[]是Array.prototype的快捷方式。换句话说，它使用call() 调用本机Array.slice 方法，将元素作为this 值传入，有效地从元素创建一个数组。

如果您需要 HTML 而不是 DOM 元素，您可以映射元素数组并返回 outerHTML

var markup = arr.map(function(elem) { return elem.outerHTML; });

或者，如果您只需要 URL，您可以运行相同的地图并返回 href 属性

var urls = arr.map(function(elem) { return elem.getAttribute('href'); });

【讨论】：

如果他需要这些网址？（假设元素有一个href）;-)

【解决方案2】：

你不一定需要 jQuery，如果学习 Javascript 是你的目标，你现在不使用它可能会更好。 querySelectorAll 在所有现代浏览器中都可用，并且可以完成您正在寻找的内容。根据文档：

返回文档中匹配指定选择器组的元素列表（使用文档节点的深度优先前序遍历）。返回的对象是NodeList。

但是，NodeList 不是数组，因此您需要做一些额外的工作来创建链接elements 的数组。您可以在文档中阅读它们为何不同。

该方法中使用的选择器是CSS Selectors，您可以查看querySelector 的文档以获取示例。

所以要做你想做的事，你可以这样做：

var a_list = document.querySelectorAll('a'); // returns NodeList
var a_array = Array.prototype.slice.call(a_list); // converts NodeList to Array

【讨论】：

【解决方案3】：

如果 jQuery 是可接受的选项，您可以通过简单的方式获取所有链接

var links = $('a[href]');

“链接”已经是一个数组了。

【讨论】：

【解决方案4】：

我也会摆弄这样的东西。

Array.prototype.slice.call(document.querySelectorAll('a'));

谷歌搜索将是一个好的开始，这样您就可以了解更多关于它的工作原理并利用它来发挥自己的优势。

【讨论】：