The HTMLElement
interface represents any HTML element. Some elements directly implement this interface, others implement it via an interface that inherits it.
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
Properties
Inherits properties from its parent, Element
, and implements those from GlobalEventHandlers
and TouchEventHandlers
.
HTMLElement.accessKey
- Is a
DOMString
representing the access key assigned to the element. HTMLElement.accessKeyLabel
Read only- Returns a
DOMString
containing the element's assigned access key. HTMLElement.contentEditable
- Is a
DOMString
, where a value of"true"
means the element is editable and a value of"false"
means it isn't. HTMLElement.isContentEditable
Read only- Returns a
Boolean
that indicates whether or not the content of the element can be edited. HTMLElement.contextMenu
- Is a
HTMLMenuElement
representing the contextual menu associated with the element. It may benull
. HTMLElement.dataset
Read only- Returns a
DOMStringMap
with which script can read and write the element's custom data attributes (data-*
) . HTMLElement.dir
- Is a
DOMString
, reflecting thedir
global attribute, representing the directionality of the element. Possible values are"ltr"
,"rtl"
, and"auto"
. HTMLElement.draggable
- Is a
Boolean
indicating if the element can be dragged. HTMLElement.dropzone
Read only- Returns a
DOMSettableTokenList
reflecting thedropzone
global attribute and describing the behavior of the element regarding a drop operation. HTMLElement.hidden
- Is a
Boolean
indicating if the element is hidden or not. HTMLElement.itemScope
- Is a
Boolean
representing the item scope. HTMLElement.itemType
Read only- Returns a
DOMSettableTokenList
… HTMLElement.itemId
- Is a
DOMString
representing the item ID. HTMLElement.itemRef
Read only- Returns a
DOMSettableTokenList
… HTMLElement.itemProp
Read only- Returns a
DOMSettableTokenList
… HTMLElement.itemValue
- Returns a
Object
representing the item value. HTMLElement.lang
- Is a
DOMString
representing the language of an element's attributes, text, and element contents. HTMLElement.offsetHeight
Read only- Returns a
double
containing the height of an element, relative to the layout. HTMLElement.offsetLeft
Read only- Returns a
double
, the distance from this element's left border to itsoffsetParent
's left border. HTMLElement.offsetParent
Read only- Returns a
Element
that is the element from which all offset calculations are currently computed. HTMLElement.offsetTop
Read only- Returns a
double
, the distance from this element's top border to itsoffsetParent
's top border. HTMLElement.offsetWidth
Read only- Returns a
double
containing the width of an element, relative to the layout. HTMLElement.properties
Read only- Returns a
HTMLPropertiesCollection
… HTMLElement.spellcheck
- Is a
Boolean
that controls spell-checking. It is present on all HTML elements, though it doesn't have an effect on all of them. HTMLElement.style
- Is a
CSSStyleDeclaration
, an object representing the declarations of an element's style attributes. HTMLElement.tabIndex
- Is a
long
representing the position of the element in the tabbing order. HTMLElement.title
- Is a
DOMString
containing the text that appears in a popup box when mouse is over the element. HTMLElement.translate
- Is a
Boolean
representing the translation.
Event handlers
Most event handler properties, of the form onXYZ
, are defined on the GlobalEventHandlers
or TouchEventHandlers
interfaces and implemented by HTMLElement
. In addition, the following handlers are specific to HTMLElement
.
HTMLElement.oncopy
- Returns the event handling code for the
copy
event (bug 280959). HTMLElement.oncut
- Returns the event handling code for the
cut
event (bug 280959). HTMLElement.onpaste
- Returns the event handling code for the
paste
event (bug 280959). TouchEventHandlers.ontouchstart
- Returns the event handling code for the
touchstart
event. TouchEventHandlers.ontouchend
- Returns the event handling code for the
touchend
event. TouchEventHandlers.ontouchmove
- Returns the event handling code for the
touchmove
event. TouchEventHandlers.ontouchenter
- Returns the event handling code for the
touchenter
event. TouchEventHandlers.ontouchleave
- Returns the event handling code for the
touchleave
event. TouchEventHandlers.ontouchcancel
- Returns the event handling code for the
touchcancel
event.
Methods
Inherits methods from its parent, Element
.
HTMLElement.blur()
- Removes keyboard focus from the currently focused element.
HTMLElement.click()
- Sends a mouse click event to the element.
HTMLElement.focus()
- Makes the element the current keyboard focus.
HTMLElement.forceSpellCheck()
- Runs the spell checker on the element's contents.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Object Model (CSSOM) View Module The definition of 'HTMLElement' in that specification. |
Working Draft | Added the following properties: offsetParent , offsetTop , offsetLeft , offsetWidth , and offsetHeight . |
HTML Living Standard The definition of 'HTMLElement' in that specification. |
Living Standard | Added the following properties: translate , itemScope , itemType , itemId , itemRef , itemProp , properties , and itemValue .Added the following method: forceSpellcheck() .Moved the onXYZ attributes to the GlobalEventHandlers interface and added an inheritance from it. |
HTML5 The definition of 'HTMLElement' in that specification. |
Recommendation | 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 Element interface. |
Document Object Model (DOM) Level 2 HTML Specification The definition of 'HTMLElement' in that specification. |
Obsolete | No change from Document Object Model (DOM) Level 2 HTML Specification |
Document Object Model (DOM) Level 1 Specification The definition of 'HTMLElement' in that specification. |
Obsolete | Initial definition. |
Browser compatibility
Feature | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 (1.7 or earlier) | ? | (Yes) | ? | ? | ? |
accessKey |
5.0 (5.0) | 17.0 | (Yes) | ? | ? | 6.0 |
accessKeyLabel |
8.0 (8.0) | ? | No support | ? | ? | No supportWebKit bug 72715 |
blur() |
5.0 (5.0) | ? | (Yes) | 9 | ? | ? |
click() |
5.0 (5.0) | ?9 | (Yes) | 9 | ? | 6.0 |
dataset |
6.0 (6.0) | 8 | (Yes) | 11 | 11.10 | 5.1 |
focus() |
5.0 (5.0) | ? | (Yes) | 9 | ? | ? |
contentEditable |
3.0 (1.9) | (Yes) | (Yes) | 5.5 | 9 | (Yes) |
spellcheck |
2.0 (1.8.1) | ? | (Yes) | ? | ? | ? |
style |
(Yes) (returns a CSS2Properties , rather than a CSSStyleDeclaration ) |
(Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
forceSpellCheck() |
No support | No support | No support | No support | No support | No support |
draggable |
(Yes) | ? | (Yes) | ? | 12.0 | ? |
dropzone |
No support | No support | No support | No support | 12.0 | No support |
offsetLeft , offsetTop , offsetParent , offsetHeight and offsetWidth |
(Yes) | ? | (Yes) | (Yes) | ? | ? |
translate |
No support | No support | No support | No support | No support | No support |
itemScope , itemType , itemRef , itemId , itemProp , and itemValue |
6.0 (6.0) | No support | No support | No support | 11.60 (Removed in Opera 15) |
No support |
properties |
(Yes) | ? | No support | ? | ? | ? |
HTMLElement.ontouchstart , HTMLElement.ontouchend , HTMLElement.ontouchmove , HTMLElement.ontouchenter , HTMLElement.ontouchleave , and HTMLElement.ontouchcancel |
(Yes) | (Yes) | No support | No support | ? | (Yes) |
HTMLElement.oncopy , HTMLElement.oncut , and HTMLElement.onpaste |
3.0 (1.9) | ? | (Yes) | ? | ? | ? |
Feature | Firefox Mobile (Gecko) | Android | Edge | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support |
1.0 (1.0) |
? | (Yes) | ? | ? | ? |
accessKey |
5.0 (5.0) | ? | (Yes) | ? | ? | ? |
accessKeyLabel |
8.0 (8.0) | ? | No support | ? | ? | ? |
blur() |
5.0 (5.0) | ? | (Yes) | ? | ? | ? |
click() |
5.0 (5.0) | ? | (Yes) | ? | ? | ? |
dataset |
6.0 (6.0) | ? | (Yes) | ? | ? | ? |
focus() |
5.0 (5.0) | ? | (Yes) | ? | ? | ? |
HTMLElement.oncopy , HTMLElement.oncut , and HTMLElement.onpaste |
1.0 (1.9) | ? | (Yes) | ? | ? | ? |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
chrisdavidmills,
trusktr,
Sheppy,
erikadoyle,
slimsag,
stevenmcdonald,
CaitlinWeb,
fscholz,
AlexKVal,
mako,
teoli,
kscarfone,
ethertank,
tregagnon,
myakura,
trevorh,
chriseverson,
Ms2ger,
Brettz9
Last updated by:
chrisdavidmills,