Range#

Range.selectNodeContents()#

Metoda selectNodeContents() ustawia dany zakres na zawartość przekazanego węzła.

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.selectNodeContents(node);

gdzie poszczególne człony oznaczają:

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

  1. Jeśli node jest węzłem typu DocumentType, to zrzuć wyjątek "InvalidNodeTypeError".
  2. Niech length będzie długością w node.
  3. Ustaw początek w obiekcie kontekstu na punkt graniczny (node, 0).
  4. Ustaw koniec w obiekcie kontekstu na punkt graniczny (node, length).

Do metody selectNodeContents() można przekazywać dowolny rodzaj węzłów (prócz DocumentType dla których zrzuca błąd). Jeśli zależy nam na ustawieniu zakresu na zawartość przekazanego węzła (włącznie z nim samym) to najlepiej skorzystać z dedykowanej metody Range.selectNode().

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();

	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>");

	// Ustawiamy zakres na zawartość węzła HTML
	range.selectNodeContents(document.documentElement);

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

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

	var newText = document.createTextNode("Jakiś węzeł tekstowy bez rodzica.");

	// Ustawiamy zakres na zawartość węzła newText
	range.selectNodeContents(newText);

	document.write(range.startContainer); // [object Text]
	document.write("<br>");
	document.write(range.startOffset); // 0
	document.write("<br>");
	document.write(range.endContainer); // [object Text]
	document.write("<br>");
	document.write(range.endOffset); // 32
	document.write("<br>");
	document.write(range); // Jakiś węzeł tekstowy bez rodzica.

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

	try{ // Ustawiamy zakres na węzeł typu DocumentType i całą jego zawartość
		range.selectNodeContents(document.implementation.createDocumentType("a", "", ""));
	}
	catch(e){
		document.write("Przekazanie do metody selectNodeContents() 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. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>

	<script>

		function deleteElement(onlyContent){

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

			var range = document.createRange();

			if (onlyContent){
				range.selectNodeContents(box);
			}
			else{
				range.selectNode(box);
			}

			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>

	<div id="box" style="background-color:#e0a0b0; width:300px; height:50px;"><b>Zawartość</b> w <i>kontenerze</i> DIV.</div>

	<p>Kliknij przycisk by usunąć tylko zawartość DIV lub cały DIV za pomocą zakresu.</p>
	<input type="button" value="Usuń zawartość elementu" onclick="deleteElement(true)">
	<input type="button" value="Usuń cały element" onclick="deleteElement(false)">
	<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 selectNodeContents(Node node);
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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