Range.setStartBefore() — Methode · JavaScript-Referenz

Signatur

Range.prototype.setStartBefore(referenceNode)

Beschreibung

setStartBefore() legt den Anfang eines Range direkt vor einen Referenzknoten. Intern entspricht der Aufruf range.setStart(node.parentNode, indexVon(node)). Der Startcontainer ist also der Elternknoten von referenceNode, der Offset ist die Position des Knotens unter den Geschwistern (childNodes).

Die Methode ist praktisch, wenn ein Bereich an Knotengrenzen beginnen soll, etwa um ein ganzes Element samt Tags in eine Auswahl aufzunehmen, Inhalte vor einem Element einzufügen oder einen Abschnitt „ab diesem Element“ zu extrahieren oder zu löschen. Anders als bei setStart() musst du dich nicht selbst um die Offset-Berechnung kümmern.

Liegt der neue Startpunkt hinter dem aktuellen Endpunkt des Range (oder in einem anderen Dokument bzw. Baum), wird der Range zusammengeklappt: Das Ende wird ebenfalls auf den neuen Startpunkt gesetzt (collapsed === true). Gegenstück für das Ende sind setEndBefore() und setEndAfter(); für den Start direkt nach einem Knoten gibt es setStartAfter().

Parameter

Name	Typ	Default	Beschreibung
$referenceNode Pflicht	Node		Der Knoten, vor dem der Range beginnen soll. Er muss einen Elternknoten besitzen (`parentNode !== null`).

Beispiele

Ganzes Element inklusive Tags auswählen

// <p id="text">Hallo <strong id="wichtig">Welt</strong>!</p>
const strong = document.getElementById('wichtig');
const range = document.createRange();

range.setStartBefore(strong);
range.setEndAfter(strong);

console.log(range.startContainer.id, range.startOffset);
console.log(range.toString());

// Als sichtbare Auswahl übernehmen
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

text 1 Welt

Alle Inhalte ab einem Element bis zum Listenende entfernen

// <ul id="liste"><li>A</li><li>B</li><li id="ab">C</li><li>D</li></ul>
const liste = document.getElementById('liste');
const ab = document.getElementById('ab');

const range = document.createRange();
range.setStartBefore(ab);
range.setEnd(liste, liste.childNodes.length);

const entfernt = range.extractContents(); // DocumentFragment
console.log(entfernt.childNodes.length);
console.log(liste.textContent);

2 AB

Knoten vor einem Element einfügen

const ziel = document.querySelector('h2');
const range = document.createRange();
range.setStartBefore(ziel);
range.collapse(true); // Einfügepunkt direkt vor <h2>

const hinweis = document.createElement('p');
hinweis.textContent = 'Neuer Abschnitt folgt:';
range.insertNode(hinweis);

console.log(ziel.previousSibling === hinweis);

true

Automatisches Zusammenklappen bei Start hinter dem Ende

// <div id="box"><span id="a">A</span><span id="b">B</span></div>
const range = document.createRange();
range.setStartBefore(document.getElementById('a'));
range.setEndAfter(document.getElementById('a'));

// Start hinter das aktuelle Ende verschieben
range.setStartBefore(document.getElementById('b'));
console.log(range.collapsed, range.startOffset, range.endOffset);

true 1 1

// Wichtig · Fallstricke

Kein Elternknoten: Hat referenceNode keinen parentNode (z. B. ein losgelöstes Element oder das document selbst), wirft die Methode eine DOMException vom Typ InvalidNodeTypeError.
Container ist der Elternknoten: Nach dem Aufruf ist startContainer nicht referenceNode, sondern dessen Elternknoten. Das überrascht oft beim Auswerten von startContainer/startOffset.
Offsets gelten für childNodes: Auch Text- und Kommentarknoten (z. B. Leerzeichen zwischen Tags) zählen beim Index mit, nicht nur Elemente.
Automatisches Zusammenklappen: Liegt der neue Start hinter dem Ende, wird der Range kommentarlos auf den Startpunkt zusammengeklappt. Setze daher bei Bedarf zuerst den Start, dann das Ende.
Live-Verhalten: Ein Range passt sich an spätere DOM-Änderungen an. Wird der Referenzknoten entfernt, verschiebt sich der Startpunkt entsprechend.
Kompatibilität: Wird seit vielen Jahren von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Für unveränderliche Bereiche ohne Live-Aktualisierung gibt es StaticRange.

Siehe auch

Range Range.setStartAfter() Range.setEndBefore() Range.setEndAfter() Range.setStart() Range.selectNode() Document.createRange() Selection.addRange()