来聊聊 DOM 中的Node、Element、Text

Node

Node 是整个 DOM 的主要数据类型。

常见的 NodeType ：

• 1 – ELEMENT_NODE 表示 element 元素
• 2 – ATTRIBUTE_NODE 表示属性
• 3 – TEXT_NODE 表示元素或属性中的文本内容
• 4 – CDATA_SECTION_NODE 表示文档中的 CDATA 区段（文本不会被解析器解析）
• 8 – COMENT_NODE 表示注释
• 9 – DOCUMENT_NODE 表示整个文档（DOM 树的根节点）
• 11 – DOCUMENT_FRAGMENT_NODE 表示轻量级的 Document 对象

1所表示的ELEMENT_NODE 很常见，我们平时用的 div 等标签，其类型都是 ELEMENT_NODE。

3有一个很经典的案例，在旧版的 React 中，如果一段文本模板存在变量，你会发现最终输出的字符串，在可变部分是被套了一层 span 标签的。但新版的 React 不需要了，这是因为新版 React 把每一个可变的文本，单独用一个TEXT_NODE 来存放。这里果真记错了，React v15是改用 COMENT_NODE 来包裹连续文本中的可变文本。为什么要包裹而不直接保留一份 TextNode 的引用呢？React v15 CHANGELOG

11也有一个经典案例，Vue.js 的1.x 版本就是使用的 documentFragment 来做 virtualDOM。documentFragment 支持完整的 DOM 操作，但由于本身不在文档流中，频繁操作不会导致浏览器频繁执行 parseHTML。

Element

这个没什么好说的，平常用得最多的了。

我们平常习惯在 jQuery 选择器后面加索引，操作的就是元素节点。

JavaScript

$('.item')[0]

Text

Text 节点表示 HTML 或者 XML 文档中的一系列纯文本。

Text 节点没有子节点，不可再分。

那怕是简单的 Element 节点，其文案内容，都是在 Text 节点上。

结语

富文本编辑器真是前端界里面的深坑，后续还有 Range 和 Selection 相关内容。

参考

• https://www.w3.org/DOM/DOMTR
• https://www.w3.org/TR/DOM-Level-3-Core/core.html