---
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>