简述Range、节点关系

我们在讨论 Selection 时， 我们发现 Selection 所操作的是 ranges区域，我们下面就去探讨一下 ranges 到底是什么

Range 接口表示一个包含节点与文本节点的一部分的文档片段

相信一些同学对节点有些不了解，什么是节点那？ 节点类型又有哪些？ 又有什么作用？

节点

术语节点（Node）根据不同的上下文，可以是多种不同的意思。它可能是
节点（DOM）
在 DOM 的上下文中，节点（Node）是节点树中的单个点。包括文档本身、元素、文本以及注释都属于是节点。

节点（网络）
在网络中，节点是网络中的一个连接点。在物理网络中，节点通常是一个设备，如计算机或路由器。

我们目前只讨论 DOM 节点。可能有小伙伴们看到他的定义还是有些不理解，简单理解为我们看到的整个 HTML 文档就是由节点组成，每一个 div 、 注释、文本都是节点。Node 继承 EventTarget 属性。

以下接口都从 Node 继承其方法和属性:

1. Document
2. Element,
3. Attr,
4. CharacterData (which Text (en-US)
5. Comment, and CDATASection inherit)
6. ProcessingInstruction (en-US)
7. DocumentFragment, DocumentType

节点类型

常量	值	描述
Node.ELEMENT_NODE	1	一个 元素 节点，例如 和 。
Node.ATTRIBUTE_NODE	2	元素 的耦合 属性。
Node.TEXT_NODE	3	Element 或者 Attr 中实际的 文字 (en-US)。
Node.CDATA_SECTION_NODE	4	一个 CDATASection，例如 <!CDATA[[ … ]]>。
Node.PROCESSING_INSTRUCTION_NODE	7	一个用于 XML 文档的 ProcessingInstruction (en-US) ，例如 <?xml-stylesheet ... ?> 声明。
Node.COMMENT_NODE	8	一个 Comment 节点。
Node.DOCUMENT_NODE	9	一个 Document 节点。
Node.DOCUMENT_TYPE_NODE	10	描述文档类型的 DocumentType 节点。例如 就是用于 HTML5 的。
Node.DOCUMENT_FRAGMENT_NODE	11	一个 DocumentFragment 节点

以下的常量已被弃用且不再使用
Node.ENTITY_REFERENCE_NODE（5）、Node.ENTITY_NODE（6）和 Node.NOTATION_NODE（12）

EventTarget

EventTarget 接口由可以接收事件、并且可以创建侦听器的对象实现

Element 及其子项、document 和 window 是最常见的事件目标，但其他对象也可以是事件目标。比如 XMLHttpRequest、AudioNode 和 AudioContext 等等。

许多事件目标（包括 element、document 和 window）都支持通过 onevent 特性和属性设置事件处理程序 (en-US)。

• 方法
  • EventTarget.addEventListener()
    • 在 EventTarget 上注册特定事件类型的事件处理程序
  • EventTarget.removeEventListener()
    • EventTarget 中删除事件侦听器
  • EventTarget.dispatchEvent()
    • 将事件分派到此 EventTarge