HTML | DOM 输入范围对象

HTML DOM 输入范围对象(Document Object Model Range Object) 表示一个文档的一部分，可以是整个文档或文档的一个部分。它可以被用来表示一个文本范围、一个关键字范围、以及其它各种范围。

属性

• startContainer：范围的起始容器节点。
• startOffset：范围的起始偏移，表示 startContainer 内部的偏移位置。如果 startContainer 是一个文本节点，则它是从节点开头计算的字符位置； 如果它是一个元素节点，则它是子节点列表中的偏移位置。
• endContainer：范围的结束容器节点。
• endOffset：范围的结束偏移。如果 endContainer 是一个文本节点，则它是从节点开头计算的字符位置； 如果它是一个元素节点，则它是子节点列表中的偏移位置。
• collapsed: 范围是否是折叠状态，即是否选择了空文本。
• commonAncestorContainer: 返回起始容器与结束容器的最近公共祖先节点。

方法

• setStartBefore(node): 把范围的起点设置在指定节点之前。
• setStartAfter(node): 把范围的起点设置在指定节点之后。
• setEndBefore(node): 把范围的结束点设置在指定节点之前。
• setEndAfter(node): 把范围的结束点设置在指定节点之后。
• setStart(node, offset): 把范围的起点设置在指定节点内的指定位置。
• setEnd(node, offset): 把范围的结束点设置在指定节点内的指定位置。
• selectNode(node): 把范围设置为包含指定节点。
• selectNodeContents(node): 把范围设置为包含指定节点的所有子节点。

示例

const range = document.createRange();
const p = document.querySelector('p');
range.selectNode(p);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);