HTMLElement

  • Revision slug: Web/API/HTMLElement
  • Revision title: HTMLElement
  • Revision id: 437389
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{DomRef}}

The HTMLElement interface represents any HTML element. Some elements directly implement this interface, other implement it via an interface that inherit it.

Properties

Inherits properties from its parent, {{domxref("Element")}}.

Name Type Description
{{domxref("HTMLElement.accessKey")}} {{domxref("DOMString")}} The access key assigned to the element.
{{domxref("HTMLElement.accessKeyLabel")}} {{domxref("DOMString")}} A string that represents the element's assigned access key.
{{domxref("Element.className")}} {{domxref("DOMString")}} The name of the CSS class assigned to the element.
{{domxref("HTMLElement.contentEditable")}}{{ gecko_minversion_inline("1.9") }} {{domxref("DOMString")}} Gets/sets whether or not the element is editable.
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}{{ gecko_minversion_inline("2") }} {{domxref("Boolean")}} Indicates whether or not the content of the element can be edited.
{{domxref("HTMLElement.dataset")}} {{readonlyInline}} {{domxref("DOMStringMap")}} Allows access to read and write custom data attributes (data-*) of the element.
{{domxref("HTMLElement.dir")}} {{domxref("DOMString")}} Gets/sets the directionality of the element.
{{domxref("HTMLElement.draggable")}} {{domxref("Boolean")}}  
{{domxref("HTMLElement.dropzone")}} {{readonlyInline}} {{domxref("DOMSettableTokenList")}}  
{{domxref("HTMLElement.hidden")}} {{domxref("Boolean")}}  
{{domxref("Element.id")}} {{domxref("DOMString")}} The element's ID.
{{domxref("HTMLElement.itemScope")}} {{experimental_inline}} {{domxref("Boolean")}}  
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}} {{domxref("DOMSettableTokenList")}}  
{{domxref("HTMLElement.itemId")}} {{experimental_inline}} {{domxref("DOMString")}}  
{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}} {{domxref("DOMSettableTokenList")}}  
{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}} {{domxref("DOMSettableTokenList")}}  
{{domxref("HTMLElement.itemValue")}} {{experimental_inline}} any  
{{domxref("HTMLElement.lang")}} {{domxref("DOMString")}} Gets/sets the language of an element's attributes, text, and element contents.
{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}} double The height of an element, relative to the layout.
{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}} double The distance from this element's left border to its offsetParent's left border.
{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}} {{domxref("Element")}} The element from which all offset calculations are currently computed.
{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}} double The distance from this element's top border to its offsetParent's top border.
{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}} double The width of an element, relative to the layout.
{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}} {{domxref("HTMLPropertiesCollection")}}  
{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}} {{domxref("Boolean")}} Controls spell-checking (present on all HTML elements)
{{domxref("HTMLElement.style")}} {{domxref("CSSStyleDeclaration")}} An object representing the declarations of an element's style attributes.
{{domxref("HTMLElement.tabIndex")}} long Gets/sets the position of the element in the tabbing order.
{{domxref("HTMLElement.title")}} {{domxref("DOMString")}} A string that appears in a popup box when mouse is over the element.
{{domxref("HTMLElement.translate")}} {{experimental_inline}} {{domxref("Boolean")}}  

Methods

Inherits methods from its parent, {{domxref("Element")}}.

Name & Arguments Return Description
{{domxref("HTMLElement.blur()")}} void Removes keyboard focus from the currently focused element.
{{domxref("HTMLElement.click()")}} void Sends a mouse click event to the element.
{{domxref("HTMLElement.focus()")}} void Makes the element the current keyboard focus.
{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}} void  

Specifications

