Node: cloneNode()-Methode
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die cloneNode()-Methode der Node-Schnittstelle gibt eine Kopie des Knotens zurück, auf dem diese Methode aufgerufen wurde. Ihr Parameter steuert, ob auch der im Knoten enthaltene Unterbaum geklont wird oder nicht.
Standardmäßig kopiert das Klonen eines Knotens alle seine Attribute und deren Werte, einschließlich Ereignis-Listener, die über Attribute spezifiziert wurden. Durch das Setzen des deep-Parameters können Sie auch den im Knoten enthaltenen Unterbaum kopieren. Es wird keine anderen internen Daten kopiert, wie z.B. mit addEventListener() hinzugefügte Ereignis-Listener oder onevent-Eigenschaften (z.B. node.onclick = someFunction), oder das gemalte Bild für ein <canvas>-Element.
Die Methode Document.importNode() erstellt ebenfalls eine Kopie eines Knotens. Der Unterschied besteht darin, dass importNode() den Knoten im Kontext des aufrufenden Dokuments klont, während cloneNode() das Dokument des geklonten Knotens verwendet. Der Dokumentenkontext bestimmt das CustomElementRegistry für die Konstruktion von benutzerdefinierten Elementen. Aus diesem Grund sollten Sie importNode() auf dem Zieldokument verwenden, um Knoten zu klonen, die in einem anderen Dokument verwendet werden sollen. Der HTMLTemplateElement.content gehört zu einem separaten Dokument, daher sollte er auch mit document.importNode() geklont werden, damit benutzerdefinierte Elemente mit den im aktuellen Dokument definierten Definitionen konstruiert werden.
Warnung:
cloneNode() kann zu doppelten Element-IDs in einem Dokument führen! Wenn der ursprüngliche Knoten ein id-Attribut hat und die Kopie im selben Dokument platziert wird, sollten Sie die ID der Kopie ändern, um sie eindeutig zu machen.
Auch name-Attribute müssen möglicherweise geändert werden, je nachdem, ob doppelte Namen erwartet werden.
Syntax
cloneNode()
cloneNode(deep)
Parameter
deepOptional-
Wenn
true, dann wird der Knoten und sein gesamter Unterbaum, einschließlich Text, der sich in untergeordnetenText-Knoten befinden kann, ebenfalls kopiert.Wenn
falseoder weggelassen, wird nur der Knoten geklont. Der Unterbaum, einschließlich des Textes, den der Knoten enthält, wird nicht geklont.Beachten Sie, dass
deepkeine Auswirkung auf leere Elemente hat, wie z.B. die<img>- und<input>-Elemente.
Rückgabewert
Der neue geklonte Node.
Der geklonte Knoten hat keinen Elternteil und ist nicht Teil des Dokuments,
bis er zu einem anderen Knoten hinzugefügt wird, der Teil des Dokuments ist,
unter Verwendung von Node.appendChild() oder einer ähnlichen Methode.
Beispiel
Verwendung von cloneNode()
const p = document.getElementById("para1");
const p2 = p.cloneNode(true);
Verwendung von cloneNode() mit Templates
Vermeiden Sie die Verwendung von cloneNode() für den Inhalt eines <template>-Elements, da benutzerdefinierte Elemente im Template nicht aktualisiert werden, bis sie in das Dokument eingefügt werden.
class MyElement extends HTMLElement {
constructor() {
super();
console.log("MyElement created");
}
}
customElements.define("my-element", MyElement);
const template = document.createElement("template");
template.innerHTML = `<my-element></my-element>`;
const clone = template.content.cloneNode(true);
// No log here; my-element is undefined in the template's document
customElements.upgrade(clone);
// Still no log; my-element is still undefined in the template's document
document.body.appendChild(clone);
// Logs "MyElement created"; my-element is now upgraded
Verwenden Sie stattdessen document.importNode(), um den Template-Inhalt zu klonen, sodass alle benutzerdefinierten Elemente unter Verwendung der Definitionen im aktuellen Dokument aktualisiert werden:
const clone = document.importNode(template.content, true);
// Logs "MyElement created"; my-element is upgraded using document's definitions
document.body.appendChild(clone);
Spezifikationen
| Specification |
|---|
| DOM # ref-for-dom-node-clonenode① |