AbstractRange

抽象范围(AbstractRange)抽象接口是定义所有 DOM 范围类型的基类。区域是一个对象，它指示文档中某一部分内容的起点和终点。

用法解释

范围类型

文档中的所有内容范围都使用基于 的接口实例进行描述。有两个这样的接口：

Range

该接口已经存在了很长时间，直到最近才被重新定义，以基于定义其他形式的范围数据的需要。 提供了允许您更改区域终结点的方法，以及比较区域、检测区域之间的交集等方法。RangeAbstractRangeRange

StaticRange

A 是一个基本范围，一旦创建就无法更改。具体来说，当节点树发生变异和变化时，范围不会发生变异和变化。当您需要指定仅使用一次的范围时，这很有用，因为它避免了更复杂的 Range 接口对性能和资源的影响。StaticRange

用例

考虑一下这个简单的 HTML 片段。

<p><strong>This</strong> is a paragraph.</p>

想象一下，使用Range从中提取单词“段落”。执行此操作的代码如下所示：

let paraNode = document.querySelector("p");
let paraTextNode = paraNode.childNodes[1];

let range = document.createRange();
range.setStart(paraTextNode, 6);
range.setEnd(paraTextNode, paraTextNode.length-1);

let fragment = range.cloneContents();
document.body.appendChild(fragment);

首先，我们获取对段落节点本身以及段落中第二个子节点的引用。第一个子元素是<强>元素。第二个子节点是文本节点“是一个段落”。

有了文本节点引用，我们通过在自身上调用 createRange（） 来创建一个新对象。我们将范围的起始位置设置为文本节点字符串的第六个字符，并将结束位置设置为文本节点字符串的长度减去 1。这会将范围设置为包含单词“段落”。RangeDocument

然后，我们通过在 上调用 cloneContents（） 来创建一个新的 DocumentFragment 对象，该对象包含该范围所包含的文档部分。之后，我们使用 appendChild（） 将该片段添加到文档正文的末尾，就像从 document.body 获得的那样。Range

结果如下所示：

This is a paragraph.

paragraph