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
134
135
136
137
138
139
140
|
---
title: HTMLElement.dataset
slug: Web/API/HTMLOrForeignElement/dataset
tags:
- API
- HTML DOM
- HTMLElement
- Tham khảo
- Thuộc tính
- dataset
translation_of: Web/API/HTMLOrForeignElement/dataset
original_slug: Web/API/HTMLElement/dataset
---
<div>{{ APIRef("HTML DOM") }}</div>
<p><span class="seoSummary">The <code><strong>dataset</strong></code> property on the {{domxref("HTMLElement")}} interface provides read/write access to all the <a href="/en/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">custom data attributes</a> (<code>data-*</code>) set on the element.</span> This access is available both in HTML and within the DOM. It is a <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">map of DOMString</a>, one entry for each custom data attribute. Note that the<strong> </strong><code>dataset</code><strong> </strong>property itself can be read, but not directly written. Instead, all writes must be to the individual properties within the <code>dataset</code>, which in turn represent the data attributes. Note also that an HTML <code><strong>data-</strong></code><em>attribute</em> and its corresponding DOM<strong> </strong><code>dataset.</code><em>property</em> do not share the same name, but they are always similar:</p>
<ul>
<li>The name of a custom data attribute in HTML begins with <code>data-</code>. It must contain only letters, numbers and the following characters: dash (<code>-</code>), dot (<code>.</code>), colon (<code>:</code>), underscore (<code>_</code>) -- but NOT any ASCII capital letters (<code>A</code> to <code>Z</code>).</li>
<li>The name of a custom data attribute in JavaScript is the name of the same HTML attribute but in camelCase and with no dashes, dots, etc.</li>
</ul>
<p>In addition to the information below, you'll find a how-to guide for using HTML data attributes in our article <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes.</a></p>
<h3 id="Chuyển_đổi_tên">Chuyển đổi tên</h3>
<p>Từ <code>dash-style</code> (kiểu-gạch-nối) sang <code>camelCase</code> (bướuLạcĐà): Tên thuộc tính dữ liệu tùy biến được chuyển đổi thành khóa cho {{ domxref("DOMStringMap") }} dự trên quy định sau:</p>
<ul>
<li>Loại bỏ tiền tố <code>data-</code> (cùng gạch nối);</li>
<li>những gạch nối (<code>U+002D</code>) theo sau chữ cái in thường ASCII, từ <code>a</code><span style="line-height: 1.5;"> tới </span><code>z</code><span style="line-height: 1.5;">, sẽ bị loại bỏ và chữ cái đó sẽ chuyển đổi thành dạng in hoa;</span></li>
<li>những ký tự còn lại (bao gồm gạch nối khác) được giữ nguyên.</li>
</ul>
<p>Từ <code>camelCase</code> (bướuLạcĐà) sang <code>dash-style</code> (kiểu-gạch-nối): Cách chuyển đổi ngược lại, dò theo khóa để tìm ra tên thuộc tính, bằng quy định sau:</p>
<ul>
<li>Rằng buộc: Gạch nối bị cấm đi liền đuôi chữ cái (từ <code>a</code> đến <code>z</code>) ở dạng in thường ASCII (trước khi biến đổi);</li>
<li>thêm tiền tố <code>data-</code>;</li>
<li>bất cứ chữ cái in hoa ASCII từ <code>A</code> tới <code>Z</code> sẽ được đổi thành gạch nối theo sau chữ cái dạng in thường tương ứng.</li>
<li>những ký tự còn lại không đổi.</li>
</ul>
<p>Việc có rằng buộc trong quy định trên nhằm đảm bảo việc chuyển đổi có thể đảo ngược cho nhau.</p>
<p>Ví dụ, thuộc tính có tên <code>data-abc-def</code> sẽ có khóa tương ứng <code>abcDef</code>.</p>
<ul>
</ul>
<h3 id="Truy_cập_giá_trị">Truy cập giá trị</h3>
<ul>
<li>Attributes can be set and read by using the camelCase name (the key) like an object property of the dataset, as in <em>element.</em>dataset.<em>keyname</em></li>
<li>Attributes can also be set and read using the object-properties bracket-syntax, as in <em>element.</em>dataset[<em>keyname</em>]</li>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">Toán tử in</a> có thể dùng để kiểm tra xem thuộc tính đó có (tồn tại) hay không.</li>
</ul>
<h3 id="Loại_giá_trị">Loại giá trị</h3>
<ul>
<li>Khi một thuộc tính được gán, giá trị dữ liệu đó sẽ luôn được chuyển đổi thành định dạng chuỗi. Ví dụ, <code>null</code> sẽ được chuyển thành chuỗi <code>"null"</code>.</li>
<li>Phòng khi cần xóa thuộc tính, ta có thể dùng <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">toán tử delete</a>. (tiếng Anh)</li>
</ul>
<h2 id="Cú_pháp">Cú pháp</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[<em>camelCasedName</em>]</strong>;</li>
<li><em>element</em>.<strong>dataset[<em>camelCasedName</em>]</strong> = <em>string</em>;</li>
<br>
<li>Thuộc tính dữ liệu tùy biến cũng có thể gán trực tiếp bằng thẻ HTML, nhưng tên thuộc tính buộc phải dùng cú pháp <code>data-</code> như trên.</li>
</ul>
<h2 id="Ví_dụ">Ví dụ</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 === ''
// gán dữ liệu cho thuộc tính data
el.dataset.dateOfBirth = '1960-10-03';
// Kết quả: el.dataset.dateOfBirth === 1960-10-03
delete el.dataset.dateOfBirth;
// Kết quả: el.dataset.dateOfBirth === undefined
// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Kết quả: 'someDataAttr' in el.dataset === true
</pre>
<h2 id="Thông_số_kỹ_thuật">Thông số kỹ thuật</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Thông số kỹ thuật</th>
<th scope="col">Trạng thái</th>
<th scope="col">Chú thích</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="Tính_tương_thích_trên_trình_duyệt">Tính tương thích trên trình duyệt</h2>
<p>{{Compat("api.HTMLElement.dataset")}}</p>
<h2 id="Xem_thêm">Xem thêm</h2>
<ul>
<li>Lớp HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a></code> của thuộc tính phổ thông (global).</li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a> (Tiếng Anh)</li>
<li>{{domxref("Element.getAttribute()")}} và {{domxref("Element.setAttribute()")}}</li>
</ul>
|
