{{ APIRef("HTML DOM") }}
The HTMLElement
interface represents any HTML element. Some elements directly implement this interface, others implement it via an interface that inherits it.
Properties
Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.
- {{domxref("HTMLElement.accessKey")}}
- Is a {{domxref("DOMString")}} representing the access key assigned to the element.
- {{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}
- Returns a {{domxref("DOMString")}} containing the element's assigned access key.
- {{domxref("HTMLElement.contentEditable")}}
- Is a {{domxref("DOMString")}}, where a value of
"true"
means the element is editable and a value of"false"
means it isn't. - {{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}
- Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.
- {{domxref("HTMLElement.contextMenu")}}
- Is a {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be null
- {{domxref("HTMLElement.dataset")}} {{readonlyInline}}
- Returns a {{domxref("DOMStringMap")}} that allows access to read and write the element custom data attributes (
data-*
) . - {{domxref("HTMLElement.dir")}}
- Is a {{domxref("DOMString")}}, reflecting the
dir
global attribute, representing the directionality of the element. Possible values are"ltr"
,"rtl"
, and"auto"
. - {{domxref("HTMLElement.draggable")}}
- Is a {{jsxref("Boolean")}} indicating if the element can be dragged.
- {{domxref("HTMLElement.dropzone")}} {{readonlyInline}}
- Returns a {{domxref("DOMSettableTokenList")}} reflecting the
dropzone
global attribute and describing the behavior of the element regarding a drop operation. - {{domxref("HTMLElement.hidden")}}
- Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.
- {{domxref("HTMLElement.itemScope")}} {{experimental_inline}}
- Is a {{jsxref("Boolean")}} representing the item scope.
- {{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}
- Returns a {{domxref("DOMSettableTokenList")}}…
- {{domxref("HTMLElement.itemId")}} {{experimental_inline}}
- Is a {{domxref("DOMString")}} representing the item ID.
- {{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}
- Returns a {{domxref("DOMSettableTokenList")}}…
- {{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}
- Returns a {{domxref("DOMSettableTokenList")}}…
- {{domxref("HTMLElement.itemValue")}} {{experimental_inline}}
- Returns an {{jsxref("Object")}} representing the item value.
- {{domxref("HTMLElement.lang")}}
- Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.
- {{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}
- Returns a
double
containing the height of an element, relative to the layout. - {{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}
- Returns a
double
, the distance from this element's left border to itsoffsetParent
's left border. - {{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}
- Returns an {{domxref("Element")}} that is the element from which all offset calculations are currently computed.
- {{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}
- Returns a
double
, the distance from this element's top border to itsoffsetParent
's top border. - {{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}
- Returns a
double
containing the width of an element, relative to the layout. - {{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}
- Returns an {{domxref("HTMLPropertiesCollection")}}…
- {{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}
- Is a {{jsxref("Boolean")}} that controls spell-checking. It is present on all HTML elements, though it doesn't have an effect on all of them.
- {{domxref("HTMLElement.style")}}
- Is {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.
- {{domxref("HTMLElement.tabIndex")}}
- Is a
long
representing the position of the element in the tabbing order. - {{domxref("HTMLElement.title")}}
- Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.
- {{domxref("HTMLElement.translate")}} {{experimental_inline}}
- Is a {{jsxref("Boolean")}} representing the translation.
Event handlers
Most events properties, of the form onXYZ
, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}}, implemented by HTMLElement
. A few more are specific to HTMLElement
.
- {{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}
- Returns the event handling code for the
copy
event ({{bug("280959")}}). - {{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}
- Returns the event handling code for the
cut
event ({{bug("280959")}}). - {{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}
- Returns the event handling code for the
paste
event ({{bug("280959")}}). - {{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}
- Returns the event handling code for the {{event("touchstart")}} event.
- {{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}
- Returns the event handling code for the {{event("touchend")}} event.
- {{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}
- Returns the event handling code for the {{event("touchmove")}} event.
- {{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}
- Returns the event handling code for the {{event("touchenter")}} event.
- {{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}
- Returns the event handling code for the {{event("touchleave")}} event.
- {{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}
- Returns the event handling code for the {{event("touchcancel")}} event.
Methods
Inherits methods from its parent, {{domxref("Element")}}.
- {{domxref("HTMLElement.blur()")}}
- Removes keyboard focus from the currently focused element.
- {{domxref("HTMLElement.click()")}}
- Sends a mouse click event to the element.
- {{domxref("HTMLElement.focus()")}}
- Makes the element the current keyboard focus.
- {{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}
- Makes the spell checker runs on the element.
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("HTMLElement.accessKey", "accessKey")}} | {{CompatGeckoDesktop("5.0")}} | 17.0 | {{CompatUnknown}} | {{CompatUnknown}} | 6.0 |
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}} | {{CompatGeckoDesktop("8.0")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatNo}}{{WebkitBug(72715)}} |
{{domxref("HTMLElement.blur()", "blur()")}} | {{CompatGeckoDesktop("5.0")}} | {{CompatUnknown}} | 9 | {{CompatUnknown}} | {{CompatUnknown}} |
{{domxref("HTMLElement.click()", "click()")}} | {{CompatGeckoDesktop("5.0")}} | {{CompatUnknown}}9 | 9 | {{CompatUnknown}} | 6.0 |
{{domxref("HTMLElement.dataset", "dataset")}} | {{CompatGeckoDesktop("6.0")}} | 8 | 11 | 11.10 | 5.1 |
{{domxref("HTMLElement.focus()", "focus()")}} | {{CompatGeckoDesktop("5.0")}} | {{CompatUnknown}} | 9 | {{CompatUnknown}} | {{CompatUnknown}} |
{{domxref("HTMLElement.contentEditable", "contentEditable")}} | {{CompatGeckoDesktop("1.9")}} | {{CompatVersionUnknown}} | 5.5 | 9 | {{CompatVersionUnknown}} |
{{domxref("HTMLElement.spellcheck", "spellcheck")}} | {{CompatGeckoDesktop("1.8.1")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
{{domxref("HTMLElement.style", "style")}} | {{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}}) | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
{{domxref("HTMLElement.draggable", "draggable")}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | 12.0 | {{CompatUnknown}} |
{{domxref("HTMLElement.dropzone", "dropzone")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | 12.0 | {{CompatNo}} |
{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
{{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}} | {{CompatGeckoDesktop("6.0")}} | {{CompatNo}} | {{CompatNo}} | 11.60 (Removed in Opera 15) |
{{CompatNo}} |
{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatVersionUnknown}} |
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}} | {{CompatGeckoDesktop("1.9")}} | {{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("HTMLElement.accessKey", "accessKey")}} | {{CompatGeckoMobile("5.0")}} | ||||
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}} | {{CompatGeckoMobile("8.0")}} | ||||
{{domxref("HTMLElement.blur()", "blur()")}} | {{CompatGeckoMobile("5.0")}} | ||||
{{domxref("HTMLElement.click()", "click()")}} | {{CompatGeckoMobile("5.0")}} | ||||
{{domxref("HTMLElement.dataset", "dataset")}} | {{CompatGeckoMobile("6.0")}} | ||||
{{domxref("HTMLElement.focus()", "focus()")}} | {{CompatGeckoMobile("5.0")}} | ||||
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}} | {{CompatGeckoMobile("1.9")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
See also
- {{domxref("Element")}}