Range#

Range.setEnd()#

Metoda setEnd() ustawia koniec w danym zakresie (czyli jego węzeł końcowy i przesunięcie końcowe) zgodnie z przekazanymi argumentami.

Opis działania#

Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
range.setEnd(node, offset);

gdzie poszczególne człony oznaczają:

Algorytm wywołania metody setEnd(node, offset) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:

  1. Ustaw koniec w obiekcie kontekstu na punkt graniczny (node, offset).

Do metody setEnd() 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ę przed węzłem początkowym 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:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<script>

	// Tworzymy nowy zakres
	var range = document.createRange();

	// Zmieniamy początek i koniec zakresu
	range.setStart(document.documentElement, 1);
	range.setEnd(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>");

	// Zmieniamy koniec zakresu (węzeł końcowy Document jest przed węzłem początkowym HTML)
	range.setEnd(document, 0);

	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>");
	document.write(range.collapsed); // true
	document.write("<br><br>");

	try{ // Ustawiamy koniec w zakresie na węzeł typu DocumentType
		range.setEnd(document.implementation.createDocumentType("a", "", ""), 0);
	}
	catch(e){
		document.write("Przekazanie do metody setEnd() 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:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<!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#

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
interface Range {
	void setEnd(Node node, unsigned long offset);
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Range (H1) Range.setEnd() (H2) Opis działania (H3) Składnia Web IDL (H3) Specyfikacje i inne materiały (H3)