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
|
---
title: HTMLElement.dataset
slug: Web/API/HTMLOrForeignElement/dataset
translation_of: Web/API/HTMLOrForeignElement/dataset
original_slug: Web/API/HTMLElement/dataset
---
<p>{{ APIRef }}</p>
<p>A propriedade <code><strong>HTMLElement.dataset</strong></code> permite o acesso, em modo de leitura e escrita, a todos os <a href="/en/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">atributos de dados personalizado</a> (<em>data-*</em>) no elemento. Ele é um mapa de <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">DOMString</a>, com uma entrada para cada atributo de dados personalizado.</p>
<p>O nome de um atributo de dados customizado inicia com <code>data-</code>. Ele deve conter somente letras, números e os seguintes caracteres: dash (<code>-</code>), dot (<code>.</code>), collon(<code>:</code>), underscore (<code>_</code>). Além disso, ele não deve conter letras ASCII captalizadas (<code>A</code> à <code>Z</code>).</p>
<p>Um atributo de dados personalizado é transformado em uma chave para uma entrada no {{ domxref("DOMStringMap") }} de acordo com as seguintes regras</p>
<ul>
<li>O prefixo <code>data-</code> é removido (incluindo o dash);</li>
<li>Para qualquer dash (<code>U+002D</code>) seguido por uma ASCII letra minúscula (<code>a</code><span style="line-height: 1.5;"> à </span><code>z</code>)<span style="line-height: 1.5;">, o dash é removido e a letra que segue é tranformada em maíscula;</span></li>
<li>outros caracteres (incluindo outros dash) são deixados inalterados.</li>
</ul>
<p>A transformação oposta, que mapeia uma chave para um nome de atributo, usa as seguintes regras:</p>
<ul>
<li>Restrição: um dash pode não ser imediatamente seguido de uma letra ASCII minúscula (<code>a</code> à <code>z</code>)(antes da transformação);</li>
<li>Um prefixo <code>data-</code> é adicionado;</li>
<li>Qualquer caractere ASCII maiúsculo (<code>A</code> à <code>Z</code>) é transformado em um dash seguido pela sua forma mínúscula;</li>
<li>outros caracteres são deixados inalterados.</li>
</ul>
<p>A restrição nas regras acima garantem que as duas trasnformações são inversa uma da outra.</p>
<p>Por exemplo, o atributo <code>data-abc-def</code> corresponde a chave <code>abcDef</code>.</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox"><em>string</em> = <em>element</em>.dataset.<em>camelCasedName</em>;
<em>element.</em>dataset.<em>camelCasedName</em> = <em>string</em>;</pre>
<h2 id="Exemplos">Exemplos</h2>
<pre class="brush: js"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
</div>
var el = document.querySelector('#user');
// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''
el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.
// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true
</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Espeficicação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Sem mudanças desde o último snapshot, {{SpecName('HTML5.1')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>Snapshot de {{SpecName('HTML WHATWG')}}, sem mudanças desde {{SpecName('HTML5 W3C')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Snapshot de {{SpecName('HTML WHATWG')}}, definição inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{Compat("api.HTMLElement.dataset")}}</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>A classe HTML <a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a> de atributos globais.</li>
</ul>
|
