---
title: HTMLElement
slug: Web/API/HTMLElement
translation_of: Web/API/HTMLElement
---
<div>
<div>{{ APIRef("HTML DOM") }}</div>
</div>
<div> </div>
<p><strong><code>HTMLElement</code></strong> 介面表示了所有的 <a href="/docs/Web/HTML" title="/zh-TW/docs/Web/HTML">HTML</a> 元素。部分元素直接實作了此介面，其它則是實作繼承自 <code>HTMLElement</code> 的子介面。</p>
<p>{{InheritanceDiagram}}</p>
<h2 id="屬性">屬性</h2>
<p><em>Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.</em></p>
<dl>
<dt>{{domxref("HTMLElement.accessKey")}}</dt>
<dd>Is a {{domxref("DOMString")}} representing the access key assigned to the element.</dd>
<dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt>
<dd>Returns a {{domxref("DOMString")}} containing the element's assigned access key.</dd>
<dt>{{domxref("HTMLElement.contentEditable")}}</dt>
<dd>Is a {{domxref("DOMString")}}, where a value of <code>"true"</code> means the element is editable and a value of <code>"false"</code> means it isn't.</dd>
<dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt>
<dd>Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.</dd>
<dt>{{domxref("HTMLElement.contextMenu")}}</dt>
<dd>Is a {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be <code>null</code>.</dd>
<dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</dt>
<dd>Returns a {{domxref("DOMStringMap")}} with which script can read and write the element's <a href="/en-US/docs/Web/Guide/HTML/Using_data_attributes">custom data attributes</a> (<code>data-*</code>) .</dd>
<dt>{{domxref("HTMLElement.dir")}}</dt>
<dd>Is a {{domxref("DOMString")}}, reflecting the <code>dir</code> global attribute, representing the directionality of the element. Possible values are <code>"ltr"</code>, <code>"rtl"</code>, and <code>"auto"</code>.</dd>
<dt>{{domxref("HTMLElement.draggable")}}</dt>
<dd>Is a {{jsxref("Boolean")}} indicating if the element can be dragged.</dd>
<dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt>
<dd>Returns a {{domxref("DOMSettableTokenList")}} reflecting the <code>dropzone</code> global attribute and describing the behavior of the element regarding a drop operation.</dd>
<dt>{{domxref("HTMLElement.hidden")}}</dt>
<dd>Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.</dd>
<dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt>
<dd>Is a {{jsxref("Boolean")}} representing the item scope.</dd>
<dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt>
<dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
<dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt>
<dd>Is a {{domxref("DOMString")}} representing the item ID.</dd>
<dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt>
<dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
<dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt>
<dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
<dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt>
<dd>Returns a {{jsxref("Object")}} representing the item value.</dd>
<dt>{{domxref("HTMLElement.lang")}}</dt>
<dd>Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.</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="事件處理器">事件處理器</h3>
<p>Most events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}}, implemented by <code>HTMLElement</code>. A few more 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="方法">方法</h2>
<p><em>Inherits methods from its parent, {{domxref("Element")}}.</em></p>
<dl>
<dt>{{domxref("HTMLElement.blur()")}}</dt>
<dd>Removes keyboard focus from the currently focused element.</dd>
<dt>{{domxref("HTMLElement.click()")}}</dt>
<dd>Sends a mouse click event to the element.</dd>
<dt>{{domxref("HTMLElement.focus()")}}</dt>
<dd>Makes the element the current keyboard focus.</dd>
<dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt>
<dd>Runs the spell checker on the element's contents.</dd>
</dl>
<h2 id="規範">規範</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="瀏覽器相容性">瀏覽器相容性</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Edge</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatGeckoDesktop("1.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
<td>{{CompatGeckoDesktop("5.0")}}</td>
<td>17.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>6.0</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
<td>{{CompatGeckoDesktop("8.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}{{WebkitBug(72715)}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
<td>{{CompatGeckoDesktop("5.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>9</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.click()", "click()")}}</td>
<td>{{CompatGeckoDesktop("5.0")}}</td>
<td>{{CompatUnknown}}9</td>
<td>{{CompatVersionUnknown}}</td>
<td>9</td>
<td>{{CompatUnknown}}</td>
<td>6.0</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
<td>{{CompatGeckoDesktop("6.0")}}</td>
<td>8</td>
<td>{{CompatVersionUnknown}}</td>
<td>11</td>
<td>11.10</td>
<td>5.1</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
<td>{{CompatGeckoDesktop("5.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>9</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.contentEditable", "contentEditable")}}</td>
<td>{{CompatGeckoDesktop("1.9")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>5.5</td>
<td>9</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.spellcheck", "spellcheck")}}</td>
<td>{{CompatGeckoDesktop("1.8.1")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.style", "style")}}</td>
<td>{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}})</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.draggable", "draggable")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>12.0</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.dropzone", "dropzone")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>12.0</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}</td>
<td>{{CompatGeckoDesktop("6.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>11.60<br>
(Removed in Opera 15)</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td>
<td>{{CompatGeckoDesktop("1.9")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>Edge</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>
<p>{{CompatGeckoMobile("1.0")}}</p>
</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
<td>{{CompatGeckoMobile("5.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
<td>{{CompatGeckoMobile("8.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
<td>{{CompatGeckoMobile("5.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.click()", "click()")}}</td>
<td>{{CompatGeckoMobile("5.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
<td>{{CompatGeckoMobile("6.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
<td>{{CompatGeckoMobile("5.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td>
<td>{{CompatGeckoMobile("1.9")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="參見">參見</h2>
<ul>
<li>{{domxref("Element")}}</li>
</ul>