Range#

Range.setEndAfter()#

Metoda setEndAfter() ustawia koniec w danym zakresie (czyli jego węzeł końcowy i przesunięcie końcowe) za przekazanym węzłem.

Opis działania#

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

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
range.setEndAfter(node);

gdzie poszczególne człony oznaczają:

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

  1. Niech parent będzie rodzicem w node.
  2. Jeśli parent ma wartość null, to zrzuć wyjątek "InvalidNodeTypeError".
  3. Ustaw koniec w obiekcie kontekstu na punkt graniczny (parent, indeks w node plus jeden).

Do metody setEndAfter() nie można przekazywać węzłów, których rodzicem jest węzeł typu DocumentType lub wartość null, bo zrzucony zostanie błąd. Węzłem końcowym w zakresie zawsze zostanie rodzic przekazanego węzła natomiast przesunięcie końcowe zostanie dopasowane względem jego indeksu.

Punkty graniczne w zakresach można ustawiać na wiele różnych sposobów.

Prosty przykład:

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

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

	// Zmieniamy początek i koniec zakresu
	range.setStart(document, 0);
	range.setEnd(document.documentElement, 1);

	document.write(range.startContainer); // [object HTMLDocument]
	document.write("<br>");
	document.write(range.startOffset); // 0
	document.write("<br>");
	document.write(range.endContainer); // [object HTMLHtmlElement]
	document.write("<br>");
	document.write(range.endOffset); // 1

	document.write("<br><br>");

	// Zmieniamy koniec zakresu za węzeł HTML
	range.setEndAfter(document.documentElement);

	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); // 1

	document.write("<br><br>");

	try{ // Ustawiamy koniec zakresu za węzeł Document
		range.setEndAfter(document);
	}
	catch(e){
		document.write("Przekazanie do metody setEndAfter() węzła bez rodzica 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. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>

	<script>

		function deleteFirstRow(){

			var info = document.getElementById("info");
			var table = document.getElementById("table");

			// Kiedy możliwe jest usunięcie pierwszego wiersza
			if (table.rows.length > 0){

				var firstRow = table.rows[0];

				var range = document.createRange();

				range.setStartBefore(firstRow);
				range.setEndAfter(firstRow);

				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.collapsed: " + range.collapsed;

				info.innerHTML = result;

				range.deleteContents(); // usuwamy aktualną zawartość zakresu

			}

		}

	</script>

</head>

<body>

	<table id="table" border="1">
		<tr>
			<td>Pierwszy wiersz, pierwsza kolumna</td>
			<td>Pierwszy wiersz, druga kolumna</td>
		</tr>
		<tr>
			<td>Drugi wiersz, pierwsza kolumna</td>
			<td>Drugi wiersz, druga kolumna</td>
		</tr>
	</table>

	<p>Kliknij przycisk by usunąć pierwszy wiersz w tabeli za pomocą zakresu.</p>
	<input type="button" value="deleteFirstRow()" onclick="deleteFirstRow()">
	<p style="color: blue;">Szczegółowe informacje dla zakresu:</p>
	<p id="info"></p>

</body>

</html>

Składnia Web IDL#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
interface Range {
	void setEndAfter(Node node);
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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