为什么 Chrome 开发者工具'elements'标签页中的某些元素没有显示在'view page source?'

Question

问题摘要:在什么情况下DOM元素可能会发现在chrome开发人员工具'元素'视图不出现在'视图页面源'页面，反之亦然?还有什么我应该注意的陷阱吗?

我正在跟随nodejs cheerio模块的介绍，我正在分析这个页面，以找到识别主要图像元素的方法。

我注意到chrome开发人员工具下面的模式:

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

div image-wrap元素在页面源中缺失，但出现在chrome开发人员工具的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元素，即使tbody标签不存在于HTML中。然后，加载页面上的JavaScript可以对DOM树做任何想做的事情。"页面源"窗口和"元素"选项卡不同的原因是，第一个显示HTML源代码，第二个显示DOM树。