1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: Node.cloneNode
slug: Web/API/Node/cloneNode
translation_of: Web/API/Node/cloneNode
---
<div>{{APIRef("DOM")}}</div>
<h2 id="Summary" name="Summary">Übersicht</h2>
<p>Gibt ein Duplikat des Knotens, auf dem diese Methode aufgerufen wurde, zurück.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">var <var>dupNode</var> = <var>node</var>.cloneNode(<var>deep</var>);
</pre>
<dl>
<dt><code>node</code></dt>
<dd>Der Knoten, welcher dupliziert werden soll.</dd>
<dt><code>dupNode</code></dt>
<dd>Der duplizierte Knoten.</dd>
<dt><code>deep</code></dt>
<dd><code>true</code> wenn die Kindknoten des Knotens ebenfalls dupliziert werden sollen, <code>false</code> wenn nur der Knoten dupliziert werden soll.</dd>
</dl>
<div class="note">
<p><strong>Hinweis:</strong> In der DOM4 Spezifikation (implementiert in Gecko 13.0 {{geckoRelease(13)}}), ist das Argument <code>deep</code> optional. Es ist dann laut Spezifikation <strong><code>true</code></strong>.</p>
<p>Leider wurde dies in der letzten Spezifikation geändert, sodass der Standardwert nun <strong><code>false</code></strong> ist. Auch wenn es immer noch optional ist, sollte man das Argument <code>deep</code> aus diesen Kompatibilitätsgründen setzen. Ab Gecko 28.0 {{geckoRelease(28)}} warnt die Konsole den Entwickler, wenn das Argument nicht gesetzt ist.</p>
</div>
<h2 id="Example" name="Example">Beispiel</h2>
<pre class="brush: js"> var p = document.getElementById("para1");
var p_prime = p.cloneNode(true);
</pre>
<h2 id="Notes" name="Notes">Hinweise</h2>
<p id="not-event-listeners">Der duplizierte Knoten enthält alle Attribute und deren Werte, aber nicht die Eventlistener welche via <a href="/en-US/docs/DOM/element.addEventListener" title="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> oder über die jeweilige Elementeigenschaft (z.B. <code>node.onclick = function</code>) gesetzt wurden. Im Fall eines <code><canvas></code>-Elements wird das gezeichnete Bild <em>nicht</em> mitkopiert.</p>
<p>Der mit <code>cloneNode()</code> duplizierte Knoten ist noch nicht Teil des Dokuments und hat keinen Elternknoten bis er mithilfe der Methode {{domxref("Node.appendChild()")}} oder einer anderen vergleichbaren Methode in das Dokument eingefügt wird.</p>
<p>Wenn <code>deep</code> auf <code>false</code> gesetzt ist, werden die Kindknoten nicht mitkopiert. Dies schließt ebenfalls alle Textelemente mit ein, da diese in einem oder mehreren Kindknoten enthalten sind.</p>
<div class="warning"><strong>Warnung:</strong> Die Verwendung von <code>cloneNode()</code> kann dazu führen, dass die selbe ID im Dokument mehrmals existiert.</div>
<p>Wenn der Originalknoten eine ID hat, sollte diese im dupliziertem Knoten geändert oder gelöscht werden, um Probleme zu vermeiden. Dies sollte auch für das <code>name</code> Attribut überlegt werden.</p>
<p>Um einen Knoten aus einem anderen Dokument zu kopieren sollte die {{domxref("Document.importNode()")}} verwendet werden.</p>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>deep</code> as an optional parameter</td>
<td>
<p>Ja</p>
<p>(Standard: <code>false</code>)</p>
</td>
<td>{{CompatGeckoDesktop("13.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>
<p>Yes</p>
<p>(default is <code>false</code>)</p>
</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome für Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>deep</code> as an optional parameter</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("13.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Spezifikationen">Spezifikationen</h2>
<ul>
<li>{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}</li>
<li>{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}</li>
<li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode">DOM4: cloneNode</a> (draft)</li>
</ul>
|
