等待HTML页面完全呈现，然后进行DOM操作

Question

我正试图使用nodeJs从网页的DOM中获取特定元素。为此，我使用了jsdom，常规网页似乎一切都很完美，我可以在nodejs中查看DOM，并获取和选择元素。

问题是在像这样的一些网页上，当你进入页面时，会有一个初始网页，然后在获取新数据后，页面会发生变化并更新。这就是我想要的DOM元素出现的时候。我的代码显示了网站的初始DOM结构，所以我无法获得特定的DOM，因为它将在大约5秒后添加到网页中。

我如何才能等待网站完全呈现并更新，然后获得其DOM？

这是我的代码：

const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const url =
'https://www.flytoday.ir/flight/search?departure=THR,1&arrival=MUC,1&departureDate=2022-09-25&adt=1&chd=0&inf=0&cabin=1';
JSDOM.fromURL(url).then((dom) => {
console.log(
dom.window.document
.querySelectorAll('*')
.forEach((e) => console.log(e.innerHTML))
);
});

Answer 1

您需要一个无头浏览器。NodeJS中有一些简单的抓取工具，比如jsdom或cheerio，但它们无法在dom加载后运行JS。现代浏览器可以，这就是为什么你不能随心所欲。当我想将完全渲染的AngularJS页面转换为PDF时，我们不得不使用PhantomJS。

如今，这个项目已经失宠了，因为我们有了无头Chrome。但现在，似乎有人围绕它写了一个更简单的包装，名为Puppeter(来源：GrafiCode(。

另一种选择是硒，它已经存在很长时间了，而且非常强大。如果你想知道你的UI代码在不同的浏览器中是如何运行/看起来的，那么这个很好。这可能有点过分了，但我想我会把我在这个话题上的信息告诉你。