web api interface
HTMLElement
The HTMLElement interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.
Instance properties
Also inherits properties from its parent, Element.
accessKey- : A string representing the access key assigned to the element.
accessKeyLabelRead only- : Returns a string containing the element’s assigned access key.
anchorElementRead only Experimental- : Returns a reference to the element’s anchor element, or
nullif it doesn’t have one.
- : Returns a reference to the element’s anchor element, or
attributeStyleMapRead only- : A
StylePropertyMaprepresenting the declarations of the element’sstyleattribute.
- : A
autocapitalize- : A string that represents the element’s capitalization behavior for user input. Valid values are:
none,off,on,characters,words,sentences.
- : A string that represents the element’s capitalization behavior for user input. Valid values are:
autofocusautocorrect- : A boolean that represents whether or not text input by a user should be automatically corrected.
This reflects the
autocorrectHTML global attribute.
- : A boolean that represents whether or not text input by a user should be automatically corrected.
This reflects the
contentEditable- : A string, where a value of
truemeans the element is editable and a value offalsemeans it isn’t.
- : A string, where a value of
datasetRead only- : Returns a
DOMStringMapwith which script can read and write the element’s custom data attributes (data-*).
- : Returns a
dir- : A string, reflecting the
dirglobal attribute, representing the directionality of the element. Possible values are"ltr","rtl", and"auto".
- : A string, reflecting the
draggable- : A boolean value indicating if the element can be dragged.
editContextExperimental- : Returns the
EditContextassociated with the element, ornullif there isn’t one.
- : Returns the
enterKeyHint- : A string defining what action label (or icon) to present for the enter key on virtual keyboards.
hidden- : A string or boolean value reflecting the value of the element’s
hiddenattribute.
- : A string or boolean value reflecting the value of the element’s
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.
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.
- : 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
inputMode- : A string value reflecting the value of the element’s
inputmodeattribute.
- : A string value reflecting the value of the element’s
isContentEditableRead only- : Returns a boolean value indicating whether or not the content of the element can be edited.
lang- : A string representing the language of an element’s attributes, text, and element contents.
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.
offsetHeightRead only- : Returns a
doublecontaining the height of an element, relative to the layout.
- : Returns a
offsetLeftRead only- : Returns a
double, the distance from this element’s left border to itsoffsetParent’s left border.
- : Returns a
offsetParentRead only- : An
Elementthat is the element from which all offset calculations are currently computed.
- : An
offsetTopRead only- : Returns a
double, the distance from this element’s top border to itsoffsetParent’s top border.
- : Returns a
offsetWidthRead only- : Returns a
doublecontaining the width of an element, relative to the layout.
- : Returns a
outerText- : Represents the rendered text content of a node and its descendants.
As a getter, it is the same as
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.
- : Represents the rendered text content of a node and its descendants.
As a getter, it is the same as
popover- : Gets and sets an element’s popover state via JavaScript (
"auto","hint", or"manual"), and can be used for feature detection. Reflects the value of thepopoverglobal HTML attribute.
- : Gets and sets an element’s popover state via JavaScript (
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.
style- : A
CSSStyleDeclarationrepresenting the declarations of the element’sstyleattribute.
- : A
tabIndex- : A
longrepresenting the position of the element in the tabbing order.
- : A
title- : A string containing the text that appears in a popup box when mouse is over the element.
translate- : A boolean value representing the translation.
virtualKeyboardPolicyExperimental- : 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 thecontenteditableattribute set).
- : 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
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.
attachInternals()- : Returns an
ElementInternalsobject, and enables a custom element to participate in HTML forms.
- : Returns an
blur()- : Removes keyboard focus from the currently focused element.
click()- : Sends a mouse click event to the element.
focus()- : Makes the element the current keyboard focus.
hidePopover()- : Hides a popover element by removing it from the top layer and styling it with
display: none.
- : Hides a popover element by removing it from the top layer and styling it with
showPopover()- : Shows a popover element by adding it to the top layer and removing
display: none;from its styles.
- : Shows a popover element by adding it to the top layer and removing
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.
change- : Fired when the
valueof an<input>,<select>, or<textarea>element has been changed and committed by the user. Unlike theinputevent, thechangeevent is not necessarily fired for each alteration to an element’svalue.
- : Fired when the
command- : Fires on an element that is controlled via a
buttonwith validcommandForElementandcommandvalues, whenever the button is interacted with (e.g., it is clicked).
- : Fires on an element that is controlled via a
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.
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).
- : 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
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.
Interest invoker events
interestExperimental- : Fired on the target element of an interest invoker when interest is shown, allowing code to be run in response.
loseinterestExperimental- : Fired on the target element of an interest invoker when interest is lost, allowing code to be run in response.
Toggle events
Specifications
SpecificationsStandards references are available on the canonical MDN page.
Browser compatibility
Browser compatibilityCompatibility data is available on the canonical MDN page.