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
|
---
title: Node.setUserData()
slug: Web/API/Node/setUserData
tags:
- API
- DOM
- Données utilisateur
- Méthodes
- Noeuds
translation_of: Web/API/Node/setUserData
---
<div>{{APIRef("DOM")}}{{obsolete_header}}</div>
<p>La méthode <code><strong>Node.setUserData()</strong></code> permet à un utilisateur de joindre (ou supprimer) des données à un élément, sans avoir besoin de modifier le DOM. Notez que ces données ne seront pas conservées lors de l'importation via {{domxref("Node.importNode")}}, comme avec les opérations {{domxref("Node.cloneNode()")}} et {{domxref("Node.renameNode()")}} (bien que {{domxref("Node.adoptNode")}} conserve l'information), et les tests d'égalité dans {{domxref("Node.isEqualNode()")}} ne prennent pas en compte les données de l'utilisateur lors de l'évaluation.</p>
<p>Cette méthode offre l'avantage d'associer des données à des noeuds spécifiques sans nécessiter de modification de la structure du document et de façon standard, mais cela signifie aussi que des étapes supplémentaires peuvent être nécessaires si l'on souhaite sérialiser l'information ou l'inclure sur un clone, importer ou renommer des opérations.</p>
<div class="note">
<p>Les méthodes <code>Node.getUserData</code> et {{domxref("Node.setUserData")}} ne sont plus disponibles depuis le contenu Web. {{domxref("HTMLElement.dataset")}} ou <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> peuvent être utilisées à la place.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox"><var>var prevUserData</var> = <var>someNode</var>.setUserData(<var>userKey</var>, <var>userData</var>, <var>handler</var>);</pre>
<h3 id="Paramètres">Paramètres</h3>
<ul>
<li><code>userKey</code> est utilisé comme une clé par laquelle on peut ensuite obtenir les données stockées. Plus d'une clé peuvent être définies pour un nœud donné.</li>
<li><code>handler</code> est un rappel qui sera appelé à chaque fois que le noeud est cloné, importé, renommé, supprimé ou adopté ; une fonction peut être utilisée ou un objet mettant en œuvre la méthode <code>handle</code> (partie de l'interface {{domxref("UserDataHandler")}}). Le gestionnaire recevra 5 arguments : un entier (<em>integer</em>) représentant le type d'opération (tel que 1 pour indiquer une opération de clonage), la clé utilisateur, les données sur le noeud, le noeud source (<code>null</code> s'il a été supprimé), le noeud de destination (le nouveau noeud créé ou <code>null</code> si aucun). Si aucun gestionnaire n'est souhaité, il faut spécifier <code>null</code>.</li>
<li><code>userData</code> est l'objet à associer à <code>userKey</code> sur someNode. Si <code>null</code>, tout objet précédemment enregistré et l'UserDataHandler associé à <code>userKey</code> sur ce noeud seront supprimés.</li>
</ul>
<h2 id="Exemple">Exemple</h2>
<pre class="brush: js">var d = document.implementation.createDocument('', 'test', null);
d.documentElement.setUserData('key', 15, {handle:function (o, k, d, s, ds) {console.log(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object Element]::[object Element]
console.log(d.documentElement.getUserData('key')); // 15
var e = document.importNode(d.documentElement, true); // provoque l'appel du gestionnaire
console.log(e.getUserData('key')); // null puisque les données utilisateur ne sont pas copiées.
</pre>
<h2 id="Spécifications">Spécifications</h2>
<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', '#interface-node', 'Node')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Supprimé de la spécification.</td>
</tr>
<tr>
<td>{{SpecName('DOM3 Core', 'core.html#Node3-setUserData', 'Node.setUserData()')}}</td>
<td>{{Spec2('DOM3 Core')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("api.Node.setUserData")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{domxref("Node.getUserData()")}}</li>
<li>{{domxref("UserDataHandler")}}</li>
<li>{{domxref("DOMUserData")}}</li>
</ul>
|
