为什么Chrome Developer Tools的“元素”标签中的某些元素不会显示在“查看页面来源？”中

Question

问题摘要：在Chrome开发者工具“元素”视图中，哪些DOM元素可能会在“查看页面源”页面中显示，反之亦然？我还应该注意其他任何陷阱吗？

详情

我正在关注nodejs cheerio模块的介绍，我正在分析this page以找到识别主要图像元素的方法。

我在chrome开发人员工具下注意到以下模式：

div class="artSplitter"
  div class="image-wrap style="cursor: pointer;"
     img src="whatever.jpg" class="blkBorder"

页面源中缺少div image-wrap元素，但它出现在chrome developer tools的elements标签中！

为了快速检查这一点，我特别关注这张图片。只是C-F来源：http://i.dailymail.co.uk/i/pix/2013/03/22/article-2297585-18DB1B03000005DC-745_634x421.jpg

我真的很感激。非常感谢。

Answer 1

实际上，HTML源代码中有标记，DOM树中有元素。当浏览器加载页面时，它会为每个标记创建一个元素（粗略地）。此翻译过程并不那么简单，因此，例如，table元素获取内部tbody元素，即使HTML中不存在tbody标记也是如此。然后，加载页面上的JavaScript可以对DOM树执行任何操作。 “页面源”窗口和“元素”选项卡不同的原因是第一个显示HTML源代码，第二个显示DOM树。