recursal/MDN huggingface dataset:
HTMLElement: spellcheck property
================================

The **`spellcheck`** property of the `HTMLElement` interface represents a boolean value that controls the spell-checking hint. It is available on all HTML elements, though it doesn't affect all of them.

It reflects the value of the `spellcheck` HTML global attribute.

Value
-----

A boolean value that is `true` if the spelling and grammar of the text content in the element may be checked, `false` otherwise.

Examples
--------

The following example shows how to control the spell-checking hint via script:


```html
<div>
  <span id="sc-label">The spelling and grammar may be checked: </span>
  <span id="sc-element" contenteditable="true" spellcheck="true">test</span>
</div>
<input id="sc-controller" type="checkbox" checked />Enable spelling and grammar
check
```



```js
const label = document.getElementById("sc-label");
const element = document.getElementById("sc-element");
const controller = document.getElementById("sc-controller");

controller.addEventListener("change", (e) => {
  if (controller.checked) {
    element.spellcheck = true;
    label.innerText = "The spelling and grammar may be checked: ";
  } else {
    element.spellcheck = false;
    label.innerText = "The spelling and grammar may not be checked: ";
  }
});
```


Note that you must enable the browser setting to check spelling and grammar.

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

| Specification |
| --- |
| HTML Standard # dom-spellcheck-dev |

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

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

See also
--------

* `spellcheck` HTML global attribute
HTMLElement: popover property
=============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`popover`** property of the `HTMLElement` interface gets and sets an element's popover state via JavaScript (`"auto"` or `"manual"`), and can be used for feature detection.

It reflects the value of the `popover` global HTML attribute.

Value
-----

An enumerated value; possible values are:

* `"auto"`: In auto state:
    + The popover can be "light dismissed" — this means that you can hide the popover by clicking outside it or pressing the `Esc` key.
    + Usually, only one popover can be shown at a time — showing a second popover when one is already shown will hide the first one. The exception to this rule is when you have nested auto popovers. See Nested popovers for more details.
* `"manual"`: In manual state:
    + The popover cannot be "light dismissed", although declarative show/hide/toggle buttons will still work.
    + Multiple independent popovers can be shown at a time.
Examples
--------

### Feature detection

You can use the `popover` attribute to feature detect the Popover API:


```js
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}
```

### Setting up a popover programmatically


```js
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

const popoverSupported = supportsPopover();

if (popoverSupported) {
  popover.popover = "auto";
  toggleBtn.popoverTargetElement = popover;
  toggleBtn.popoverTargetAction = "toggle";
} else {
  console.log("Popover API not supported.");
}
```

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

| Specification |
| --- |
| HTML Standard # dom-popover |

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

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

See also
--------

* `popover` HTML global attribute
* Popover API
HTMLElement: draggable property
===============================

The **`draggable`** property of the `HTMLElement` interface gets and sets a `Boolean` primitive indicating if the element is draggable.

It reflects the value of the `draggable` HTML global attribute.

Value
-----

A `Boolean` primitive that is `true` if the element is draggable, `false` otherwise.

Examples
--------

The following example shows how to enable or disable the element's ability to drag via script:


```js
const draggableElement = document.querySelector(".draggable-element");
const notDraggableElement = document.querySelector(".not-draggable-element");

// enable the target element's ability to drag
if (!draggableElement.draggable) {
  draggableElement.draggable = true;
}

// disable the target element's ability to drag
if (notDraggableElement.draggable) {
  notDraggableElement.draggable = false;
}
```

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

| Specification |
| --- |
| HTML Standard # dom-draggable |

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

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

See also
--------

* `draggable` HTML global attribute
* HTML Drag and Drop API overview
HTMLElement: dragleave event
============================

The `dragleave` event is fired when a dragged element or text selection leaves a valid drop target.

This event is not cancelable and may bubble up to the `Document` and `Window` objects.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("dragleave", (event) => {});

ondragleave = (event) => {};
```

Event type
----------

A `DragEvent`. Inherits from `Event`.

Event

UIEvent

MouseEvent

DragEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`DragEvent.dataTransfer` Read only 

The data that is transferred during a drag-and-drop interaction.

Examples
--------

### Resetting drop zone styles on dragleave

In this example, we have a draggable element inside a container. Try grabbing the element, dragging it over the other container, and releasing it.

We give the other container a purple background while the draggable element is over to signal that it could be dropped onto the container. We listen for the `dragleave` event to reset the container background when dragging the draggable element off the container.

However, in this partial example, we haven't implemented dropping: for a complete example of drag and drop, see the page for the `drag` event.

#### HTML


```html
<div class="dropzone">
  <div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone" id="droptarget"></div>
