为什么在源代码上看不到 DOM 结构？答案

【问题标题】：Why DOM structure is not seen on source code?为什么在源代码上看不到 DOM 结构？
【发布时间】：2018-12-28 19:18:56
【问题描述】：

如果我在某些网站（例如 keep.google.com）上点击 right click->wiew source，我将看不到 DOM。我得到了一堆 JavaScript 而不是 <body><div>...</div></body> 结构。但是，如果我去right click->inspect element，我可以使用 Chrome 开发者工具访问 DOM。

1) 为什么我无法从源代码访问 DOM？

2) 如何以编程方式访问 DOM？

我看过一些 node.js 教程，但我不知道我是否走对了。

【问题讨论】：

JavaScript 用于动态构建 DOM
源代码中没有DOM。源代码是文字文本。文档对象模型是浏览器中从初始源创建并在事后修改的对象。
@Taplar ，ic3b3rg 谢谢你们。有没有办法访问动态创建的页面中的特定元素？
是的，有很多不同的方式。如果您对此不熟悉，那么您需要查找 javascript 的初学者教程。

标签： javascript html node.js dom web-scraping

【解决方案1】：

如果您的 HTML 是使用 JavaScript 动态构建的，那么最终的 HTML 将不会显示在来自服务器的原始源代码中。但在 DevTools 中，您将能够在创建这些动态创建的元素后对其进行检查。

View Source 选项直接显示来自服务器的源代码。

Inspect Element 选项显示当前 DOM，包括所有动态创建的元素。

有没有办法通过使用例如 JavaScript 从动态创建的网站中获取特定元素？

没有某种类型的系统来运行该 JavaScript 代码，等等，不是真的。这是进入一个非常复杂的情况。这就是为什么出于 SEO 目的动态创建的元素仍然有点不鼓励。大型爬虫已经学会了如何通过运行 JavaScript 代码，然后查看 DOM 结果来检测那些动态创建的元素。

您可以研究某种类型的无头浏览器系统或类似的东西。但这当然会带来一些安全问题。

【讨论】：

感谢您的回答。有没有办法通过使用例如 JavaScript 从动态创建的网站中获取特定元素？
@Tahtakafa 我假设你的意思是网络抓取，因为你的问题被标记为那个。没有某种类型的系统来运行该 JavaScript 代码，等等，不是真的。这是进入一个非常复杂的情况。这就是为什么出于 SEO 目的动态创建的元素仍然有点不鼓励。大型爬虫已经学会了如何通过运行 JavaScript 代码来检测那些动态创建的元素，然后查看 DOM 结果。

【解决方案2】：

在浏览器上按 F12 键，它应该会打开开发者工具。根据您使用的浏览器，您将拥有不同的选项卡，您可以在其中调试 Javascript。

1) 点击“元素”标签，而不是查看源代码。在此选项卡打开的情况下，右键单击浏览器中的特定元素并选择检查元素选项，您将转到该元素。

2) 要以编程方式访问 DOM（或调试您的代码），您应该点击“Sources”标签。您必须打开特定文件并根据需要放置调试点，然后按 F11 进入下一个点，按 F8 进入下一个调试点等。

您还可以添加 console.log() 来查看特定的数据点，而无需手动调试。

【讨论】：