Signatur
Beschreibung
Die Methode cloneNode() des Node-Interfaces gibt ein Duplikat des Knotens zurück, auf dem diese Methode aufgerufen wurde. Ihr Parameter steuert, ob der im Knoten enthaltene Teilbaum ebenfalls geklont wird oder nicht.
Standardmäßig kopiert das Klonen eines Knotens alle seine Attribute und deren Werte, einschließlich EventListener, die über Attribute angegeben sind. Durch Setzen des Parameters deep können Sie zusätzlich den im Knoten enthaltenen Teilbaum kopieren. Es werden keine anderen internen Daten kopiert, wie beispielsweise EventListener, die über addEventListener() hinzugefügt wurden, oder onevent-Eigenschaften (z. B. node.onclick = someFunction), oder das gezeichnete Bild eines <canvas>-Elements.
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 zu klonenden Knotens verwendet. Der Dokumentkontext bestimmt die CustomElementRegistry zum Konstruieren von Custom Elements. Aus diesem Grund sollten Sie beim Klonen von Knoten, die in einem anderen Dokument verwendet werden sollen, importNode() auf dem Zieldokument verwenden. Das HTMLTemplateElement.content gehört zu einem separaten Dokument, daher sollte es ebenfalls mit document.importNode() geklont werden, damit Nachfahren, die Custom Elements sind, unter Verwendung der Definitionen im aktuellen Dokument konstruiert werden.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $deep | boolean | false | Wenn true, werden der Knoten und sein gesamter Teilbaum, einschließlich Text, der in untergeordneten Text-Knoten enthalten sein kann, ebenfalls kopiert. Wenn false oder weggelassen, wird nur der Knoten geklont. Der Teilbaum, einschließlich jeglichen Textes, den der Knoten enthält, wird nicht geklont. Beachten Sie, dass deep keine Auswirkung auf void-Elemente wie <img> und <input> hat. Der Standardwert ist false. |
Rückgabewert
Node. Der geklonte Knoten hat keinen Elternknoten und ist nicht Teil des Dokuments, bis er mit Node.appendChild() oder einer ähnlichen Methode zu einem anderen Knoten hinzugefügt wird, der Teil des Dokuments ist.Beispiele
cloneNode() verwenden
const p = document.getElementById("para1");
const p2 = p.cloneNode(true);cloneNode() mit Templates verwenden
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);
// Kein Log hier; my-element ist im Dokument des Templates undefiniert
customElements.upgrade(clone);
// Immer noch kein Log; my-element ist im Dokument des Templates weiterhin undefiniert
document.body.appendChild(clone);
// Loggt "MyElement created"; my-element ist nun upgegradeddocument.importNode() als Alternative
const clone = document.importNode(template.content, true);
// Loggt "MyElement created"; my-element wird mit den Definitionen des Dokuments upgegraded
document.body.appendChild(clone);// Wichtig · Fallstricke
cloneNode() kann zu doppelten Element-IDs in einem Dokument führen! Wenn der ursprüngliche Knoten ein id-Attribut hat und der Klon im selben Dokument platziert wird, sollten Sie die ID des Klons so ändern, dass sie eindeutig ist. Auch name-Attribute müssen möglicherweise geändert werden, je nachdem, ob doppelte Namen erwartet werden. Vermeiden Sie es, cloneNode() auf dem Inhalt eines <template>-Elements zu verwenden, denn wenn das Template Custom Elements enthält, werden diese erst upgegraded, wenn sie in das Dokument eingefügt werden. Verwenden Sie stattdessen document.importNode(), um den Template-Inhalt zu klonen, damit alle Custom Elements mit den Definitionen im aktuellen Dokument upgegraded werden.