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
|
---
title: element.cloneNode
slug: Web/API/Node/cloneNode
tags:
- API
- DOM
- Duplication
- Méthodes
- Noeuds
translation_of: Web/API/Node/cloneNode
---
<p>{{APIRef("DOM")}}</p>
<p>La méthode <strong><code>Node.cloneNode()</code></strong> renvoie une copie du nœud sur lequel elle a été appelée.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">var <em><var>dupNode</var></em> = <em><var>node</var></em>.cloneNode([<em><var>deep]</var></em>);
</pre>
<dl>
<dt>node</dt>
<dd>Le noeud à dupliquer.</dd>
<dt>dupNode</dt>
<dd>Le nouveau noeud qui sera un clone du <code>node</code>.</dd>
<dt>deep <em>{{optional_inline}} (profondeur)</em></dt>
<dd><code>true</code> (<em>vrai</em>) si les enfants du noeud doivent aussi être clonés ou <code>false</code> (<em>faux</em>) si seul le noeud spécifié doit l'être.</dd>
</dl>
<div class="note">
<p><strong>Note :</strong> Dans la spécification DOM4 (telle qu'implémentée dans Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> est un argument facultatif. S'il est omis, la méthode agit comme si la valeur de <code>deep</code> était <strong><code>true</code></strong> par défaut, elle utilise le clonage profond comme comportement par défaut. Pour créer un clone superficiel, <code>deep</code> doit être défini sur <code>false</code>.</p>
<p>Le comportement a été modifié dans la dernière spécification et, s'il est omis, la méthode doit agir comme si la valeur de <code>deep</code> était <strong><code>false</code></strong>. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument <code>deep</code> pour la compatibilité amont et aval. Avec Gecko 28.0 {{geckoRelease(28)}}), la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease(29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.</p>
</div>
<h2 id="Exemple">Exemple</h2>
<pre>p = document.getElementById("para1");
p_prime = p.cloneNode(true);
</pre>
<h2 id="Notes">Notes</h2>
<p>Cloner un nœud copie tous ses attributs ainsi que leurs valeurs, y compris les auditeurs intrinsèques (en ligne). Il ne copie pas les auditeurs d'évènement ajoutés avec <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> ou ceux assignés au propriétés d'éléments (par exemple <code>node.onclick = fn</code>). De plus, pour un élément {{HTMLElement("canvas")}} l'image peinte n'est pas copiée.</p>
<p>Le nœud dupliqué renvoyé par <code>cloneNode</code> ne fera pas partie du document tant qu'il n'y est pas ajouté via la méthode {{domxref("Node.appendChild()")}} ou une méthode similaire. De même, il n'a pas de parent tant qu'il n'a pas été ajouté à un autre nœud.</p>
<p>Si <code>deep</code> est défini à <code>false</code>, aucun des nœuds enfants n'est copié.<br>
<em>T</em>out texte contenu dans le nœud n'est pas copié non plus , car il fait partie d'un ou plusieurs nœuds {{domxref("Text")}} enfants.</p>
<p>Si <code>deep</code> est évalué à <code>true</code>, le sous-arbre entier est copié également (y compris le texte qui peut être contenu dans des nœuds {{domxref("Text")}} enfants). Pour les nœuds vides (par exemple les éléments {{HTMLElement("img")}} et {{HTMLElement("input")}} ) le fait de mettre <code>deep</code> à <code>true</code> ou <code>false</code> n'a aucune incidence sur la copie, mais il est tout de même nécessaire de fournir une valeur.</p>
<div class="warning">
<p><strong>Attention :</strong> <code>cloneNode()</code> peut conduire à dupliquer des ID (<em>identifiant</em>) d'éléments dans un document.</p>
</div>
<p>Si le noeud d'origine a un identifiant et que le clone doit être placé dans le même document, l'identifiant du clone peut être modifié pour être unique. Les attributs du nom peuvent devoir être modifiés également, selon que les noms en double sont attendus.</p>
<p>Pour cloner un noeud à ajouter dans un document différent, utilisez {{domxref("Document.importNode()")}} à la place.</p>
<h3 id="Sp.C3.A9cification">Spécification</h3>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}</td>
<td>{{Spec2("DOM WHATWG")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
<td>{{Spec2("DOM3 Core")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
<td>{{Spec2("DOM2 Core")}}</td>
<td>Définition initiale</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("api.Node.cloneNode")}}</p>
|
