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。
