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
|
---
title: HTMLElement.dataset
slug: Web/API/HTMLOrForeignElement/dataset
translation_of: Web/API/HTMLOrForeignElement/dataset
original_slug: Web/API/HTMLElement/dataset
---
<div>{{ APIRef("HTML DOM") }}</div>
<p><span class="seoSummary">La propiedad <code><strong>dataset</strong></code> en {{domxref("HTMLElement")}} proporciona una interfaz lectura/escritura para obtener todos los <a href="/es/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">atributos de datos personalizados</a> (<code>data-*</code>) de cada uno de los elementos.</span> Está disponible el acceso en HTML y en el DOM. Dentro del <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">map of DOMString</a>, aparece una entrada por cada atributo de datos. Hay que tener en cuenta que la propiedad<strong> </strong><code>dataset</code><strong> </strong>puede leerse, pero no modificarse directamente. En vez de eso, las escrituras deben ser realizadas a través de cada propiedad individual del <code>dataset</code>, que representan a cada atributo correspondiente. Además un HTML <code><strong>data-</strong></code><em>attribute</em> y su correspondiente DOM<strong> </strong><code>dataset.</code><em>property</em> no comparten el mismo nombre, pero son siempre similares:</p>
<ul>
<li>El nombre de un attributo de datos comienza en HTML con <code>data-</code>. Sólo puede estar formado por letras minúsculas, números y los caracteres: guión (<code>-</code>), punto (<code>.</code>), dos puntos (<code>:</code>) y guión bajo (<code>_</code>) -- NUNCA una letra mayúscula (A a Z).</li>
<li>El nombre del atributo en JavaScript será el del correspondiente atributo HTML pero en camelCase, sin guiones, puntos, etc.</li>
</ul>
<p>Adicionalmente, encontrarás una guía de como usar los atributos data de HTML en nuestro articulo <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes.</a></p>
<h3 id="Conversion_de_nombres">Conversion de nombres</h3>
<p><code>dash-style</code> a <code>camelCase</code>: Un atributo de datos personalizado se transforma en una clave para la entrada {{ domxref("DOMStringMap") }} con las siguientes reglas</p>
<ul>
<li>el prefijo <code>data-</code> es eliminado (incluyendo el guión);</li>
<li>por cada guión (<code>U+002D</code>) seguido de un caracter ASCII que sea una letra en minuscula<span style="line-height: 1.5;"> </span><code>a</code><span style="line-height: 1.5;"> a la </span><code>z</code><span style="line-height: 1.5;">, el guión es removido y la letra se transforma en su contraparte en mayuscula;</span></li>
<li>otros caracteres (incluyendo otros guines) se mantienen intactos.</li>
</ul>
<p><code>camelCase</code> a <code>dash-style</code>: La conversión opuesta, mapea una clave en un nombre de atributo, usa las siguientes reglas:</p>
<ul>
<li>Restricción: Un guión no debe ser inmediatamente seguido por un un caracter ASCII que sea una letra minuscula de la <code>a</code> a la <code>z</code> (antes de la conversión);</li>
<li>se agrega el prefijo <code>data-</code>;</li>
<li>cualquier caracter ASCII que sea una letra mayuscula de la <code>A</code> a la <code>Z</code> se convierte en un guión seguido de se contraparte en minuscula;</li>
<li>otros caracteres se mantienen intactos.</li>
</ul>
<p>La restricción en las reglas anteriores aseguran que las dos conversiones sean inversas una a la otra.</p>
<p>Por ejemplo, el atributo nombrado <code>data-abc-def</code> corresponde a la clave <code>abcDef</code>.</p>
<ul>
</ul>
<h3 id="Accediendo_valores">Accediendo valores</h3>
<ul>
<li>Los atributos pueden ser definidos y obtenidos usando el nombre camelCase (la clave) como la propiedad de un objeto del dataset, como en <code>element.dataset.keyname</code></li>
<li>Los atributos tambien pueden ser definidos y obtenidos usando la sintaxis de corchetes, como en <code>element.dataset[keyname]</code></li>
<li>El <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">operador <code>in</code></a> puede ser usado para checar si un atributo dado existe.</li>
</ul>
<h3 id="Definiendo_valores">Definiendo valores</h3>
<ul>
<li>Cuando un atributo es definido, su valor siempre se convierte a string. Por ejemplo, <code>null</code> siempre se convierte en el string "null".</li>
<li>Cuando quieras remover un atributo, puedes usar el <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">operador <code>delete</code></a>.</li>
</ul>
<h2 id="Sintaxis">Sintaxis</h2>
<ul>
<li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li>
<li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li>
<br>
<li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li>
<li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li>
<br>
<li><em>Custom data attributes can also be set directly on HTML elements, but attribute names must use the data- syntax above. </em></li>
</ul>
<h2 id="Ejemplos">Ejemplos</h2>
<pre class="brush: html"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div></pre>
<pre class="brush: js">const el = document.querySelector('#user');
// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''
// set the data attribute
el.dataset.dateOfBirth = '1960-10-03';
// Result: el.dataset.dateOfBirth === 1960-10-03
delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined
// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true
</pre>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>No change from latest 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 of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
<p>{{Compat("api.HTMLElement.dataset")}}</p>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>The HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a></code> class of global attributes.</li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a></li>
<li>{{domxref("Element.getAttribute()")}} and {{domxref("Element.setAttribute()")}}</li>
</ul>
|
