DocumentFragment#
new DocumentFragment()#
Interfejs DocumentFragment może być wywoływany w roli konstruktora, dzięki czemu pozwala na bezpośrednie tworzenie nowych fragmentów dokumentów wprost z interfejsu.
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
var new_fragment = new DocumentFragment();gdzie poszczególne człony oznaczają:
- new_fragment - referencja do nowego pustego fragmentu dokumentu.
Algorytm wywołania konstruktora new DocumentFragment()() nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Zwróć nowy węzeł typu
DocumentFragment, którego właścicielem jest dokument skojarzony z globalnym obiektem.
Nowy fragment dokumentu zwracany przez konstruktor new DocumentFragment() lub podobnie działającą metodę Document.createDocumentFragment() 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 konstruktor new DocumentFragment() implementuje interfejs DocumentFragment, dlatego ma dostęp do wszystkich poleceń z tego interfejsu (oraz z kolejnych interfejsów w łańcuchu dziedziczenia).
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
function addElement(variant){
var info = document.getElementById("info");
<span class="comment">// Konstruktor new DocumentFragment()</span>
if (variant == "fragment"){
var root = new DocumentFragment();
var newP1 = document.createElement("p");
newP1.textContent = "Pierwszy akapit ze sposobu new DocumentFragment().";
var newP2 = document.createElement("p");
newP2.textContent = "Drugi akapit ze sposobu new DocumentFragment().";
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);
}
<span class="comment">// Metoda createElement('')</span>
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="new DocumentFragment()" 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>Na chwilę obecną jedynie przeglądarki Firefox i Chrome pozwalają wywoływać interfejs DocumentFragment w roli konstruktora.
Konstruktor new DocumentFragment() pojawia się dopiero w specyfikacji DOM4.
Składnia Web IDL#
[Constructor] interface DocumentFragment : Node { };