Os nossos voluntários ainda não traduziram este artigo para Português (Europeu). Junte-se a nós e ajude-nos a fazer o trabalho!
Pode também ler o artigo em English (US).

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

If the startNode is a Node of type Text, Comment, or CDataSection, then startOffset is the number of characters from the start of startNode. For other Node types, 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.

Syntax

range.setStart(startNode, startOffset);

Parameters

startNode
The Node where the Range should start.
startOffset
An integer greater than or equal to zero representing the offset for the start of the Range from the start of startNode.

Examples

Highlight part of an element

This example uses the 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> elements.

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

Result

Get characters from a text node

This example uses the 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;

Result

Specifications

Specification Status Comment
DOM
The definition of 'Range.setStart()' in that specification.
Living Standard No change.
Document Object Model (DOM) Level 2 Traversal and Range Specification
The definition of 'Range.setStart()' in that specification.
Obsolete Initial specification.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
setStartChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also

Etiquetas do documento e contribuidores

Etiquetas: 
Última atualização por: mfluehr,