Range#

Range.setStartAfter()#

Metoda setStartAfter() ustawia początek w danym zakresie (czyli jego węzeł początkowy i przesunięcie początkowe) 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.setStartAfter(node);

gdzie poszczególne człony oznaczają:

Algorytm wywołania metody setStartAfter(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 początek w obiekcie kontekstu na punkt graniczny (parent, indeks w node plus jeden).

Do metody setStartAfter() 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 początkowym w zakresie zawsze zostanie rodzic przekazanego węzła natomiast przesunięcie początkowe 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 początek zakresu za węzeł HTML
	range.setStartAfter(document.documentElement);

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

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

	try{ // Ustawiamy początek zakresu za węzeł Document
		range.setStartAfter(document);
	}
	catch(e){
		document.write("Przekazanie do metody setStartAfter() 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 deleteInternalRows(){

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

			// Kiedy możliwe jest usunięcie wewnętrznych wierszy
			if (table.rows.length > 1){

				var firstRow = table.rows[0];
				var lastRow = table.rows[table.rows.length - 1];

				var range = document.createRange();

				range.setStartAfter(firstRow);
				range.setEndBefore(lastRow);

				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</td></tr>
		<tr><td>Drugi wiersz</td></tr>
		<tr><td>Trzeci wiersz</td></tr>
		<tr><td>Czwarty wiersz</td></tr>
	</table>

	<p>Kliknij przycisk by usunąć wewnętrzne wiersze w tabeli za pomocą zakresu.</p>
	<input type="button" value="deleteInternalRows()" onclick="deleteInternalRows()">
	<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 setStartAfter(Node node);
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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