Node-fetch 获取“查看源代码”HTML，想要“检查器”中的内容答案

【问题标题】：Node-fetch fetches the "View Source" HTML, want what's in "Inspector"Node-fetch 获取“查看源代码”HTML，想要“检查器”中的内容
【发布时间】：2021-12-31 08:00:08
【问题描述】：

我正在使用 node-fetch 来尝试获取网站的内容。我已经阅读了几个类似的问题，例如 this one 或 this one，但我仍然无法弄清楚。

当我在页面上时，我在 View:Source 中看到一组 HTML，在 Inspector 中看到另一组。似乎这是因为网站向我展示了瞬时 DOM，而查看源代码 (CTRL+U) 向我展示了最初发送的内容？例如，HTML 的“View:Source”开始：

<!doctype html><html lang="en" translate="no"><head><meta name="version"/><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/>

HTML 的“Inspector”版本开始了：

<html translate="no" class="fontawesome" lang="en"><head style=""><script

这是我当前使用 node-fetch 设置请求的方式：

const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));

var options1 = {
        method: 'POST'
        ,headers:{/*omitting the options here*/  }
       ,body:       new URLSearchParams(postData)};

 var urlString1       = new URL(url);

    fetch(urlString1, options1)
      .then(res =>{console.log(res.headers); return res.text();})
      .then(values=>{ console.log(values);});
;

如何设置我的请求以从“Inspector”而不是“View Source”获取 HTML？

【问题讨论】：

标签： javascript node.js fetch

【解决方案1】：

似乎这是因为网站向我展示了瞬时 DOM，而查看源代码 (CTRL+U) 向我展示了最初发送的内容？

没错。

查看源代码向您显示 HTML 的文本内容。

浏览器开发工具中的 DOM 树（当您右键单击并单击检查元素时看到的内容）向您显示实际加载的元素是什么，包括自加载以来使用 JavaScript 完成的任何操作。基本上，HTML 被解析，树被构建，然后为了开发者的方便，它以一种很好的格式再次转换回 HTML，供您在开发者工具中查看。

如何设置我的请求以从“Inspector”而不是“View Source”获取 HTML？

您需要实际运行浏览器引擎，例如无头 Chrome。有几个 NPM 包可以做到这一点。

【讨论】：