initial commit

2 files changed, 407 insertions, 0 deletions

diff --git a/files/vi/web/api/htmlelement/dataset/index.html b/files/vi/web/api/htmlelement/dataset/index.html
new file mode 100644
index 0000000000..44ce2c7393
--- /dev/null
+++ b/files/vi/web/api/htmlelement/dataset/index.html
@@ -0,0 +1,139 @@
+---
+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>
diff --git a/files/vi/web/api/htmlelement/index.html b/files/vi/web/api/htmlelement/index.html
new file mode 100644
index 0000000000..1a625a2a5b
--- /dev/null
+++ b/files/vi/web/api/htmlelement/index.html
@@ -0,0 +1,268 @@
+---
+title: HTMLElement
+slug: Web/API/HTMLElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+translation_of: Web/API/HTMLElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>Interface <strong><code>HTMLElement</code></strong> đại diện cho mọi phần tử <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>. Một vài phần tử sử dụng trực tiếp interface này, một vài phần tử khác lại sử dụng nó thông qua các lớp khác kế thừa nó.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Các_thuộc_tính">Các thuộc tính</h2>
+
+<p><em>Được kế thừa từ {{domxref("Element")}}, và sử dụng chúng từ {{domxref("GlobalEventHandlers")}} và {{domxref("TouchEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.accessKey")}}</dt>
+ <dd>Là một {{domxref("DOMString")}} trả về từ khoá truy cập được gán cho phần tử.</dd>
+ <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt>
+ <dd>Trả về một {{domxref("DOMString")}} chứa các từ khoá truy cập đã được gán của phần tử.</dd>
+ <dt>{{domxref("HTMLElement.contentEditable")}}</dt>
+ <dd>Là một {{domxref("DOMString")}}, nếu giá trị là <code>"true"</code>, ta có thể chỉnh sửa phần tử này và ngược lại nếu giá trị là <code>"false"</code>.</dd>
+ <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt>
+ <dd>Trả về giá trị {{domxref("Boolean")}} cho biết nội dung của phần tử có được phép chỉnh sửa hay không.</dd>
+ <dt>{{domxref("HTMLElement.contextMenu")}} {{deprecated_inline}}</dt>
+ <dd>Là một {{domxref("HTMLMenuElement")}} trả về một menu tóm lược liên kết các phần tử. Giá trị có thể là <code>null</code>.</dd>
+ <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</dt>
+ <dd>Trả về một {{domxref("DOMStringMap")}} cho phép ta thao tác với <a href="/en-US/docs/Web/Guide/HTML/Using_data_attributes">các thuộc tính dữ liệu tùy biến</a> của phần tử (<code>data-*</code>) .</dd>
+ <dt>{{domxref("HTMLElement.dir")}}</dt>
+ <dd>Là một {{domxref("DOMString")}}, tương tự với thuộc tính global <code>dir</code>, đại diện cho hướng hiển thị của phần tử. Các giá trị cho phép là <code>"ltr"</code>, <code>"rtl"</code>, và <code>"auto"</code>.</dd>
+ <dt>{{domxref("HTMLElement.draggable")}}</dt>
+ <dd>Có kiểu {{jsxref("Boolean")}} cho ta biết phần tử có thể được kéo (drag) hay không.</dd>
+ <dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt>
+ <dd>Trả về một {{domxref("DOMSettableTokenList")}} tương tự với thuộc tính global <code>dropzone</code> mô tả hành vi của phần tử liên quan đến hành động thả (drop).</dd>
+ <dt>{{domxref("HTMLElement.hidden")}}</dt>
+ <dd>Có kiểu {{jsxref("Boolean")}} cho ta biết phần tử có ẩn hay không.</dd>
+ <dt>{{domxref("HTMLElement.inert")}}</dt>
+ <dd>Có kiểu {{jsxref("Boolean")}} cho ta biết <a href="https://en.wikipedia.org/wiki/User_agent">user agent</a> must act as though the given node is absent đối với các sự kiện tương tác của người dùng, tìm kiếm văn bản trong trang, và lựa chọn văn bản.</dd>
+ <dt>{{domxref("HTMLElement.innerText")}}</dt>
+ <dd>Trả về nội dung văn bản được "render" từ một node và phần tử con của nó. Điều này tương tự với việc người dùng bôi đen văn bản và sao chép chúng.</dd>
+ <dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt>
+ <dd>Có kiểu {{jsxref("Boolean")}} cho biết scope của item.</dd>
+ <dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Trả về một {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt>
+ <dd>Là một {{domxref("DOMString")}} cho biết ID của item.</dd>
+ <dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Là một {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Trả về một {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt>
+ <dd>Trả về một {{jsxref("Object")}} cho biết giá trị của item.</dd>
+ <dt>{{domxref("HTMLElement.lang")}}</dt>
+ <dd>Là một {{domxref("DOMString")}} cho biết ngôn ngữ của thuộc tính của một phần tử, của văn bản và của nội dung phần tử đó.</dd>
+ <dt>{{domxref("HTMLElement.noModule")}}</dt>
+ <dd>Có kiểu {{jsxref("Boolean")}} cho biết rằng việc nhúng đoạn script có thể được thực thi bởi <a href="https://en.wikipedia.org/wiki/User_agent">user agent</a> (có hỗ trợ module scripts) hay không.</dd>
+ <dt>{{domxref("HTMLElement.nonce")}}</dt>
+ <dd>Returns the cryptographic number used once that is used by Content Security Policy to determine whether a given fetch will be allowed to proceed.</dd>
+ <dt>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code> containing the height of an element, relative to the layout.</dd>
+ <dt>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code>, the distance from this element's left border to its <code>offsetParent</code>'s left border.</dd>
+ <dt>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("Element")}} that is the element from which all offset calculations are currently computed.</dd>
+ <dt>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code>, the distance from this element's top border to its <code>offsetParent</code>'s top border.</dd>
+ <dt>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code> containing the width of an element, relative to the layout.</dd>
+ <dt>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("HTMLPropertiesCollection")}}…</dd>
+ <dt>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} that controls <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">spell-checking</a>. It is present on all HTML elements, though it doesn't have an effect on all of them.</dd>
+ <dt>{{domxref("HTMLElement.style")}}</dt>
+ <dd>Is a {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.</dd>
+ <dt>{{domxref("HTMLElement.tabIndex")}}</dt>
+ <dd>Is a <code>long</code> representing the position of the element in the tabbing order.</dd>
+ <dt>{{domxref("HTMLElement.title")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.</dd>
+ <dt>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} representing the translation.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<p>Most event handler properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}} interfaces and implemented by <code>HTMLElement</code>. In addition, the following handlers are specific to <code>HTMLElement</code>.</p>
+
+<dl>
+ <dt>{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>copy</code> event ({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>cut</code> event ({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>paste</code> event ({{bug("280959")}}).</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchstart")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchend")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchmove")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchenter")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchleave")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchcancel")}} event.</dd>
+</dl>
+
+<h2 id="Các_phương_thức">Các phương thức</h2>
+
+<p><em>Được kế thừa từ {{domxref("Element")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.blur()")}}</dt>
+ <dd>Bỏ truy cập phần tử hiện tại.</dd>
+ <dt>{{domxref("HTMLElement.click()")}}</dt>
+ <dd>Gửi một sự kiện click chuột đến phần tử.</dd>
+ <dt>{{domxref("HTMLElement.focus()")}}</dt>
+ <dd>Truy cập đến phần tử hiện tại (truy cập bằng cách click vào phần tử hoặc nhấn phím <kbd>Tab</kbd> để di chuyển đến).</dd>
+ <dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt>
+ <dd>Kiểm tra chính tả nội dung của phần tử.</dd>
+</dl>
+
+<h2 id="Các_sự_kiện">Các sự kiện</h2>
+
+<p>Bắt các sự kiện bằng cách sự dụng phương thức <code>addEventListener()</code> hoặc bằng cách gán một thuộc tính sự sự kiện <code>on_tên_sự_kiện</code> dựa trên interface này.</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/invalid_event">invalid</a></code></dt>
+ <dd>Được gọi khi một phần tử không thỏa điều kiện khi đang xác minh (validation) thông tin.<br>
+ Dùng tương tự với thuộc tính <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/oninvalid">oninvalid</a></code>.</dd>
+</dl>
+
+<h3 id="Các_sự_kiện_animation">Các sự kiện animation</h3>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/animationcancel_event">animationcancel</a></code></dt>
+ <dd>Được gọi khi một animation dừng đột ngột.<br>
+ Dùng tương tự với thuộc tính <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationcancel">onanimationcancel</a></code>.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/animationend_event">animationend</a></code></dt>
+ <dd>Được gọi khi một animation kết thúc.<br>
+ Dùng tương tự với thuộc tính <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationend">onanimationend</a></code>.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/animationiteration_event">animationiteration</a></code></dt>
+ <dd>Được gọi khi một vòng lặp animation kết thúc.<br>
+ Dùng tương tự với thuộc tính <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationiteration">onanimationiteration</a></code>.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/animationstart_event">animationstart</a></code></dt>
+ <dd>Fired when an animation starts.<br>
+ Dùng tương tự với thuộc tính <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart">onanimationstart</a></code>.</dd>
+</dl>
+
+<h3 id="Các_sự_kiện_input">Các sự kiện input</h3>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/beforeinput_event">beforeinput</a></code></dt>
+ <dd>Được gọi khi giá trị của một phần tử {{HTMLElement("input")}}, {{HTMLElement("select")}}, hoặc {{HTMLElement("textarea")}} sắp được chỉnh sửa.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></dt>
+ <dd>Được gọi khi giá trị của một phần tử {{HTMLElement("input")}}, {{HTMLElement("select")}}, hoặc {{HTMLElement("textarea")}} đã được chỉnh sửa.<br>
+ Dùng tương tự với thuộc tính <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/oninput">oninput</a></code>.</dd>
+</dl>
+
+<h3 id="Pointer_events">Pointer events</h3>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/gotpointercapture_event">gotpointercapture</a></code></dt>
+ <dd>Fired when an element captures a pointer using <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture">setPointerCapture()</a></code>.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ongotpointercapture">ongotpointercapture</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/lostpointercapture_event">lostpointercapture</a></code></dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#Pointer_capture">captured pointer</a> is released.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onlostpointercapture">onlostpointercapture</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/pointercancel_event">pointercancel</a></code></dt>
+ <dd>Fired when a pointer event is canceled.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointercancel">onpointercancel</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/pointerdown_event">pointerdown</a></code></dt>
+ <dd>Fired when a pointer becomes active.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerdown">onpointerdown</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/pointerenter_event">pointerenter</a></code></dt>
+ <dd>Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerenter">onpointerenter</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/pointerleave_event">pointerleave</a></code></dt>
+ <dd>Fired when a pointer is moved out of the hit test boundaries of an element.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerleave">onpointerleave</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/pointermove_event">pointermove</a></code></dt>
+ <dd>Fired when a pointer changes coordinates.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointermove">onpointermove</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/pointerout_event">pointerout</a></code></dt>
+ <dd>Fired when a pointer is moved out of the <em>hit test</em> boundaries of an element (among other reasons).<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerout">onpointerout</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/pointerover_event">pointerover</a></code></dt>
+ <dd>Fired when a pointer is moved into an element's hit test boundaries.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerover">onpointerover</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/pointerup_event">pointerup</a></code></dt>
+ <dd>Fired when a pointer is no longer active.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerup">onpointerup</a></code> property.</dd>
+</dl>
+
+<h3 class="highlight-spanned" id="Các_sự_kiện_transition"><span class="highlight-span">Các sự kiện transition</span></h3>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitioncancel_event">transitioncancel</a></code></dt>
+ <dd>Được gọi khi một <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> bị hủy.<br>
+ Dùng tương tự với thuộc tính <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitioncancel">ontransitioncancel</a></code>.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event">transitionend</a></code></dt>
+ <dd>Được gọi khi một <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> hoàn thành.<br>
+ Dùng tương tự với thuộc tính <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code>.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionrun_event">transitionrun</a></code></dt>
+ <dd>Được gọi khi một <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> được tạo ra đầu tiên.<br>
+ Dùng tương tự với thuộc tính <code><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitionrun" rel="nofollow">ontransitionrun</a></code>.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionstart_event">transitionstart</a></code></dt>
+ <dd>Được gọi khi một <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> thực sự bắt đầu.<br>
+ Dùng tương tự với thuộc tính <code><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitionstart" rel="nofollow">ontransitionstart</a></code>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the following properties: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Added the following properties: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, and <code>itemValue</code>.<br>
+    Added the following method: <code>forceSpellcheck()</code>.<br>
+    Moved the <code>onXYZ</code> attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Added the following properties: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, and all the <code>onXYZ</code> properties.<br>
+    Moved the <code>id</code> and <code>className</code> properties to the {{domxref("Element")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName('DOM2 HTML')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Khả_năng_tương_thích_của_trình_duyệt">Khả năng tương thích của trình duyệt</h2>
+
+
+
+<p>{{Compat("api.HTMLElement")}}</p>
+
+<h2 id="Xem_thêm">Xem thêm</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+</ul>