# Range

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

# Range 对象获取方法

  1. 通过 document.createRange 方法来创建
const range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

注意:一旦一个 Range 对象被建立,在使用它的大多数方法之前需要去设置他的临界点。

  1. 通过 Selection.getRangeAt() 方法获取

这个方法是返回一个包含当前选区内容的区域对象。它是先有了文字内容选区 Selection,然后才有了 Range 对象。

const SelectonObj = window.getSelection();
const range = SelectionObj.getRangeAt(index);

参数说明

  • range 返回的 range 对象

  • index 指定想要获取的子集编号(从 0 开始计数),如果该值大于或等于 rangeCount,将抛出错误。

  1. Range() 构造函数获取

构造函数 Range() 返回一个新创建的 Range 对象,新创建的对象属于全局 Document 对象。

const range = new Range();

来看一个例子:

// html 部分
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
<p>Fourth paragraph.</p>


// js 部分
const paragraphs = document.querySelectorAll("p");

// 创建 Range 对象
const range = new Range();

// Range 起始位置在段落 2
range.setStartBefore(paragraphs[1]);

// Range 结束位置在段落 3
range.setEndAfter(paragraphs[2]);

// 获取 selection 对象
const selection = window.getSelection();

// 添加光标选择的范围
selection.addRange(range);

以上逻辑得到结果如下:

An Image