aboutsummaryrefslogtreecommitdiff
path: root/files/vi/web/api/htmlorforeignelement
diff options
context:
space:
mode:
Diffstat (limited to 'files/vi/web/api/htmlorforeignelement')
-rw-r--r--files/vi/web/api/htmlorforeignelement/dataset/index.html140
1 files changed, 0 insertions, 140 deletions
diff --git a/files/vi/web/api/htmlorforeignelement/dataset/index.html b/files/vi/web/api/htmlorforeignelement/dataset/index.html
deleted file mode 100644
index ad2617ab56..0000000000
--- a/files/vi/web/api/htmlorforeignelement/dataset/index.html
+++ /dev/null
@@ -1,140 +0,0 @@
----
-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">&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>