Range#
Range.setStart()#
Metoda setStart() ustawia początek w danym zakresie (czyli jego węzeł początkowy i przesunięcie początkowe) zgodnie z przekazanymi argumentami.
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
range.setStart(node, offset);gdzie poszczególne człony oznaczają:
- range - zakres będący obiektem kontekstu.
- node - referencja do węzła początkowego.
- offset - liczba całkowita reprezentująca przesunięcie początkowe.
Algorytm wywołania metody setStart(node, offset) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Ustaw początek w obiekcie kontekstu na punkt graniczny
(node, offset).
Do metody setStart() nie można przekazywać węzłów typu DocumentType lub przesunięcia większego od długości w przekazanym węźle, bo zrzucony zostanie konkretny błąd. Jeśli przekazany węzeł znajduje się za węzłem końcowym lub mają one różne korzenie to zakres ulegnie zwinięciu do przekazanego węzła.
Punkty graniczne w zakresach można ustawiać na wiele różnych sposobów.
Prosty przykład:
<script>
// Tworzymy nowy zakres
var range = document.createRange();
document.write(range.startContainer); // [object HTMLDocument]
document.write("<br>");
document.write(range.startOffset); // 0
document.write("<br>");
document.write(range.endContainer); // [object HTMLDocument]
document.write("<br>");
document.write(range.endOffset); // 0
document.write("<br><br>");
// Zmieniamy początek zakresu (węzeł początkowy HTML jest za węzłem końcowym Document)
range.setStart(document.documentElement, 1);
document.write(range.startContainer); // [object HTMLHtmlElement]
document.write("<br>");
document.write(range.startOffset); // 1
document.write("<br>");
document.write(range.endContainer); // [object HTMLHtmlElement]
document.write("<br>");
document.write(range.endOffset); // 1
document.write("<br><br>");
document.write(range.collapsed); // true
document.write("<br><br>");
try{ // Ustawiamy początek w zakresie na węzeł typu DocumentType
range.setStart(document.implementation.createDocumentType("a", "", ""), 0);
}
catch(e){
document.write("Przekazanie do metody setStart() węzła typu DocumentType zrzuca błąd:" + "<br>");
document.write(e); // opis zależny od przeglądarki
document.write("<br>");
document.write(e.constructor); // function DOMException() { [native code] }
}
</script>Kolejny prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
function deleteChar(char){
var info = document.getElementById("info");
var root = document.getElementById("box");
var text = root.firstChild; // węzeł tekstowy wewnątrz kontenera DIV
// Kiedy możliwe jest usunięcie znaku o danym indeksie
if (text.data.length > char){
var range = document.createRange();
range.setStart (text, char);
range.setEnd (text, char + 1);
var result = "range.startContainer: " + range.startContainer
+ "<br>" + "range.startOffset: " + range.startOffset
+ "<br><br>" + "range.endContainer: " + range.endContainer
+ "<br>" + "range.endOffset: " + range.endOffset
+ "<br><br>" + "range.startContainer.data: " + range.startContainer.data
info.innerHTML = result;
range.deleteContents(); // usuwamy aktualną zawartość zakresu
}
}
</script>
</head>
<body>
<div id="box" style="color: red">Krótki tekst w kontenerze DIV</div>
<p>Kliknij przycisk by usunąć znak o konkretnej pozycji w kontenerze DIV za pomocą zakresu.</p>
<input type="button" value="deleteChar(0)" onclick="deleteChar(0)">
<input type="button" value="deleteChar(1)" onclick="deleteChar(1)">
<input type="button" value="deleteChar(2)" onclick="deleteChar(2)">
<p style="color: blue;">Szczegółowe informacje dla zakresu:</p>
<p id="info"></p>
</body>
</html>Składnia Web IDL#
interface Range { void setStart(Node node, unsigned long offset); }