Slatejs 设计富文本数据模型时，灵感大量汲取自 HTML 的 DOM 架构理解 Slatejs 如何构建其富文本模型之前，我们先回顾 HTML 中的富文本设计Web 富文本本质上是一段 HTML 内容，其构成由节点与文本组成在构建富文本节点时，需要考虑节点的类型文本以及附加数据HTML 规范定义了节点为 Node；1元素节点是HTML标签元素，元素节点主要提供了对元素标签名子节点及属性的访问2属性节点一般是元素节点的属性，每一个 XML 属性算是一个属性节点3文本节点是DOM中用于呈现文本的部分，一般被包含在元素节点的开闭合标签内部4文档节点是DOM中用于呈现整个文档的部分，文档节点的。

1 树形结构 根节点在HTML DOM中，document对象是树的根它代表了整个HTML文档 节点层次根节点下面有若干子节点，这些子节点可以是元素节点文本节点注释节点等每个元素节点也可以有自己的子节点，形成一个层次结构2 元素与属性 元素在HTML DOM中，每个HTML标签都被视为一个元素；nodeName节点名称nodeValue节点值nodeType节点类型nodeType nodeType 属性可返回节点的类型最重要的节点类型是元素类型 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9 在实际应用中，经常用到的就是元素节点属性节点和文本节点了，下面我们通过小段代码进行讲解 1元素。

html文档中的各节点可划分为

1、HTMLCollection和NodeList都是DOM中的集合类型，用于存储一系列的元素或节点，但它们有一些关键的区别HTMLCollection 获取方式可以通过getElementsByTagName或方法获取 元素类型获取的是HTML元素集合，类似于HTML元素数组。

2、1 DOM树HTML文档被解析成一个DOMDocument Object Model，文档对象模型树每个HTML元素如ltdivltspanlta等都被视为DOM树中的一个节点2 节点DOM树中的每个元素都是一个节点节点类型包括元素节点文本节点属性节点等3 选择器用于在DOM树中查找元素常见的有ID选择器类选择器。

3、1 定义与分类 tag节点，即HTML标签，是HTML文档的基本组成单元 它们用于定义网页中的不同类型的内容，如文本图像链接等2 常见标签 HTML中常用的tag节点有很多种，包括但不限于headtitlemetalinkbodyheaderarticlesectionfooternavasideforminput等 每个tag节点。

4、DOM文档对象模型是针对HTML和XML文档的一个APIDOM描绘了一个层次化的节点树，允许开发人员添加，移除和修改页面的某一部分可以说，DOM是前端开发中最重要的一个渲染API，它决定了页面的样式结构的走向在浏览器中，document对象是HTMLDocument继承自Document类型的一个实例，表达整个HTML页面。

5、节点的类型 节点是有类型的，不同节点的类型不同，按照大小关系分类如下 文档节点 表示的是 整个html 元素节点 表示的是 html 中的 **标签 属性节点 表示的是 html标签 中的 **属性 文本节点 表示的是 html标签 中的内容 **文本 节点最终是要映射成为 js 对象。

6、节点与文本构成HTML 富文本由节点与文本组成节点可以是元素，文本则是这些元素中的内容Slatejs借鉴了这种构成方式，其富文本模型同样由节点和文本组成，节点可以包含文本和其他子节点节点类型与附加数据HTML定义了多种节点类型，如元素节点文本节点等，并通过 data* 属性为节点绑定额外。

7、div节点是HTML文档中的一个重要概念，表示文档中的一个块级元素以下是关于div节点的详细解释含义div节点可以理解成一个容器，用于在HTML文档中组织和包含其他元素功能页面布局开发人员通常使用div节点将页面划分为多个部分，以便更好地管理和控制页面的整体布局样式控制div节点提供了灵活的。

8、一定义 DOM元素是指构成网页文档如HTML或XML文档的基本单位在DOM中，文档被解析成一个由节点Node构成的树状结构，而DOM元素则是这种树状结构中的一部分，代表文档中的某个具体对象二常见节点类型 DOM元素中包含以下三种常见的节点类型元素节点元素节点是DOM树中的核心节点，代表HTML或。

9、1 文本节点的类型内容文本节点这是最常见的文本节点类型，包含在元素标签内的文本例如，在HTML元素ltpThis is a paragraphltp中，This is a paragraph就是一个内容文本节点注释节点虽然注释不是元素，但它们在文档中也以文本节点的形式存在注释节点通常用于在文档中提供额外的信息或。

html常用页面节点标签

1、8 注释节点Comment Node 文档中的注释，用于对代码进行解释，nodeType为89 文档节点Document Node 代表整个文档，是所有节点的根，nodeType为910 文档类型节点Document Type Node 描述文档的结构和内容类型，nodeType为10，但在现代HTML中很少见11 文档片段节点Document。

2、元素进行添加移动改变或移除的方法和属性，都是通过文档对象模型来获得的DOM根据 DOM，HTML 文档中的每个成分都是一个节点DOM 是这样规定的整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点。

3、DOM Tree是将HTML文档解析为树状结构的一种模型以下是DOM Tree的概要基本概念DOM是一种编程接口，它将HTML或XML文档解析为一个由节点组成的树状结构DOM Tree是通过DOM解析HTML页面生成的树状结构，每个节点代表文档的一部分节点类型元素节点代表HTML元素，如ltdivltspan等属性节点代表。

4、item 方法与数组索引具有相似的功能例如，0 和 0 会产生相同的结果，都是获取 body 元素的第一个子节点4 节点类型需要注意的是，childNodes 返回的子节点集合中包含HTML节点属性节点以及文本节点因此，在使用 item 方法获取节点。

5、DOM，按照W3C规范，是一种用于HTML和XML的API，它将整个页面映射为一个层次结构的节点集合，共分为三个级别1级DOM2级DOM和3级DOM1级DOM，即DOM1级，于1998年10月由DOM核心和DOM HTML模块构成DOM核心关注XML文档结构的映射，允许对文档任意部分进行获取和操作，而DOM HTML则扩展了核心，增加。