HTMLElement
===========

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

HTMLElementInstance 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.attributeStyleMap` Read only 

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

`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.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).

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.

### Popover events

`beforetoggle`

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

`toggle`

Fired when the element is a popover, just after it is hidden or shown.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # htmlelement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Element`