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.
setStart(startNode, startOffset)
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");
address.childNodes.forEach((node) => {
const li = document.createElement("li");
li.textContent = `${node.nodeName}, ${node.nodeValue}`;
log.appendChild(li);
});
const startOffset = 2;
const endOffset = 5;
const range = document.createRange();
range.setStart(address, startOffset);
range.setEnd(address, endOffset);
const mark = document.createElement("mark");
range.surroundContents(mark);
Result
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);
range.setEnd(textNode, 5);
document.getElementById("log").textContent = range;
Result