HTMLElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

The HTMLElement interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.

EventTarget Node Element HTMLElement

Instance properties

Also inherits properties from its parent, Element.

HTMLElement.accessKey

A string representing the access key assigned to the element.

HTMLElement.accessKeyLabel Read only

Returns a string containing the element's assigned access key.

HTMLElement.anchorElement Read only  Non-standard Experimental

Returns a reference to the element's anchor element, or null if it doesn't have one.

HTMLElement.attributeStyleMap Read only

A StylePropertyMap representing the declarations of the element's style attribute.

HTMLElement.autocapitalize

A string that represents the element's capitalization behavior for user input. Valid values are: none, off, on, characters, words, sentences.

HTMLElement.autofocus

A boolean value reflecting the autofocus HTML global attribute, which indicates whether the control should be focused when the page loads, or when dialog or popover become shown if specified in an element inside <dialog> elements or elements whose popover attribute is set.

HTMLElement.autocorrect

A boolean that represents whether or not text input by a user should be automatically corrected. This reflects the autocorrect HTML global attribute.

HTMLElement.contentEditable

A string, where a value of true means the element is editable and a value of false means it isn't.

HTMLElement.dataset Read only

Returns a DOMStringMap with which script can read and write the element's custom data attributes (data-*).

HTMLElement.dir

A string, reflecting the dir global attribute, representing the directionality of the element. Possible values are "ltr", "rtl", and "auto".

HTMLElement.draggable

A boolean value indicating if the element can be dragged.

HTMLElement.editContext Experimental

Returns the EditContext associated with the element, or null if there isn't one.

HTMLElement.enterKeyHint

A string defining what action label (or icon) to present for the enter key on virtual keyboards.

HTMLElement.hidden

A string or boolean value reflecting the value of the element's hidden attribute.

HTMLElement.inert

A boolean value 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. As a setter, it replaces the content inside the selected element, converting any line breaks into <br> elements.

HTMLElement.inputMode

A string value reflecting the value of the element's inputmode attribute.

HTMLElement.isContentEditable Read only

Returns a boolean value indicating whether or not the content of the element can be edited.

HTMLElement.lang

A string representing the language of an element's attributes, text, and element contents.

HTMLElement.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 its offsetParent's left border.

HTMLElement.offsetParent Read only

An 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 its offsetParent's top border.

HTMLElement.offsetWidth Read only

Returns a double containing the width of an element, relative to the layout.

HTMLElement.outerText

Represents the rendered text content of a node and its descendants. As a getter, it is the same as HTMLElement.innerText (it represents the rendered text content of an element and its descendants). As a setter, it replaces the selected node and its contents with the given value, converting any line breaks into <br> elements.

HTMLElement.popover

Gets and sets an element's popover state via JavaScript ("auto" or "manual"), and can be used for feature detection. Reflects the value of the popover global HTML attribute.

HTMLElement.spellcheck

A boolean value that controls the spell-checking hint. It is available on all HTML elements, though it doesn't affect all of them.

HTMLElement.style

A CSSStyleDeclaration representing the declarations of the element's style attribute.

HTMLElement.tabIndex

A long representing the position of the element in the tabbing order.

HTMLElement.title

A string containing the text that appears in a popup box when mouse is over the element.

HTMLElement.translate

A boolean value representing the translation.

HTMLElement.virtualKeyboardPolicy Experimental

A string indicating the on-screen virtual keyboard behavior on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available, if the element's content is editable (for example, it is an <input> or <textarea> element, or an element with the contenteditable attribute set).

HTMLElement.writingSuggestions

A string indicating if browser-provided writing suggestions should be enabled under the scope of the element or not.

Instance methods

Also inherits methods from its parent, Element.

HTMLElement.attachInternals()

Returns an ElementInternals object, and enables a custom element to participate in HTML forms.

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.hidePopover()

Hides a popover element by removing it from the top layer and styling it with display: none.

HTMLElement.showPopover()

Shows a popover element by adding it to the top layer and removing display: none; from its styles.

HTMLElement.togglePopover()

Toggles a popover element between the hidden and showing states.

Events

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

Also, inherits events from its parent, Element.

cancel

Fired for <input> and <dialog> elements when the user cancels the currently open dialog by closing it with the Esc key.

change

Fired when the value of an <input>, <select>, or <textarea> element has been changed and committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.

error

Fired when a resource failed to load, or can't be used.

load

Fires for elements containing a resource when the resource has successfully loaded.

Clipboard events

copy

Fired when the user initiates a copy action through the browser's user interface.

cut

Fired when the user initiates a cut action through the browser's user interface.

paste

Fired when the user initiates a paste action through the browser's user interface.

Drag & drop events

drag

This event is fired when an element or text selection is being dragged.

dragend

This event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).

dragenter

This event is fired when a dragged element or text selection enters a valid drop target.

dragleave

This event is fired when a dragged element or text selection leaves a valid drop target.

dragover

This event is fired continuously when an element or text selection is being dragged and the mouse pointer is over a valid drop target (every 50 ms WHEN mouse is not moving ELSE much faster between 5 ms (slow movement) and 1ms (fast movement) approximately. This firing pattern is different than mouseover ).

dragstart

This event is fired when the user starts dragging an element or text selection.

drop

This event is fired when an element or text selection is dropped on a valid drop target.

Toggle events

beforetoggle

Fired when the element is a popover or <dialog>, before it is hidden or shown.

toggle

Fired when the element is a popover, <dialog>, or <details> element, just after it is hidden or shown.

Specifications

Specification
HTML
# htmlelement

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
HTMLElement
accessKey
accessKeyLabel
anchorElement
ExperimentalNon-standard
attachInternals
attributeStyleMap
autocapitalize
autocorrect
autofocus
beforetoggle event
beforetoggle event fires at dialog elements
beforetoggle event fires at popover elements
blur
change event
click
command event
Experimental
contentEditable
plaintext-only as a value
dataset
dir
drag event
dragend event
dragenter event
dragexit event
DeprecatedNon-standard
draggable
dragleave event
dragover event
dragstart event
drop event
editContext
Experimental
enterKeyHint
error event
focus
options.focusVisible parameter
Experimental
options.preventScroll parameter
hidden
hidePopover
inert
Element is ignored for the purposes of find-in-page.
innerText
inputMode
isContentEditable
lang
nonce
offsetHeight
offsetLeft
offsetParent
offsetTop
offsetWidth
outerText
popover
hint value
Experimental
showPopover
spellcheck
style
tabIndex
title
togglePopover
Returns true or false
toggle event
toggle event fires at details elements
toggle event fires at dialog elements
toggle event fires at popover elements
translate
virtualKeyboardPolicy
Experimental
writingSuggestions

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

See also