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
|
---
title: Node.setUserData()
slug: orphaned/Web/API/Node/setUserData
translation_of: Web/API/Node/setUserData
original_slug: Web/API/Node/setUserData
---
<p>{{ APIRef }}{{ obsolete_header() }}</p>
<p>The <code><strong>Node.setUserData()</strong></code> method allows a user to attach (or remove) data to an element, without needing to modify the DOM. Note that such data will not be preserved when imported via {{domxref("Node.importNode")}}, as with {{domxref("Node.cloneNode()")}} and {{domxref("Node.renameNode()")}} operations (though {{domxref("Node.adoptNode")}} does preserve the information), and equality tests in {{domxref("Node.isEqualNode()")}} do not consider user data in making the assessment.</p>
<p>This method offers the convenience of associating data with specific nodes without needing to alter the structure of a document and in a standard fashion, but it also means that extra steps may need to be taken if one wishes to serialize the information or include the information upon clone, import, or rename operations.</p>
<div class="note">
<p>The <code>Node.getUserData</code> and {{domxref("Node.setUserData")}} methods are no longer available from Web content. {{domxref("Element.dataset")}} or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> can be used instead.</p>
</div>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox"><em>prevUserData = someNode</em>.setUserData(<em>userKey</em>, <em>userData</em>, <em>handler</em>);</pre>
<h3 id="Parameters">Parameters</h3>
<ul>
<li><code>userKey</code> is used as the key by which one may subsequently obtain the stored data. More than one key can be set for a given node.</li>
<li><code>handler</code> is a callback which will be called any time the node is being cloned, imported, renamed, as well as if deleted or adopted; a function can be used or an object implementing the <code>handle</code> method (part of the {{domxref("UserDataHandler")}} interface). The handler will be passed five arguments: an operation type integer (e.g., 1 to indicate a clone operation), the user key, the data on the node, the source node (<code>null</code> if being deleted), the destination node (the newly created node or <code>null</code> if none).If no handler is desired, one must specify <code>null</code>.</li>
<li><code>userData</code> is the object to associate to <code>userKey</code> on someNode. If <code>null</code>, any previously registered object and UserDataHandler associated to <code>userKey</code> on this node will be removed.</li>
</ul>
<h2 id="Example">Example</h2>
<pre class="brush: js">var d = document.implementation.createDocument('', 'test', null);
d.documentElement.setUserData('key', 15, {handle:function (o, k, d, s, ds) {alert(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object Element]::[object Element]
alert(d.documentElement.getUserData('key')); // 15
var e = document.importNode(d.documentElement, true); // causes handler to be called
alert(e.getUserData('key')); // null since user data is not copied
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Removed from the specification.</td>
</tr>
<tr>
<td>{{SpecName('DOM3 Core', 'core.html#Node3-setUserData', 'Node.setUserData()')}}</td>
<td>{{Spec2('DOM3 Core')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<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>{{CompatNo}}</td>
<td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br>
Removed in {{CompatGeckoDesktop("22.0")}} [1]</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>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>{{CompatNo}}</td>
<td>Supported from {{CompatGeckoMobile("1.0")}} to {{CompatGeckoMobile("21.0")}}.<br>
Removed in {{CompatGeckoMobile("22.0")}} [1]</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] The method is still available from chrome scripts.</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{domxref("Node.getUserData()")}}</li>
<li>{{domxref("UserDataHandler")}}</li>
<li>{{domxref("DOMUserData")}}</li>
</ul>
|
