富文本编辑器开发系列——Range API 探究

基本属性

为了方便观察range的基本属性，我们写以下测试代码：

在线测试

我们选中一段文本，然后看页面的输出和控制台的输出。

我们观察到它的几个属性：

• collapsed: 是否闭合，即当前选区是否是一个光标，只有开始节点与结束节点相同，并且开始偏移量与结束偏移量相同时才是true，此处未闭合，所以是false。
• commonAncestorContainer：返回包含开始节点与结束节点的最深一级的节点（根节点），此处是设置了onclick属性的div节点，注意，这里最深一级是指可编辑区域所包含的节点中的最深一级（并且不包含设置了contenteditable属性为true的节点本身。）
• endContainer: 结束节点，拖蓝结束点所在的DOM 节点，此处是多行文本所在的文本节点，注意，是文本节点，而不是包含它的p 节点。
• endOffset : 结束偏移量，即从结束节点的开始位置数起，到拖蓝结束位置所经过的字数。如果结束节点是一个包含子元素的DOM元素，则代表从该节点的第一个节点到拖蓝结束位置所在的节点所经过的节点数。
• startContainer：开始节点，拖蓝的起点所在的DOM节点，此处是id为first的p节点所包裹的文本节点，但又不包含其中id为third的span节点。
• startOffset：开始偏移量，即从开始节点的开始位置数起，到拖蓝开始位置所经过的字数。如果开始节点是一个包含子元素的DOM元素，则代表从该节点第一个节点到拖蓝开始位置所在的节点所经过的节点数。

对于startContainer 中的情况，我们可以再做一个实验来验证：

可以看到，这里开始节点是这里是另一段普通的 文本节点，而结束节点是文字内容啊 文本节点，虽然它们都在同一p节点中，但因为有span 节点的分割，它俩分别是独立的文本节点了。

成员方法

setStart(startNode, startOffset)

设置拖蓝的起点,startNode：开始节点，startOffset: 起点相对于开始节点开始位置的偏移量

setEnd(endNode, endOffset)

设置拖蓝的终点，endNode:结束节点， endOffset: 终点相对于结束节点开始位置的偏移量。

setStartBefore(referenceNode)

相对于另一个节点来设置拖蓝的开始位置，该拖蓝的开始节点与另一个节点的父节点是同一个，开始节点在另一个节点之前

setStartAfter(referenceNode)

相对于另一个节点来设置拖蓝的开始位置，该拖蓝的开始节点与另一个节点的父节点是同一个，开始节点在另一个节点之后.

setEndBefore(referenceNode)

相对于另一个节点来设置拖蓝的结束位置，该拖蓝的结束节点与另一个节点的父节点是同一个，结束节点在另一个节点之前.

在线测试

setEndAfter(referenceNode)

相对于另一个节点来设置拖蓝的结束位置，该拖蓝的结束节点与另一个节点的父节点是同一个，结束节点在另一个节点之后.

seelctNode(referenceNode)

将拖蓝设置为包含整个节点及其内容， 拖蓝的起始和结束节点的父节点与传入节点（referenceNode）的父节点相同。

selectNodeContents(referenceNode)

设置拖蓝，使其包含传入节点的内容，拖蓝的起始和结束节点的父节点即为传入的节点。

collapse(toStart)

闭合拖蓝。toStart: 闭合方向，true向起点闭合，false向终点闭合。

cloneContents()

返回包含拖蓝中所有节点的文档片段

deleteContents()

从文档中移除拖蓝包含的内容

extractContents()

把拖蓝的内容从文档树移动到一个文档片段中，返回该文档片段

insertNode(newNode)

在拖蓝的起始位置插入一个新的节点，如果将新节点添加到一个文本节点，则该文本节点在插入点处被拆分，插入发生在两个文本节点之间；如果新节点是一个文档片段，则插入文档片段的子节点。

surroundContents(newParent)

将拖蓝的内容移动到一个新的节点，并将新节点放到这个范围的起始处。它会从DOM中删除新节点内容。

compareBoundaryPoints(how, sourceRange)

比较两个拖蓝的端点。 how：指定如何比较，参见本表下方how部分。sourceRange : 要与之比较的拖蓝，返回一个数字，-1/0/1中的一个，表示本拖蓝的指定端点在源拖蓝的指定端点前面，相同位置还是后面。

how

指定如何比较，有四个可选值：

• Range.END_TO_END: 比较源拖蓝的终点与本拖蓝的终点
• Range.END_TO_START: 比较源拖蓝的终点与本拖蓝的起点
• Range.START_TO_END: 比较源拖蓝的起点与本拖蓝的终点
• Range.START_TO_START: 比较源拖蓝的起点与本拖蓝的起点