The HTMLElement
interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.
Properties
Inherits properties from its parent, Element
, and implements those from DocumentAndElementEventHandlers
, ElementCSSInlineStyle
, GlobalEventHandlers
, HTMLOrForeignElement
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 oftrue
means the element is editable and a value offalse
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
. HTMLOrForeignElement.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.enterkeyhint
- Is a
DOMString
defining what action label (or icon) to present for the enter key on virtual keyboards. HTMLElement.hidden
- Is a
Boolean
indicating if the element is hidden or not. HTMLElement.inert
- Is a
Boolean
indicating whether the user agent must act as though the given node is absent for the purposes of user interaction events, in-page text searches ("find in page"), and text selection. HTMLElement.innerText
- Represents the "rendered" text content of a node and its descendants. As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.
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.noModule
- Is a
Boolean
indicating whether an import script can be executed in user agents that support module scripts. HTMLOrForeignElement.nonce
- Returns the cryptographic number used once that is used by Content Security Policy to determine whether a given fetch will be allowed to proceed.
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. HTMLOrForeignElement.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 DocumentAndElementEventHandlers
, 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
, and implements those from DocumentAndElementEventHandlers
, ElementCSSInlineStyle
, GlobalEventHandlers
, HTMLOrForeignElement
and TouchEventHandlers
.
HTMLElement.attachInternals()
- Attaches an
ElementInternals
instance to the custom element. HTMLOrForeignElement.blur()
- Removes keyboard focus from the currently focused element.
HTMLElement.click()
- Sends a mouse click event to the element.
HTMLOrForeignElement.focus()
- Makes the element the current keyboard focus.
HTMLElement.forceSpellCheck()
- Runs the spell checker on the element's contents.
Events
Listen to these events using addEventListener()
or by assigning an event listener to the oneventname
property of this interface.
Animation events
animationcancel
- Fired when an animation unexpectedly aborts.
Also available via theonanimationcancel
property. animationend
- Fired when an animation has completed normally.
Also available via theonanimationend
property. animationiteration
- Fired when an animation iteration has completed.
Also available via theonanimationiteration
property. animationstart
- Fired when an animation starts.
Also available via theonanimationstart
property.
Input events
beforeinput
- Fired when the value of an
<input>
,<select>
, or<textarea>
element is about to be modified. input
- Fired when the
value
of an<input>
,<select>
, or<textarea>
element has been changed.
Also available via theoninput
property. change
- Fired when the
value
of an<input>
,<select>
, or<textarea>
element has been changed and committed by the user. Unlike theinput
event, thechange
event is not necessarily fired for each alteration to an element'svalue
.
Pointer events
gotpointercapture
- Fired when an element captures a pointer using
setPointerCapture()
.
Also available via theongotpointercapture
property. lostpointercapture
- Fired when a captured pointer is released.
Also available via theonlostpointercapture
property. pointercancel
- Fired when a pointer event is canceled.
Also available via theonpointercancel
property. pointerdown
- Fired when a pointer becomes active.
Also available via theonpointerdown
property. pointerenter
- Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants.
Also available via theonpointerenter
property. pointerleave
- Fired when a pointer is moved out of the hit test boundaries of an element.
Also available via theonpointerleave
property. pointermove
- Fired when a pointer changes coordinates.
Also available via theonpointermove
property. pointerout
- Fired when a pointer is moved out of the hit test boundaries of an element (among other reasons).
Also available via theonpointerout
property. pointerover
- Fired when a pointer is moved into an element's hit test boundaries.
Also available via theonpointerover
property. pointerup
- Fired when a pointer is no longer active.
Also available via theonpointerup
property.
Transition events
transitioncancel
- Fired when a CSS transition is canceled.
Also available via theontransitioncancel
property. transitionend
- Fired when a CSS transition has completed.
Also available via theontransitionend
property. transitionrun
- Fired when a CSS transition is first created.
Also available via theontransitionrun
property. transitionstart
- Fired when a CSS transition has actually started.
Also available via theontransitionstart
property.
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
BCD tables only load in the browser