如何从多个 URL 中提取相同的元素并保存在文件中？

Question

我有许多 URL 的列表，我想为其提取在每个 URL 中具有相同查询选择器的特定元素。例如，在 Chrome 中打开 URL“ http://www.nationalregisterofhistoricplaces.com/al/autauga/state.html ”，然后运行此命令document.querySelector("body > div:nth-child(7) > div.listheader")我在 Chrome 浏览器控制台中打印了所需内容（如果我应该在另一个工具中尝试 javascript 脚本，请告诉我是哪一个）我是 javascript 新手，我正在尝试，我想从 URL_1 中提取 div 元素并将其保存到 out.html，然后从 URL_2 中提取 div 到 URL_N 并附加到前一个 div 下方，依此类推。到目前为止，我已经尝试了以下代码，但它仅在新选项卡中打开第一个 URL，并且没有打印其 div。var urls = ["http://www.nationalregisterofhistoricplaces.com/al/autauga/state.html","http://www.nationalregisterofhistoricplaces.com/al/barbour/state.html","http://www.nationalregisterofhistoricplaces.com/ca/fresno/state.html"];for (i = 0; i < urls.length; i++) {    window.open(urls[i])    document.querySelector("body > div:nth-child(7) > div.listheader")};我的目标是合并每个 URL 的 div 并将它们保存在 out.html 中，如下所示：<!-- div from URL_1 --><div class="listheader"><img src="/nr-images/flag.gif" width="33" height="28"><div class="listname">Bell House                                                                                                              <span class="added">(added 1999 -  - #99000150)</span></div><div class="listaka">Also known as Biggs House</div><div class="listaddress">550 Upper Kingston Rd.                                                                                                  , Prattville</div></div><!-- div from URL_2 --><div class="listheader"><img src="/nr-images/flag.gif" width="33" height="28"><div class="listname">Bray-Barron House                                                                                                       <span class="added">(added 1971 -  - #71000093)</span></div><div class="listaddress">N. Eufaula Ave.                                                                                                         , Eufaula</div></div>我怎样才能做到这一点？提前致谢。

Answer 1

我只是想到了另一种方式。因为所有 URL 都在同一个域中，所以您实际上可以在 iframe 中打开它们，并且您可以从脚本中访问每个 iframe 的内容。看起来是这样的：

for (const url of urls) {

    const iframe = document.createElement('iframe')

    iframe.src = url

    iframe.onload = () => {

        console.log(iframe.contentDocument.querySelector("body > div:nth-child(7) > div.listheader"))

    }

    document.body.appendChild(iframe)

}

请注意，onload回调是异步的，因此您将以任意顺序获得输出。此外，没有错误处理（onerror为此附加回调）。

如果您有大量的 URL 需要抓取，您可能不希望像这样同时执行所有这些操作，因为每个 iframe 就像一个单独的浏览器选项卡并且占用大量资源。所以你可以分批做，或者在前一个完成后才开始下一个。

Answer 2

在浏览器控制台中，您会遇到麻烦，因为您在那里编写的所有 JavaScript 都将在当前页面的上下文中运行。一旦你打开一个新页面，你就会失去它。

您可以使用 NodeJS 来做到这一点，它是一个在浏览器之外运行的独立 JavaScript 引擎。您需要编写代码来获取 HTML，以及一个库来解析和查询它。

另一种方法可能是 NW.js，它类似于浏览器，但没有沙盒。