---
title: HTMLElement.dataset
slug: Web/API/HTMLElement/dataset
tags:
  - API
  - HTML DOM
  - HTMLElement
  - Tham khảo
  - Thuộc tính
  - dataset
translation_of: Web/API/HTMLOrForeignElement/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">&lt;div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth&gt;John Doe&lt;/div&gt;</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>