Range.setStart()

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

Range.setStart() method sets the start position of a 范围 .

若 startNode 是 节点 类型 文本 , 注释 ，或 CDataSection ，那么 startOffset is the number of characters from the start of startNode . For other 节点 类型， startOffset is the number of child nodes between the start of the startNode .

Setting the start point below (lower in the document) the end point will result in a collapsed range with the start and end points both set to the specified start position.

句法

range.setStart(startNode, startOffset);

参数

startNode: 节点 在哪里 范围 should start.
startOffset: An integer greater than or equal to zero representing the offset for the start of the 范围 from the start of startNode .

范例

Highlight part of an element

此范例使用 Range.setStart() and Range.setEnd() methods to add part of an address to a range. The selected range is then highlighted using Range.surroundContents() .

The address contains nine nodes: five text nodes, and four <br> 元素。

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);

结果

Get characters from a text node

此范例使用 Range.setStart() and Range.setEnd() methods to define the contents of a range. The resulting range contains the first through fifth characters within a text node.

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 The definition of 'Range.setStart()' in that specification.	实时标准	无变化。
Document Object Model (DOM) Level 2 Traversal and Range Specification The definition of 'Range.setStart()' in that specification.	过时	最初的规范。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`setStart`	Chrome Yes	Edge 12	Firefox 4	IE 9	Opera 9	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持

另请参阅

The DOM interfaces index

元数据

最后修改： Aug 21, 2019

在此页

句法

参数

范例

Highlight part of an element

HTML

JavaScript

结果

Get characters from a text node

HTML

JavaScript

结果

规范

浏览器兼容性

图例

另请参阅

相关话题