Range: setStart() method
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
setStart(startNode, startOffset)
Parameters
startNode
startOffset
-
An integer greater than or equal to zero representing the offset for the start of the
Range
from the start ofstartNode
.
Return value
None (undefined
).
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 |
---|
DOM Standard # dom-range-setstart |
Browser compatibility
BCD tables only load in the browser