Range: setStart() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Die Range.setStart() Methode setzt die Startposition eines Range.

Wenn der startNode ein Node vom Typ Text, Comment oder CDataSection ist, dann ist startOffset die Anzahl der Zeichen vom Beginn des startNode. Für andere Node-Typen ist startOffset die Anzahl der Kindknoten vom Anfang des startNode.

Das Setzen des Startpunkts unterhalb (weiter im Dokument) des Endpunkts führt zu einem kollabierten Bereich, bei dem beide, Start- und Endpunkte, auf die angegebene Startposition gesetzt sind.

Syntax

js
setStart(startNode, startOffset)

Parameter

startNode

Der Node, bei dem der Range beginnen soll.

startOffset

Eine ganze Zahl größer oder gleich null, die den Versatz für den Beginn des Range vom Start des startNode darstellt.

Rückgabewert

Keiner (undefined).

Beispiele

Teil eines Elements hervorheben

Dieses Beispiel verwendet die Methoden Range.setStart() und Range.setEnd(), um einen Teil einer Adresse zu einem Bereich hinzuzufügen. Der ausgewählte Bereich wird dann mit Range.surroundContents() hervorgehoben.

Die Adresse enthält neun Knoten: fünf Textknoten und vier <br> Elemente.

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

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

Ergebnis

Zeichen aus einem Textknoten abrufen

Dieses Beispiel verwendet die Methoden Range.setStart() und Range.setEnd() um den Inhalt eines Bereichs zu definieren. Der resultierende Bereich enthält die ersten bis fünften Zeichen innerhalb eines Textknotens.

HTML

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

JavaScript

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

Ergebnis

Spezifikationen

Specification
DOM Standard
# dom-range-setstart

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch