来聊聊 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 选择器后面加索引,操作的就是元素节点。

Text

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

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

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

结语

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

参考

发表评论

电子邮件地址不会被公开。 必填项已用*标注