Range#

Range.deleteContents()#

Metoda deleteContents() usuwa z drzewa węzłów całą zawartość danego zakresu.

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

gdzie poszczególne człony oznaczają:

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

  1. Jeśli początek i koniec w obiekcie kontekstu są tacy sami, to pomiń kolejne kroki.
  2. Niech original start node, original start offset, original end node i original end offset będą odpowiednio węzłem początkowym, przesunięciem początkowym, węzłem końcowym i przesunięciem końcowym w obiekcie kontekstu.
  3. Jeśli original start node i original end node są tacy sami, i są węzłami typu Text, ProcessingInstruction lub Comment, to zastąp dane tekstowe z węzłem original start node, początkiem original start offset, licznikiem w postaci original end offset minus original start offset, danymi tekstowymi w postaci pustego łańcucha znakowego, i pomiń kolejne kroki.
  4. Niech nodes to remove będzie listą ze wszystkimi węzłami, które są zawarte w obiekcie kontekstu, zgodnie z porządkiem drzewa, z pominięciem każdego węzła, którego rodzic jest także zawarty w obiekcie kontekstu.
  5. Jeśli original start node jest przodkiem obejmującym dla original end node, to ustaw new node na original start node i new offset na original start offset.

  6. W przeciwnym razie wykonaj poniższe podkroki:

    1. Niech reference node będzie referencją do original start node.
    2. Dopóki (while) rodzic w reference node nie ma wartości null i nie jest przodkiem obejmującym dla original end node, to ustaw reference node na jego własnego rodzica.

    3. Ustaw new node na rodzica w reference node i new offset na jeden plus indeks w reference node.

      Jeśli rodzicem w reference node byłaby wartość null, to byłby on korzeniem dla obiektu kontekstu, więc byłby przodkiem obejmującym dla original end node, i moglibyśmy nie osiągnąć tego punktu.

  7. Jeśli original start node jest węzłem typu Text, ProcessingInstruction lub Comment, to zastąp dane tekstowe z węzłem original start node, początkiem original start offset, licznikiem w postaci długości w original start node minus original end offset i danymi tekstowymi w postaci pustego łańcucha znakowego.
  8. Dla każdego (for each) węzła node w nodes to remove, zgodnie z porządkiem drzewa, usuń node z jego rodzica.
  9. Jeśli original end node jest węzłem typu Text, ProcessingInstruction lub Comment, to zastąp dane tekstowe z węzłem original end node, początkiem 0, licznikiem original end offset i danymi tekstowymi w postaci pustego łańcucha znakowego.
  10. Ustaw początek i koniec w obiekcie kontekstu na (new node, new offset).

Po usunięciu zawartości z zakresu metodą deleteContents() nastąpi automatyczne skorygowanie jego punktów granicznych (zakres zawsze zostanie zwinięty), tak żeby wszystko pasowało do nowej sytuacji. Teoretyczny opis tego procesu omówiłem w podstawach zakresów.

Metoda deleteContents() nie zwraca referencji do usuwanej zawartości. Jeśli usuwana zawartość będzie wykorzystywana w późniejszym czasie to najlepiej zastosować metodę Range.extractContents().

Prosty przykład:

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

	var box = document.createElement("div");
	box.textContent = "Węzeł tekstowy w kontenerze DIV.";

	document.write(box.textContent); // Węzeł tekstowy w kontenerze DIV.

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

	// Ustawiamy zakres na słowo "tekstowy" w węźle tekstowym kontenera DIV
	range.setStart(box.firstChild, 6);
	range.setEnd(box.firstChild, 14);

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

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

	document.write(box.textContent); // Węzeł w kontenerze DIV.

</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 deleteContents();
}

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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