Document#

Document.createDocumentFragment()#

Metoda createDocumentFragment() tworzy nowy węzeł typu DocumentFragment (tzw. fragment dokumentu), którego właścicielem jest dany dokument.

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. #
var new_fragment = document.createDocumentFragment();

gdzie poszczególne człony oznaczają:

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

  1. Zwróć nowy węzeł typu DocumentFragment z właścicielem będącym obiektem kontekstu.

Nowy fragment dokumentu zwracany przez metodę createDocumentFragment() lub podobnie działający konstruktor new DocumentFragment() nie jest częścią danego drzewa dokumentu dopóki nie zostanie dodany do innego węzła należącego do drzewa dokumentu. Dlatego nowy fragment dokumentu nie będzie posiadał rodzica (wartość null), aczkolwiek dalej posiada jakiegoś właściciela.

Obiekt zwracany przez metodę createDocumentFragment() implementuje interfejs DocumentFragment, dlatego ma dostęp do wszystkich poleceń z tego interfejsu (oraz z kolejnych interfejsów w łańcuchu dziedziczenia).

Więcej szczegółów związanych z fragmentami dokumentów umieściłem w zbiorczym dziale "Podstawy - Rodzaje dokumentów".

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 addElement(variant){

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

			 // Metoda createDocumentFragment()
			if (variant == "fragment"){

				var root = document.createDocumentFragment();
				var newP1 = document.createElement("p");
				newP1.textContent = "Pierwszy akapit ze sposobu createDocumentFragment().";
				var newP2 = document.createElement("p");
				newP2.textContent = "Drugi akapit ze sposobu createDocumentFragment().";

				root.appendChild(newP1);
				root.appendChild(newP2);

				info.innerHTML = "Nazwa interfejsu korzenia: " + root
					+ "<br>" + "Ilość dzieci w korzeniu: " + root.childNodes.length
					+ "<br>" + "Nazwa interfejsu pierwszego dziecka: " + root.firstChild;

				document.body.appendChild(root);

			}

			// Metoda createElement('')
			if (variant == "element"){

				var root = document.createElement("div");
				var newP1 = document.createElement("p");
				newP1.textContent = "Pierwszy akapit ze sposobu createElement('').";
				var newP2 = document.createElement("p");
				newP2.textContent = "Drugi akapit ze sposobu createElement('').";

				root.appendChild(newP1);
				root.appendChild(newP2);

				info.innerHTML = "Nazwa interfejsu korzenia: " + root
					+ "<br>" + "Ilość dzieci w korzeniu: " + root.childNodes.length
					+ "<br>" + "Nazwa interfejsu pierwszego dziecka: " + root.firstChild;

				document.body.innerHTML += root.innerHTML;

			}

		}

	</script>

</head>

<body>
	<p>Kliknij konkretny przycisk by utworzyć i dodać dwa nowe akapity do dokumentu różnymi sposobami.</p>
	<input type="button" value="createDocumentFragment('')" onclick="addElement('fragment')">
	<input type="button" value="createElement('')" onclick="addElement('element')">

	<p style="color: blue;">Szczegółowe informacje o sposobie:</p>
	<p id="info"></p>
	<p style="color: blue;">Nowe akapity dodane do dokumentu:</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 Document : Node {
	[NewObject] DocumentFragment createDocumentFragment();
};

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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