本文探讨了网页渲染的过程，重点介绍了DOM（文档对象模型）在不同浏览器中的作用，以及如何通过Chrome的开发者工具查看和操作HTML的树表示。浏览器将HTML解析成内存中的对象，这个树形结构称为DOM树。CSS则负责控制HTML元素的呈现方式。文章还提到了框模型，它是将DOM树映射到屏幕上的关键，解释了元素如何占据屏幕空间。了解这些概念对于理解和操纵网页内容至关重要。
接上一次分享：爬虫看网页，先看网页结构树
每个浏览器都有其自身复杂的内部数据结构,凭借它来渲染网页。DOM表示法具有跨平台、语言无关性等特点,并且被大多数浏览器所支持。
想要在 Chrome中查看网页的树表示法,可以右键单击你感兴趣的元素,然后选择 INspect Element.如果该功能被禁用,你仍然可以通过单击 Chrome菜单并选择 Tools| Developer Tools来访问它,如图所示
三秋道果说python爬虫
此时,你可以看到一些看起来和HTML表示非常相似但又不完全相同的东西。它就是HTML代码的树表示法。如果不管原始HTML文档是如何使用空格和换行符的话,它看起来几乎就是一样的。你可以单击每个元素,检查或调整属性等,同时可以在屏幕上观察这些变动有何影响。比如,当你双击某个文本,修改它,并按下回车键时,屏幕上的文本将会更新为这个新值。在右侧的 Properties标签下,可以看到这个树表示法的属性,并且在底部可以看到一个类似面包屑的结构,它显示出了当前选择的元素在HTML元素层次结构中的确切位置,如图所示。
三秋道果说python爬虫
需要注意的一个重要事情是,HTML只是文本,而树表示法是浏览器内存里的对象,你可以通过编程的方式查看并操纵它,比如在Chrome中使用 Developer Tools
你看到的网页是渲染以后的！
HTML文本表示和树表示并不包含任何像我们通常在屏幕上看到的那种漂亮视图。这实际上是HTML成功的原因之一。它应该是一个由人类阅读的文档,并且可以指定页面中的内容,而不是用于在屏幕中渲染的方式。这意味着选择HTML文档并使其更加好看是浏览器的责任,不管它是诸如 Chrome的全功能浏览器、移动设备浏览器,甚至是诸如Lyx的纯文本浏览器。
也就是说,网络的发展促使Web开发者和用户对网页渲染的控制产生了巨大需求。CSS的创建就是为了对HTML元素如何渲染给予提示。不过,对于抓取而言,我们并不需要任何和CSS相关的东西。
那么,树表示法是如何映射到我们在屏幕上所看到的东西呢?答案就是框模型。正如DOM树元素可以包含其他元素或文本一样,默认情况下,当在屏幕上渲染时,每个元素的框表示同样也都包含其嵌入元素的框表示。从这种意义上说,我们在屏幕上所看到的是原始HTML文档的二维表示——树结构也以一种隐藏的方式作为该表示的一部分。比如,在下图中,我们可以看到3个DOM元素(一个和两个嵌入元素
和
)是如何在浏览器和DOM中呈现的。
三秋道果说python爬虫
本文有三秋道果分享，如有不当请联系三秋道果，不吝指出，谢谢
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