Specification Status Comment
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}} {{Spec2('CSSOM View')}} Added the following properties: offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight.
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}} {{Spec2('HTML WHATWG')}} Added the following properties: translate, itemScope, itemType, itemId, itemRef, itemProp, properties, and itemValue.
Added the following method: forceSpellcheck().
Moved the onXYZ attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}} {{Spec2('HTML5 W3C')}} Added the following properties: dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style, and all the onXYZ properties.
Moved the id and className properties to the {{domxref("Element")}} interface.
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}} {{Spec2('DOM2 HTML')}} No change from {{SpecName('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}} {{Spec2('DOM1')}} Initial definition.

Browser compatibility

{{CompatibilityTable}}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{CompatGeckoDesktop("1.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
{{domxref("element.accessKey", "accessKey")}} {{CompatGeckoDesktop("5.0")}} 17.0 {{CompatUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}}(535.10)
{{domxref("element.accessKeyLabel", "accessKeyLabel")}} {{CompatGeckoDesktop("8.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatNo}}{{WebkitBug(72715)}}
{{domxref("element.blur()", "blur()")}} {{CompatGeckoDesktop("5.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
{{domxref("element.click()", "click()")}} {{CompatGeckoDesktop("5.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}}(535.24)
{{domxref("element.dataset", "dataset")}} {{CompatGeckoDesktop("6.0")}} 9.0 {{CompatUnknown}} 11.10 5.1
{{domxref("element.focus()", "focus()")}} {{CompatGeckoDesktop("5.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support

{{CompatGeckoMobile("1.0")}}

{{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
{{domxref("element.accessKey", "accessKey")}} {{CompatGeckoMobile("5.0")}}
{{domxref("element.accessKeyLabel", "accessKeyLabel")}} {{CompatGeckoMobile("8.0")}}
{{domxref("element.blur()", "blur()")}} {{CompatGeckoMobile("5.0")}}
{{domxref("element.click()", "click()")}} {{CompatGeckoMobile("5.0")}}
{{domxref("element.dataset", "dataset")}} {{CompatGeckoMobile("6.0")}}
{{domxref("element.focus()", "focus()")}} {{CompatGeckoMobile("5.0")}}

See also

  • {{domxref("Element")}}

Revision Source

<div>
  {{DomRef}}</div>
<p>The <strong><code>HTMLElement</code></strong> interface represents any <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a> element. Some elements directly implement this interface, other implement it via an interface that inherit it.</p>
<h2 id="Properties">Properties</h2>
<p><em>Inherits properties from its parent, {{domxref("Element")}}.</em></p>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Type</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{domxref("HTMLElement.accessKey")}}</td>
      <td>{{domxref("DOMString")}}</td>
      <td>The access key assigned to the element.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.accessKeyLabel")}}</td>
      <td>{{domxref("DOMString")}}</td>
      <td>A string that represents the element's assigned access key.</td>
    </tr>
    <tr>
      <td>{{domxref("Element.className")}}</td>
      <td>{{domxref("DOMString")}}</td>
      <td>The name of the CSS class assigned to the element.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.contentEditable")}}{{ gecko_minversion_inline("1.9") }}</td>
      <td>{{domxref("DOMString")}}</td>
      <td>Gets/sets whether or not the element is editable.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}{{ gecko_minversion_inline("2") }}</td>
      <td>{{domxref("Boolean")}}</td>
      <td>Indicates whether or not the content of the element can be edited.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</td>
      <td>{{domxref("DOMStringMap")}}</td>
      <td>Allows access to read and write custom data attributes (<code>data-*</code>) of the element.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.dir")}}</td>
      <td>{{domxref("DOMString")}}</td>
      <td>Gets/sets the directionality of the element.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.draggable")}}</td>
      <td>{{domxref("Boolean")}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</td>
      <td>{{domxref("DOMSettableTokenList")}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.hidden")}}</td>
      <td>{{domxref("Boolean")}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{domxref("Element.id")}}</td>
      <td>{{domxref("DOMString")}}</td>
      <td>The element's ID.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</td>
      <td>{{domxref("Boolean")}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</td>
      <td>{{domxref("DOMSettableTokenList")}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</td>
      <td>{{domxref("DOMString")}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</td>
      <td>{{domxref("DOMSettableTokenList")}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</td>
      <td>{{domxref("DOMSettableTokenList")}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</td>
      <td><code>any</code></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.lang")}}</td>
      <td>{{domxref("DOMString")}}</td>
      <td>Gets/sets the language of an element's attributes, text, and element contents.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</td>
      <td><code>double</code></td>
      <td>The height of an element, relative to the layout.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</td>
      <td><code>double</code></td>
      <td>The distance from this element's left border to its <code>offsetParent</code>'s left border.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</td>
      <td>{{domxref("Element")}}</td>
      <td>The element from which all offset calculations are currently computed.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</td>
      <td><code>double</code></td>
      <td>The distance from this element's top border to its <code>offsetParent</code>'s top border.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</td>
      <td><code>double</code></td>
      <td>The width of an element, relative to the layout.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</td>
      <td>{{domxref("HTMLPropertiesCollection")}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</td>
      <td>{{domxref("Boolean")}}</td>
      <td>Controls <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">spell-checking</a> (present on all HTML&nbsp;elements)</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.style")}}</td>
      <td>{{domxref("CSSStyleDeclaration")}}</td>
      <td>An object representing the declarations of an element's style attributes.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.tabIndex")}}</td>
      <td><code>long</code></td>
      <td>Gets/sets the position of the element in the tabbing order.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.title")}}</td>
      <td>{{domxref("DOMString")}}</td>
      <td>A string that appears in a popup box when mouse is over the element.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</td>
      <td>{{domxref("Boolean")}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Methods">Methods</h2>
<p><em>Inherits methods from its parent, {{domxref("Element")}}.</em></p>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Name &amp; Arguments</th>
      <th scope="col">Return</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{domxref("HTMLElement.blur()")}}</td>
      <td><code>void</code></td>
      <td>Removes keyboard focus from the currently focused element.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.click()")}}</td>
      <td><code>void</code></td>
      <td>Sends a mouse click event to the element.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.focus()")}}</td>
      <td><code>void</code></td>
      <td>Makes the element the current keyboard focus.</td>
    </tr>
    <tr>
      <td>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</td>
      <td><code>void</code></td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<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="Browser_compatibility">Browser compatibility</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>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatGeckoDesktop("1.0")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td>{{domxref("element.accessKey", "accessKey")}}</td>
        <td>{{CompatGeckoDesktop("5.0")}}</td>
        <td>17.0</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.10</a>)</td>
      </tr>
      <tr>
        <td>{{domxref("element.accessKeyLabel", "accessKeyLabel")}}</td>
        <td>{{CompatGeckoDesktop("8.0")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatNo}}{{WebkitBug(72715)}}</td>
      </tr>
      <tr>
        <td>{{domxref("element.blur()", "blur()")}}</td>
        <td>{{CompatGeckoDesktop("5.0")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td>{{domxref("element.click()", "click()")}}</td>
        <td>{{CompatGeckoDesktop("5.0")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.24</a>)</td>
      </tr>
      <tr>
        <td>{{domxref("element.dataset", "dataset")}}</td>
        <td>{{CompatGeckoDesktop("6.0")}}</td>
        <td>9.0</td>
        <td>{{CompatUnknown}}</td>
        <td>11.10</td>
        <td>5.1</td>
      </tr>
      <tr>
        <td>{{domxref("element.focus()", "focus()")}}</td>
        <td>{{CompatGeckoDesktop("5.0")}}</td>
        <td>{{CompatUnknown}}</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>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 rowspan="7">{{CompatUnknown}}</td>
        <td rowspan="7">{{CompatUnknown}}</td>
        <td rowspan="7">{{CompatUnknown}}</td>
        <td rowspan="7">{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td>{{domxref("element.accessKey", "accessKey")}}</td>
        <td>{{CompatGeckoMobile("5.0")}}</td>
      </tr>
      <tr>
        <td>{{domxref("element.accessKeyLabel", "accessKeyLabel")}}</td>
        <td>{{CompatGeckoMobile("8.0")}}</td>
      </tr>
      <tr>
        <td>{{domxref("element.blur()", "blur()")}}</td>
        <td>{{CompatGeckoMobile("5.0")}}</td>
      </tr>
      <tr>
        <td>{{domxref("element.click()", "click()")}}</td>
        <td>{{CompatGeckoMobile("5.0")}}</td>
      </tr>
      <tr>
        <td>{{domxref("element.dataset", "dataset")}}</td>
        <td>{{CompatGeckoMobile("6.0")}}</td>
      </tr>
      <tr>
        <td>{{domxref("element.focus()", "focus()")}}</td>
        <td>{{CompatGeckoMobile("5.0")}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{domxref("Element")}}</li>
</ul>
Revert to this revision