范围：setStart() 方法

Range.setStart() 方法设置 Range 的起始位置。

如果 startNode 是类型为 Text、Comment 或 CDataSection 的 Node，那么 startOffset 是从 startNode 开始的字符数。对于其他 Node 类型，startOffset 是 startNode 开始到结束的子节点数。

设置起始点在终点下方（文档中更低）会导致折叠范围，起始点和终点都设置为指定的起始位置。

语法

setStart(startNode, startOffset)

参数

startNode: Node，Range 应从此处开始。
startOffset: 一个大于或等于零的整数，表示 Range 从 startNode 开始的偏移量。

返回值

无 (undefined).

示例

突出显示元素的一部分

此示例使用 Range.setStart() 和 Range.setEnd() 方法将地址的一部分添加到范围。然后使用 Range.surroundContents() 突出显示选定的范围。

地址包含九个节点：五个文本节点和四个 <br> 元素。

HTML

html

<p id="address">
  Wyatt Earp<br />
  101 E. Main St.<br />
  Dodge City, KS<br />
  67801<br />
  USA
</p>

<hr />
<p>Nodes in the original address:</p>
<ol id="log"></ol>

JavaScript

const address = document.getElementById("address");
const log = document.getElementById("log");

// Log info
address.childNodes.forEach((node) => {
  const li = document.createElement("li");
  li.textContent = `${node.nodeName}, ${node.nodeValue}`;
  log.appendChild(li);
});

// Highlight the street and city
const startOffset = 2; // Start at third node: 101 E. Main St.
const endOffset = 5; // End at fifth node: Dodge City, KS
const range = document.createRange();
range.setStart(address, startOffset);
range.setEnd(address, endOffset);

const mark = document.createElement("mark");
range.surroundContents(mark);

结果

从文本节点获取字符

此示例使用 Range.setStart() 和 Range.setEnd() 方法定义范围的内容。生成的范围包含文本节点中的第一个到第五个字符。

HTML

html

<p id="content">0123456789</p>
<p id="log"></p>

JavaScript

const element = document.getElementById("content");
const textNode = element.childNodes[0];
const range = document.createRange();
range.setStart(textNode, 0); // Start at first character
range.setEnd(textNode, 5); // End at fifth character
document.getElementById("log").textContent = range;

结果

规范

规范
DOM 标准 # dom-range-setstart

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

DOM 接口索引