DOM和BOM

[wqhui]

DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。
​

DOM用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。模型的入口就是我们常用的document节点，我们可以通过该节点进行上述的操作。
​

DOM中的事件模型

DOM0事件模型

Netscape Navigator 4和IE4分别发布于1997年的6月和10月发布的DHTML，他们是未形成标准的试验性质的初级阶段的DOM，称为DOM0，并不是标准，同时也提出了简单的事件模型，现在有的浏览器支持以冒泡的方式实现，它可以在网页中直接定义监听函数，也可以通过JS属性来指定监听函数。

<button id='btn' onclick="myFunction()">Click me</button> //网页中直接定义监听函数
<script>
	document.getElementById('btn').onclick=function(){};//JS属性来指定监听函数。
</script>

DOM2事件模型

DOM1并没有对事件模型进行扩展，只是规范了DOM结构，DOM2才是事件模型规范的开始，我们目前使用的也是当前的模型。
在该事件模型中，一次事件共有三个过程，第一个过程是事件捕获阶段。捕获指的是事件从 document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行；事件处理阶段会首先执行目标元素绑定的监听事件；最后是事件冒泡阶段，冒泡指的是事件从目标元素冒泡到 document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。
事件的监听通过addEventListener接口，事件的取消通过removeEventListener接口。

IE事件模型

IE的事件机制没有捕获阶段，事件流是非标准的，只有目标阶段和冒泡阶段，也就是上面DOM2事件模型中的目标和冒泡阶段。
事件的监听通过attachEvent接口，事件的取消通过detachEvent接口。
​

BOM

BOM (Browser Object Model——浏览器对象模型) 是为了控制浏览器行为交互的API。比如跳转到另一个页面、前进、后退等等，获取浏览器的信息和屏幕的大小之类的参数。常见的对象有：

• window JavaScript 层级中的顶层对象， 表示浏览器窗口，其他对象也都可以通过window使用。
• navigator 包含客户端浏览器的信息。
• history 包含了浏览器窗口访问过的 URL。
• location 包含了当前 URL 的信息。
• screen 包含客户端显示屏的信息。

​

引用

DOM MDN
DOM, DOCUMENT, BOM, WINDOW 有什么区别?