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的库

这块我们最为熟悉的莫过于各浏览器的开发者工具了。

总结

1. DOM是一个标准，从DOM Level 1 ~ DOM Level 4 再到 DOM 动态标准。
2. 简单介绍了我对标准的认识。可以简单理解为一系列接口。
3. DOM的应用场景，如Web浏览器的DOM树，JavaScript操作DOM。
4. DOM的实现，如渲染引擎和其他的一些库。

下节预告

下一节我们将一起学习DOM API。