DOM 简介

该文档对象模型（DOM）由表示文档，这样的结构为代表的网页，在内存中的HTML连接网页，以脚本或编程语言。通常，这意味着JavaScript，尽管将HTML，SVG或XML文档建模为对象并不是这种核心JavaScript语言的一部分。

DOM表示带有逻辑树的文档。树的每个分支都以一个节点结尾，并且每个节点都包含对象。DOM方法允许以编程方式访问树。使用它们，您可以更改文档的结构，样式或内容。

节点也可以附加事件处理程序。触发事件后，将执行事件处理程序。

DOM接口

文档对象模型已高度简化。为此，已删除了在不同DOM级别3或更早的规范中存在的以下接口。不确定是否将来会重新引入某些，但暂时应将它们视为过时并应避免：

• DocumentTouch
• DOMConfiguration
• DOMErrorHandler
• DOMImplementationList
• DOMImplementationRegistry
• DOMImplementationSource
• DOMLocator
• DOMObject
• DOMSettableTokenList
• DOMUserData
• ElementTraversal
• Entity
• EntityReference
• NameList
• Notation
• TypeInfo
• UserDataHandler

HTML DOM

使用Document接口描述了包含HTML的文档，该接口由HTML规范扩展为包括各种HTML特定的功能。特别是，将Element接口增强为成为HTMLElement各种子类，每个子类代表一个元素（或一组紧密相关的元素）。

HTML DOM API提供对各种浏览器功能的访问，例如选项卡和窗口，CSS样式和样式表，浏览器历史记录等。这些接口在HTML DOM API文档中进一步讨论。

SVG接口

SVG 的接口之多，我们也能看到 SVG 是多么的重要。

SVG数据类型接口

SMIL相关接口

其他SVG接口

虚拟 DOM

React 虚拟DOM

Vue 虚拟DOM

Angular 增量DOM

虚拟 DOM 与元素创建

React 元素创建

• 1. createClass
• 2. createElement，创建React组件实例。
• 3. createFactory 通过工厂方法创建React组件实例。
• 4. cloneElement 克隆
• 5. es6 class 方式
• 6. function 组件

Vue 元素创建

• 1、使用 Vue.extend 来创建全局的Vue组件
• 2、直接使用 Vue.component 创建
• 3、在被控制的 #app 外面,使用 template 元素,定义组件的HTML模板
• 4、使用了Vue.use 插件的方式创建组件
• 5. createElement 创建一个元素
• 6. 用 Vue 编写抽象组件

Angular 元素创建

• class 组件

参考

• 了解Angular Ivy: Incremental DOM 和 Virtual DOM
• 如何理解虚拟DOM?
• react中的虚拟DOM
• 图解 React Virtual DOM
• www.cnblogs.com/kuachengshi…
• Vue创建组件的三种方式
• 用 Vue 编写抽象组件