理解 DOM

[yangdui]

本文还有一些细节没有理清，只是介绍了大概内容。

什么是 DOM

引用 MDN 的解释：

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

DOM（Document Object Model）文档对象模型是 HTML 和 XML 文档的编程接口。

DOM 将文档（HTML、XML）结构化，并定义方式访问、修改文档。

DOM 将文档解析为由节点和对象组成的结构集合。对象中包含了属性和方法。

和 DOM 相近的是 BOM。BOM（Browser Object Model）是浏览器对象模型。主要包括：

• window 对象
• screen 对象
• location 对象
• history 对象
• navigator 对象
• 对话框

DOM 接口具体如下：

继承关系

继承关系如下：

正是因为有了继承，在 Element 上才能使用 Node 和 EventTarget 的相关方法和属性。

EventTarget 接口

EventTarget 在 MDN 描述是：

EventTarget是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器。

EventTarget 在 WHATWG DOM 规范是：

An EventTarget object represents a target to which an event can be dispatched when something has occurred.

比如说：

let element = document.getElementById(id);

此时 element 继承了 EventTarget 方法：addEventListener、removeEventListener、dispatchEvent。

EventTarget 可以接收事件，这个事件就是 Event。

Event

Event 事件（MDN， WHATWG DOM）生成：

• 通过用户生成（鼠标或键盘事件）
• 通过其他 API 生成（动画完成、视频暂停等）
• 也可以通过代码生成（HTMLElement.click()）

我们可以通过 Event 构造函数创建一个 Event 事件对象

let ev = new Event('look', {'bubbles': true, 'cancelable': false});

对于事件的属性和方法这里就不在做介绍，具体可以查看 MDN。

DOM 事件流

在 DOM 中，事件是可以传播的，也就是事件流。事件流存在三个阶段：事件捕获阶段、目标阶段、事件冒泡阶段。这个相信大家都非常属性。

根据事件冒泡发展出事件委托机制：基于事件冒泡机制，我们可以实现将子元素的事件委托给父级元素来进行处理。这个也是优化性能的一部分。

Node 接口

Node 接口会从父类 EventTarget 继承属性和方法。DOM 其他接口也会从 Node 接口继承属性和方法，以下接口继承 Node：

Document, Element, Attr, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference

我们说的节点类型，就是上面这些继承 Node 的接口。通过 Node.nodeType 可以查询

小结

DOM 最重要的是要理解各种接口的继承关系，梳理清楚继承关系之后，DOM 就很好理解了。至于各种方法属性，查看 MDN 就好。如有必要直接查看 WHATWG DOM 规范。

参考资料

WHATWG DOM

文档对象模型 DOM

Node

EventTarget

Event

DOM API详解（二）

DOM 模型