AbstractRange - 所有 DOM 范围类型的基础类

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

作为抽象接口，您将不会直接实例化 AbstractRange 类型。相反，您将使用 Range 或 StaticRange 接口。要了解这两个接口之间的差异，以及如何选择适合您需求的接口。

属性

collapsed 只读

一个布尔值，如果范围是折叠的，则为 true。折叠范围是指其起始位置和结束位置相同的范围，导致范围长度为零字符。

endContainer 只读

由 endOffset 属性指定的范围终点所在的 DOM Node。

endOffset 只读

一个整数值，指示从节点内容的开头到范围对象表示的范围的开头的偏移量（以字符为单位）。这个值必须小于 endContainer 节点的长度。

startContainer 只读

由 startOffset 属性指定的范围起点所在的 DOM Node。

startOffset 只读

一个整数值，指示从节点的内容的开头以字符为偏移量的值到范围对象所引用的内容的最后一个字符。该值必须小于 startContainer 中指示的节点的长度。

方法

AbstractRange 接口不提供任何方法。

使用注意

范围类型

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

Range

Range 接口已经存在了很长时间，直到最近才需要重新定义它基于 AbstractRange，因为需要定义其他形式的范围数据。Range 提供允许您更改范围端点的方法，以及比较范围，检测范围之间的相交等的方法。

StaticRange

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

元素内容

尝试访问元素的内容时，请记住，元素本身是一个节点，其中的任何文本也是如此。为了在元素的文本内设置范围终点，请确保在元素内找到文本节点：

let startElem = document.querySelector("p");
let endElem = startElem.querySelector("span");
let range = document.createRange();

range.setStart(startElem, 0);
range.setEnd(endElem, endElem.childNodes[0].length/2);
let contents = range.cloneContents();

document.body.appendChild(contents);

本实例创建一个新范围 rng ，并将其起点设置为类为 elementclass 的第一个元素的第三个子节点。终点设置为范围的第一个子项的中间，然后使用范围复制范围的内容。

实例

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

<p><strong>这</strong>是一个段落。</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);

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

有了文本节点引用，我们通过在 Document 本身上调用 createRange() 来创建一个新的 Range 对象。我们将范围的开始位置设置为文本节点字符串的第 3 个字符，将结束位置设置为文本节点字符串的长度减一。这时，范围将包含 “段落” 一词。

然后，我们通过在 Range 上调用 cloneContents() 创建一个新的 DocumentFragment 对象，其中包含该范围所涵盖的文档。之后，我们使用 appendChild() 将该片段添加到从 document.body 获得的文档正文末尾。

结果看起来像这样：

<p><strong>这</strong>是一个段落。</p>

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

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

let fragment = range.cloneContents();
document.body.appendChild(fragment);
</script>

尝试一下 »

规范

规范	状态	备注
DOM AbstractRange 的定义	现行的标准	-

桌面浏览器兼容性

移动浏览器兼容性