DOM入门
BOM
浏览器对象模型(BrowserObjectModel),简称BOM,表示web浏览器对外暴露的所有对象。BOM并没有相应的官方标准,浏览器厂商可以自由实现BOM。
Window对象
浏览器窗口对象Window,代表了我们看到的浏览器窗口。它是BOM对象层次模型中的根节点。所有的全局Javascript对象,函数和变量都自动成为window对象的成员。
DOM
文档对象模型(Document Object Model)表示浏览器窗口展现的文档树模型。document对象是Window对象的成员。
DOM标准
-
DOM Level 0、遗留DOM
在DOM Level 1之前,JavaScript和JScript具有的侦测用户操作页面的事件和修改HTML文档的有限功能成为了事实上的DOM Level 0或遗留DOM。 -
DOM Level 1 ~ DOM Level 4标准
和BOM不同,DOM标准经历了DOM Level 1 ~ DOM Level 4阶段。
DOM Level 4在2015年作为WHATWG动态标准的快照发布。 -
WHATWG DOM动态标准
实际上,DOM Level 4是最后一个静态标准,之后的DOM标准都由WHATWG发布,按需持续变更。 -
Web Hypertext Application Technology Working Groups(WHATWG)
Web超文本应用技术工作组是由对HTML及相关技术感兴趣的一帮人组成的社区,WHATWG最初由来自苹果, Mozilla基金会,Opera Software 3个浏览器厂商的个体在2004年创建。
它的成立是为了应对W3C在开发现代web标准的缓慢及反对w3c当初放弃HTML而支持基于XHTML技术的决定。
他们开发了HTML 5标准,并被w3c采纳为新HTML工作组的起点。2018年WHATWG强烈反对W3C的DOM 4.1标准。2019年W3C和WHATWG
达成共识,W3C放弃发布未来的HTML及DOM标准改而支持WHATWG的动态标准作为官方版本。经过WHATWG的努力,HTML及DOM的控制权
重新回到浏览器厂商手里。 -
谈谈标准
一说到标准,总感觉和我们的关系不大,我们深以为那也不是我们干的事。确实,我们很少会去阅读所谓的标准。但实际上我们的工作
能得以有效展开是脱离不了标准的。我们虽然不制定标准,但我们依然处于标准的约束下。从这个意义上,标准是约束。
回到DOM标准上来,为什么会制定标准,实际上是在各浏览器厂商间建立一套规范,以让相同的代码在不同的浏览器实现得到一致的结果。
从这个角度可以将标准理解为约定、定义、接口。说到接口,我想标准离我们更近了。学过面向对象编程的都知道接口也是一种抽象,行为的抽象,因此标准的制定可理解为接口的设计。
比如getElementById,我们知道传入一个节点的id时,我们知道会得到一个Object,为什么是Object,而不是其它,这何尝不是标准的
体现。所以虽然我们没有制定标准,实际上却在使用。
大部分时候,我们只是规范(标准、约束或其他类似的词汇)的遵守着和使用者,但是了解背后的设计原理、初衷,解决的问题等有助于锻炼思维,
让我们理解这一切是如何运作的。
再看DOM
DOM是跨平台且语言无关的接口,以树的结构处理XML或HTML文档。
- DOM结构
DOM对应到数据结构上是一棵n叉树,整个DOM表示为对应文档的逻辑树。 - DOM节点
每个DOM节点用一个对象表示,它表示文档的一部分。 - DOM节点的关系
DOM节点间是父子、兄弟、先后代的关系 - DOM模型和界面展示
DOM模型是一颗向下生长的树,而界面展示通常向上生长的树。
DOM的应用
Web浏览器中的DOM树
浏览器处理HTML文档为一个DOM树,最顶层的节点为Document对象。当HTML页面在浏览器中渲染时,浏览器将HTML载入内存,
自动解析后,显示在屏幕上。
JavaScript和DOM
当Web页面加载后,浏览器创建了页面的DOM。它是HTML文档的面向对象表示,它作为JavaScript和文档连接的接口。
因此基于JavaScript可更改页面元素和属性,样式,对事件进行响应或增加新事件的能力便能创建动态网页。
DOM的实现
渲染引擎(浏览器引擎或布局引擎)
我们通常称为浏览器内核。
浏览器将HTML解析成DOM,内部依赖的是渲染引擎。不同的渲染引擎对于DOM标准的遵守程度不同。
如下为各大浏览器使用的渲染引擎。
浏览器 | 渲染引擎 |
---|---|
IE | Trident |
Edge | Blink |
Chrome | Blink |
Opera | Blink |
Opera Mini | Webkit |
Apple | Webkit |
Firefox | Gecko |
注意不要浏览器引擎和渲染引擎混淆
实现DOM的库
这块我们最为熟悉的莫过于各浏览器的开发者工具了。
总结
- DOM是一个标准,从DOM Level 1 ~ DOM Level 4 再到 DOM 动态标准。
- 简单介绍了我对标准的认识。可以简单理解为一系列接口。
- DOM的应用场景,如Web浏览器的DOM树,JavaScript操作DOM。
- DOM的实现,如渲染引擎和其他的一些库。
下节预告
下一节我们将一起学习DOM API。