javascript - 为什么在源代码上看不到DOM结构？

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

时间：2018-12-28 19:18:57

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

如果我在某些网站（例如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教程，但是我不知道自己是否走对了。

2 个答案:

答案 0 :(得分：2)

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

View Source选项直接从服务器显示源。

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

是否可以通过使用JavaScript从动态创建的网站中获取特定元素的方法？

没有某种类型的系统可以运行该JavaScript代码，因此，并非并非如此。情况变得非常复杂。这就是为什么仍然不鼓励动态创建元素的原因。大型爬虫已经学会了如何通过运行JavaScript代码然后查看DOM结果来检测那些动态创建的元素。

您可以研究某种无头浏览器系统或类似的系统。但是，当然这可能会带来一些安全隐患。

答案 1 :(得分：1)

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

1）代替“视图源”，点击“ 元素”标签。在打开此标签的浏览器中右键单击特定元素，然后选择 检查元素 的选项，即可进入该元素。

2）要以编程方式访问DOM（或调试代码），应点击“ 来源”标签。您必须打开特定文件，并在适当时放置调试点，然后按F11转到下一个点，按F8转到下一个调试点等。

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