Range#

Range.selectNode()#

Metoda selectNode() ustawia dany zakres na przekazany węzeł i całą jego zawartość.

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

gdzie poszczególne człony oznaczają:

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

  1. Wybierz node w obiekcie kontekstu.

Do metody selectNode() nie można przekazywać węzłów, których rodzicem jest wartość null, bo zrzucony zostanie błąd. Jeśli zależy nam na ustawieniu zakresu jedynie na zawartość przekazanego węzła to najlepiej skorzystać z dedykowanej metody Range.selectNodeContents().

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 węzeł HTML i całą jego zawartość
	range.selectNode(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 zakres na węzeł Document i całą jego zawartość
		range.selectNode(document);
	}
	catch(e){
		document.write("Przekazanie do metody selectNode() 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 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 selectNode(Node node);
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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