javascript - 如何从多个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 到 URL_N 提取 div 并附加到前一个 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>

<!-- div from URL_3 -->

<div class="listheader">
<img src="/nr-images/flag.gif" width="33" height="28">
<div class="listname">Bank of Italy                                                                                                           
<span class="added">(added 1982 -  - #82000963)</span>
</div>
<div class="listaka">Also known as Bank of America on Fulton Mall</div>
<div class="listaddress">1015 Fulton Mall                                                                                                        , Fresno
</div>
</div>

我该怎么做？提前致谢。

更新

下面是我运行@Thomas 提供的解决方案时得到的结果。我看到 3 个 iframe，但展开它们时，它们是空的。

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 需要抓取，您可能不希望像这样同时抓取所有 URL，因为每个 iframe 就像一个单独的浏览器选项卡并占用大量资源。因此，您可以分批进行，或者仅在上一个完成后才开始下一个。