```


#### CSS


```css
body {
  /\* Prevent the user from selecting text in the example \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}

.dropzone.dragover {
  background-color: purple;
}
```


#### JavaScript


```js
const target = document.getElementById("droptarget");
target.addEventListener("dragenter", (event) => {
  // highlight potential drop target when the draggable element enters it
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

target.addEventListener("dragleave", (event) => {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});
```


#### Result

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

| Specification |
| --- |
| HTML Standard # ix-handler-ondragleave |
| HTML Standard # event-dnd-dragleave |

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

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

See also
--------

* Other drag and drop events:
    + `drag`
    + `dragstart`
    + `dragend`
    + `dragover`
    + `dragenter`
    + `drop`
HTMLElement: click() method
===========================

 The **`HTMLElement.click()`** method simulates a mouse click on
 an element.

 When `click()` is used with supported elements (such as an
 `<input>`), it fires the element's click event. This event then bubbles
 up to elements higher in the document tree (or event chain) and fires their click
 events.

Syntax
------


```js
click()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

Simulate a mouse-click when moving the mouse pointer over a checkbox:

### HTML


```html
<form>
  <input
 type="checkbox"
 id="myCheck"
 onmouseover="myFunction()"
 onclick="alert('click event occurred')" />
</form>
```

### JavaScript


```js
// On mouse-over, execute myFunction
function myFunction() {
  document.getElementById("myCheck").click();
}
```

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

| Specification |
| --- |
| HTML Standard # dom-click-dev |

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

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

See also
--------

* Related event handlers
    + `Element.onclick`
    + `Element.ondblclick`
    + `Element.onauxclick`
HTMLElement: offsetLeft property
================================

The **`HTMLElement.offsetLeft`** read-only property returns the number of pixels that the *upper left corner* of the current element is offset to the left within the `HTMLElement.offsetParent` node.

For block-level elements, `offsetTop`, `offsetLeft`, `offsetWidth`, and `offsetHeight` describe the border box of an element relative to the `offsetParent`.

However, for inline-level elements (such as **span**) that can wrap from one line to the next, `offsetTop` and `offsetLeft` describe the positions of the *first* border box (use `Element.getClientRects()` to get its width and height), while `offsetWidth` and `offsetHeight` describe the dimensions of the *bounding* border box (use `Element.getBoundingClientRect()` to get its position). Therefore, a box with the left, top, width and height of `offsetLeft`, `offsetTop`, `offsetWidth` and `offsetHeight` will not be a bounding box for a span with wrapped text.

Value
-----

An integer.

Examples
--------


```js
const colorTable = document.getElementById("t1");
const tOLeft = colorTable.offsetLeft;

if (tOLeft > 5) {
  // large left offset: do something here
}
```


This example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.

![A sentence that reads: Short span. This text is completely within a div with a blue border. A sentence that reads: Long span that wraps within this div. The words "long span that wraps" is within a box with a red border. The words "within this div" are within the div with the blue border. ](/en-US/docs/Web/API/HTMLElement/offsetLeft/offsetleft.jpg)


```html
<div
 style="width: 300px; border-color:blue; border-style:solid; border-width:1;">
  <span>Short span. </span>
  <span id="longspan">Long span that wraps within this div.</span>
</div>

<div
 id="box"
 style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10"></div>

<script>
 const box = document.getElementById("box");
 const longspan = document.getElementById("longspan");
 box.style.left = longspan.offsetLeft + document.body.scrollLeft + "px";
 box.style.top = longspan.offsetTop + document.body.scrollTop + "px";
 box.style.width = longspan.offsetWidth + "px";
 box.style.height = longspan.offsetHeight + "px";
</script>
```

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

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetleft |

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

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

See also
--------

* `HTMLElement.offsetParent`, `HTMLElement.offsetTop`, `HTMLElement.offsetWidth`, `HTMLElement.offsetHeight`
HTMLElement: showPopover() method
=================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`showPopover()`** method of the `HTMLElement` interface shows a popover element (i.e. one that has a valid `popover` attribute) by adding it to the top layer.

When `showPopover()` is called on an element with the `popover` attribute that is currently hidden, a `beforetoggle` event will be fired, followed by the popover showing, and then the `toggle` event firing. If the element is already showing, an error will be thrown.

Syntax
------


```js
showPopover()
```

### Parameters

None.

### Return value

None (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the popover is already showing.

Examples
--------

The following example provides functionality to show a popover by pressing a particular key on the keyboard.

First, some HTML:


```html
<div id="mypopover" popover>
  <h2>Help!</h2>

  <p>You can use the following commands to control the app</p>

  <ul>
    <li>Press <ins>C</ins> to order cheese</li>
    <li>Press <ins>T</ins> to order tofu</li>
    <li>Press <ins>B</ins> to order bacon</li>
    <hr />
    <li>Say "Service" to summon the robot waiter to take your order</li>
    <li>Say "Escape" to engage the ejector seat</li>
  </ul>
</div>
```


And now the JavaScript to wire up the functionality:


```js
const popover = document.getElementById("mypopover");

document.addEventListener("keydown", (event) => {
  if (event.key === "h") {
    popover.showPopover();
  }
});
```

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

| Specification |
| --- |
| HTML Standard # dom-showpopover |

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

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

See also
--------

* Popover API
HTMLElement: mscandidatewindowshow event
========================================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`mscandidatewindowshow`** event is thrown immediately after the Input Method Editor (IME) candidate window is set to appear, but before it renders.

This proprietary method is specific to Internet Explorer.

This event fires after the positioning information of the IME candidate window has been determined. You can obtain the positioning information using the getCandidateWindowClientRect method, and adjust your layout as needed to avoid any occlusions with the IME candidate window.

Web applications need only register for this event once per element (the handler will remain valid for the lifetime of the element).

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("mscandidatewindowshow", (event) => {});

onmscandidatewindowshow = (event) => {};
```

Event type
----------

A generic `Event` with no added properties.

### Example

in IE11, developers can detect the opening of the IME candidate window by listening to `MSCandidateWindowShow` event, then call `getCandidateWindowClientRect()` function to find out where the candidate window is and position the suggestion UI away from it:


```js
const context = document.getElementById("mySearchBox").msGetInputContext();
context.addEventListener("MSCandidateWindowShow", candidateWindowShowHandler);

function candidateWindowShowHandler(e) {
  const imeRect = context.getCandidateWindowClientRect();
  const suggestionRect = document
    .getElementById("mySuggestionList")
    .getBoundingClientRect();
  // Check if the two rects intersect, and position them away from each other.
}
```


When the IME candidate window changes position or closes, it fires `mscandidatewindowupdate` or `mscandidatewindowhide` events. Developers could listen to them and shift the suggestion UI accordingly.

See also
--------

* Microsoft API extensions
* Related events: `mscandidatewindowupdate` and `mscandidatewindowhide`
HTMLElement: contentEditable property
=====================================

 The **`contentEditable`** property of
 the `HTMLElement` interface specifies whether or not the element is
 editable.

This enumerated attribute can have the following values:

* '`true`' indicates that the element is `contenteditable`.
* '`false`' indicates that the element cannot be edited.
* '`plaintext-only`' indicates that the element's raw text is editable, but rich text formatting is disabled.
* '`inherit`' indicates that the element inherits its parent's editable
 status.

 You can use the `HTMLElement.isContentEditable` property to test the
 computed boolean value of this property.

Value
-----

A string.

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

| Specification |
| --- |
| HTML Standard # contenteditable |

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

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

See also
--------

* `HTMLElement.isContentEditable`
* The `contenteditable` global attribute.
HTMLElement: tabIndex property
==============================

Baseline Widely available
-------------------------

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

* Learn more
* See full compatibility
* Report feedback

 The **`tabIndex`** property of the
 `HTMLElement` interface represents the tab order of the current element.

Tab order is as follows:

1. Elements with a positive `tabIndex`. Elements that have identical
 `tabIndex` values should be navigated in the order they appear. Navigation
 proceeds from the lowest `tabIndex` to the highest `tabIndex`.
2. Elements that do not support the `tabIndex` attribute or support it and
 assign `tabIndex` to `0`, in the order they appear.

Elements that are disabled do not participate in the tabbing order.

 Values don't need to be sequential, nor must they begin with any particular value. They
 may even be negative, though each browser trims very large values.

Value
-----

An integer.

Examples
--------


```js
const b1 = document.getElementById("button1");

b1.tabIndex = 1;
```

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

| Specification |
| --- |
| HTML Standard # dom-tabindex |

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

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

See also
--------

* Accessibility of keyboard-navigable JavaScript widgets
* The HTML
 `tabindex`
 global attribute.
HTMLElement: accessKey property
===============================

The **`HTMLElement.accessKey`** property sets the keystroke which a user can press to jump to a given element.

**Note:** The `HTMLElement.accessKey` property is seldom used because of its multiple conflicts with already present key bindings in browsers. To work around this, browsers implement accesskey behavior if the keys are pressed with other "qualifying" keys (such as `Alt` + accesskey).

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

| Specification |
| --- |
| HTML Standard # dom-accesskey |

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

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

See also
--------

* HTML global attribute: accesskey
HTMLElement: dir property
=========================

 The **`HTMLElement.dir`** property gets or sets the text
 writing directionality of the content of the current element.

 The text writing directionality of an element is which direction that text goes (for
 support of different language systems). Arabic languages and Hebrew are typical
 languages using the RTL directionality.

 An image can have its `dir` property set to "`rtl`" in which case
 the HTML attributes `title` and `alt` will be formatted and
 defined as "`rtl`".

 When a table has its `dir` set to "`rtl`", the column order is
 arranged from right to left.

 When an element has its dir set to "`auto`", the direction of the element is
 determined based on its first strong directionality character, or default to the
 directionality of its parent element.


**Note:** Browsers might allow users to change the directionality of `<input>`
 and `<textarea>`s in order to assist with authoring content. Chrome
 and Safari provide a directionality option in the contextual menu of input fields
 while pre-Chromium Edge uses the key combinations `Ctrl` + `Left Shift` and `Ctrl` + `Right Shift`. Firefox uses `Ctrl`/`Cmd` + `Shift` + `X` but does NOT update
 the **`dir`** attribute value.


Value
-----

One of the following:

* `ltr`, for left-to-right;
* `rtl`, for right-to-left;
* `auto` for specifying that the direction of the element must be determined based on the contents of the element.
Examples
--------


```js
const parg = document.getElementById("para1");
parg.dir = "rtl";
// change the text direction on a paragraph identified as "para1"
```

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

| Specification |
| --- |
| HTML Standard # dom-dir |

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

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

See also
--------

* `document.dir`
* HTML `dir`
 global attribute
* CSS `direction` property
* CSS `:dir` pseudo-class
HTMLElement: outerText property
===============================

 The **`outerText`** property of the `HTMLElement` interface returns the same value as `HTMLElement.innerText`.
 When used as a setter it replaces the whole current node with the given text (this differs from `innerText`, which replaces the content *inside* the current node).

See `HTMLElement.innerText` for more information and examples showing how both properties are used as getters.

Value
-----

A string representing the rendered text content of an element and its descendants.

If the element itself is not being rendered (for example, is detached from the document or is hidden from view), the returned value is the same as the `Node.textContent` property.

When used as a setter it replaces the current node with the given text, converting any line breaks into `<br>` elements.

Examples
--------

This example highlights the fundamental difference between `outerText` and `innerText` when used as setters (they are the same when used by getters).

**Note:** The example is a modified version of What is the difference between innerText and outerText? (Stack overflow) by codingintrigue, is licensed under CC BY-SA 3.0.

Consider a page that contains the following HTML:


```html
<div>
  <p>Original content</p>
</div>
```


`outerText` replaces the whole selected element, so the JavaScript `p.outerText = "Whole element replaced"` replaces the whole selected `p` element:


```html
<div>Whole element replaced</div>
```


By contrast, `p.innerText = "Content inside element replaced"` replaces the content *inside* the selected `p` element:


```html
<div>
  <p>Content inside element replaced</p>
</div>
```

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

| Specification |
| --- |
| HTML Standard # dom-outertext |

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

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

See also
--------

* `HTMLElement.innerText`
* `Element.outerHTML`