recursal/MDN huggingface dataset:
Element: beforescriptexecute 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.

**Warning:** This event was a proposal in an early version of the specification. Do not rely on it.

The **`beforescriptexecute`** event is fired when a script is about to be executed. Cancelling the event prevents the script from executing.

It is a proprietary event specific to Gecko (Firefox).

Syntax
------

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


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

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

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

A generic `Event`.

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

Not part of any specification.

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

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

See also
--------

* `afterscriptexecute` event
Element: ariaOrientation property
=================================

The **`ariaOrientation`** property of the `Element` interface reflects the value of the `aria-orientation` attribute, which indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

Value
-----

A string with one of the following values:

`"horizontal"`

The element is horizontal.

`"vertical"`

The element is vertical.

`"undefined"`

The element's orientation is unknown.

Examples
--------

In this example the `aria-orientation` attribute on the element with an ID of `handle_zoomSlider` is set to "`vertical`". Using `ariaOrientation` we update the value to "`horizontal`".


```html
<div
 id="handle\_zoomSlider"
 role="slider"
 aria-orientation="vertical"
 aria-valuemin="0"
 aria-valuemax="17"
 aria-valuenow="14"
 tabindex="0">
  <span>11</span>
</div>
```



```js
let el = document.getElementById("handle\_zoomSlider");
console.log(el.ariaOrientation); // "vertical"
el.ariaOrientation = "horizontal";
console.log(el.ariaOrientation); // "horizontal"
```

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

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariaorientation |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element: focus event
====================

The **`focus`** event fires when an element has received focus. The event does not bubble, but the related `focusin` event that follows does bubble.

The opposite of `focus` is the `blur` event, which fires when the element has *lost* focus.

The `focus` event is not cancelable.

Syntax
------

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


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

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

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

A `FocusEvent`. Inherits from `UIEvent` and `Event`.

Event

UIEvent

FocusEventEvent properties
----------------

*This interface also inherits properties from its parent `UIEvent`, and indirectly from `Event`.*

`FocusEvent.relatedTarget`

The element losing focus, if any.

Examples
--------

### Simple example

#### HTML


```html
<form id="form">
  <label>
    Some text:
    <input type="text" placeholder="text input" />
  </label>
  <label>
    Password:
    <input type="password" placeholder="password" />
  </label>
</form>
```


#### JavaScript


```js
const password = document.querySelector('input[type="password"]');

password.addEventListener("focus", (event) => {
  event.target.style.background = "pink";
});

password.addEventListener("blur", (event) => {
  event.target.style.background = "";
});
```


#### Result

### Event delegation

There are two ways of implementing event delegation for this event: by using the `focusin` event, or by setting the `useCapture` parameter of `addEventListener()` to `true`.

#### HTML


```html
<form id="form">
  <label>
    Some text:
    <input type="text" placeholder="text input" />
  </label>
  <label>
    Password:
    <input type="password" placeholder="password" />
  </label>
</form>
```


#### JavaScript


```js
const form = document.getElementById("form");

form.addEventListener(
  "focus",
  (event) => {
    event.target.style.background = "pink";
  },
  true,
);

form.addEventListener(
  "blur",
  (event) => {
    event.target.style.background = "";
  },
  true,
);
```


#### Result

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

| Specification |
| --- |
| UI Events # event-type-focus |
| HTML Standard # handler-onfocus |

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

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

See also
--------

* The `HTMLElement.focus()` method
* Related events: `blur`, `focusin`, `focusout`
* This event on `Window` targets: `focus` event
* Focusing: focus/blur
Element: ariaValueNow property
==============================

The **`ariaValueNow`** property of the `Element` interface reflects the value of the `aria-valuenow` attribute, which defines the current value for a range widget.

Value
-----

A string which contains a number.

Examples
--------

In this example the `aria-valuenow` attribute on the element with an ID of `slider` is set to "1". Using `ariaValueNow` we update the value to "2".


```html
<div
 role="slider"
 aria-valuenow="1"
 aria-valuemin="1"
 aria-valuemax="7"
 aria-valuetext="Sunday"></div>
```



```js
let el = document.getElementById("slider");
console.log(el.ariaValueNow); // 1
el.ariaValueNow = "2";
console.log(el.ariaValueNow); // 2
```

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

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariavaluenow |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element: ariaExpanded property
==============================

The **`ariaExpanded`** property of the `Element` interface reflects the value of the `aria-expanded` attribute, which indicates whether a grouping element owned or controlled by this element is expanded or collapsed.

Value
-----

A string with one of the following values:

`"true"`

The grouping element this element owns or controls is expanded.

`"false"`

The grouping element this element owns or controls is collapsed.

`"undefined"`

The element does not own or control a grouping element that is expandable.

Examples
--------

In this example the `aria-expanded` attribute on the element with an ID of `animal` is set to "false". Using `ariaExpanded` we update the value to "true".


```html
<div class="animals-combobox">
  <label for="animal">Animal</label>
  <input
 id="animal"
 type="text"
 role="combobox"
 aria-autocomplete="list"
 aria-expanded="false"
 aria-haspopup="true" />
  <button id="animals-button" tabindex="-1" aria-label="Open">▽</button>
  <ul id="animals-listbox" role="listbox" aria-label="Animals">
    <li id="animal-cat" role="option">Cat</li>
    <li id="animal-dog" role="option">Dog</li>
  </ul>
</div>
```



```js
let el = document.getElementById("animal");
console.log(el.ariaExpanded); // false
el.ariaExpanded = "true";
console.log(el.ariaExpanded); // true
```

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

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariaexpanded |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element: scrollWidth property
=============================

 The **`Element.scrollWidth`** read-only property is a
 measurement of the width of an element's content, including content not visible on the
 screen due to overflow.

 The `scrollWidth` value is equal to the minimum width the element would
 require in order to fit all the content in the viewport without using a horizontal
 scrollbar. The width is measured in the same way as `clientWidth`: it includes the element's padding, but not its border, margin or
 vertical scrollbar (if present). It can also include the width of pseudo-elements such
 as `::before` or `::after`. If the element's content can fit
 without a need for horizontal scrollbar, its `scrollWidth` is equal to
 `clientWidth`


**Note:** This property will round the value to an integer. If you need a fractional value,
 use `element.getBoundingClientRect()`.


Value
-----

A number.

Examples
--------


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Example</title>
    <style>
 div {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 }

 #aDiv {
 width: 100px;
 }

 button {
 margin-bottom: 2em;
 }
 </style>
  </head>

  <body>
    <div id="aDiv">FooBar-FooBar-FooBar-FooBar</div>
    <button id="aButton">Check for overflow</button>

    <div id="anotherDiv">FooBar-FooBar-FooBar-FooBar</div>
    <button id="anotherButton">Check for overflow</button>
  </body>
  <script>
 const buttonOne = document.getElementById("aButton");
 const buttonTwo = document.getElementById("anotherButton");
 const divOne = document.getElementById("aDiv");
 const divTwo = document.getElementById("anotherDiv");

 //check to determine if an overflow is happening
 function isOverflowing(element) {
 return element.scrollWidth > element.offsetWidth;
 }

 function alertOverflow(element) {
 if (isOverflowing(element)) {
 alert("Contents are overflowing the container.");
 } else {
 alert("No overflows!");
 }
 }

 buttonOne.addEventListener("click", () => {
 alertOverflow(divOne);
 });

 buttonTwo.addEventListener("click", () => {
 alertOverflow(divTwo);
 });
 </script>
</html>
```

### Result

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

| Specification |
| --- |
| CSSOM View Module # dom-element-scrollwidth |

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

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

See also
--------

* `Element.clientWidth`
* `HTMLElement.offsetWidth`
* Determining the dimensions of elements
Element: remove() method
========================

The **`Element.remove()`** method removes the element from the DOM.

Syntax
------


```js
remove()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

### Using `remove()`


```html
<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>
<div id="div-03">Here is div-03</div>
```



```js
const element = document.getElementById("div-02");
element.remove(); // Removes the div with the 'div-02' id
```

### `Element.remove()` is unscopable

 The `remove()` method is not scoped into the `with` statement.
 See `Symbol.unscopables` for more information.


```js
with (node) {
  remove();
}
// ReferenceError: remove is not defined
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-remove① |

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

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

See also
--------

* Polyfill
Element: MozMousePixelScroll event
==================================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**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 Firefox-only, *non-standard*, and *obsolete* **`MozMousePixelScroll`** event is fired at an `Element` asynchronously when a mouse wheel or similar device is operated. It's represented by the `MouseScrollEvent` interface.

**Note:** Do not use this non-standard and obsolete event. Instead, you should always use the standard `wheel` event.

Syntax
------

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


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

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

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

A `WheelEvent`. Inherits from `MouseEvent`, `UIEvent` and `Event`.

Event

UIEvent

MouseEvent

WheelEventGetting the distance scrolled
-----------------------------

The event's `detail` property indicates the scroll distance in terms of lines, with negative values indicating the scrolling movement is either toward the bottom or toward the right, and positive values indicating scrolling to the top or left.

If the platform's native mouse wheel events indicate the scroll distance in terms of lines or pages, the value of `detail` is computed using that value and the line height or page width/height of the nearest ancestor scrollable element that contains the target element.

**Note:** On macOS, the scroll distance (and therefore the value of `detail`) is computed based on the accelerated scroll distance.

The value of `detail` is never 0 if the events are legitimate.

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

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

See also
--------

* `MouseScrollEvent`
* Gecko's legacy line or page scroll event: `DOMMouseScroll`
* Non-Gecko browsers' legacy mouse wheel event: `mousewheel`
* Standardized wheel event: `wheel`
Element: children property
==========================

 The read-only **`children`** property returns a live `HTMLCollection`
 which contains all of the child `elements` of the element upon which it was called.

`Element.children` includes only element nodes. To get all child nodes, including non-element nodes like text and comment nodes, use `Node.childNodes`.

Value
-----

 An `HTMLCollection` which is a live, ordered collection of the DOM
 elements which are children of `node`. You can access the
 individual child nodes in the collection by using either the
 `item()` method on the collection, or by using
 JavaScript array-style notation.

 If the element has no element children, then `children` is an empty list with a
 `length` of `0`.

Examples
--------


```js
const myElement = document.getElementById("foo");
for (const child of myElement.children) {
  console.log(child.tagName);
}
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-children① |

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

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

See also
--------

* `Node.childNodes`
Element: getAnimations() method
===============================

 The `getAnimations()` method of the `Element` interface
 (specified on the `Animatable` mixin) returns an array of all
 `Animation` objects affecting this element or which are scheduled to do so
 in future. It can optionally return `Animation` objects for descendant
 elements too.

**Note:** This array includes CSS Animations, CSS Transitions, and Web Animations.

Syntax
------


```js
getAnimations()
getAnimations(options)
```

### Parameters

`options` Optional

An options object containing the following property:

`subtree`

 A boolean value which, if `true`, causes animations that target
 descendants of *Element* to be returned as well. This includes animations
 that target any CSS pseudo-elements attached to
 *Element* or one of its descendants. Defaults to `false`.



### Return value

 An `Array` of `Animation` objects, each representing an
 animation currently targeting the `Element` on which this method is called,
 or one of its descendant elements if `{ subtree: true }` is specified.

Examples
--------

 The following code snippet will wait for all animations on `elem` and its
 descendants to finish before removing the element from the document.


```js
Promise.all(
  elem.getAnimations({ subtree: true }).map((animation) => animation.finished),
).then(() => elem.remove());
```

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

| Specification |
| --- |
| Web Animations # dom-animatable-getanimations |

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

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

See also
--------

* Web Animations API
* CSS Animations
* CSS Transitions
* `Document.getAnimations()` - Fetch all animations in the document
* `Animation`
Element: cut event
==================

The **`cut`** event of the Clipboard API is fired when the user has initiated a "cut" action through the browser's user interface.

If the user attempts a cut action on uneditable content, the `cut` event still fires but the event object contains no data.

The event's default action is to copy the current selection (if any) to the system clipboard and remove it from the document.

A handler for this event can *modify* the clipboard contents by calling `setData(format, data)` on the event's `ClipboardEvent.clipboardData` property, and cancelling the default action using `event.preventDefault()`.

Note though that cancelling the default action will also prevent the document from being updated. So an event handler which wants to emulate the default action for "cut" while modifying the clipboard must also manually remove the selection from the document.

The handler cannot *read* the clipboard data.

It's possible to construct and dispatch a synthetic `cut` event, but this will not affect the system clipboard or the document's contents.

This event bubbles, is cancelable and is composed.

Syntax
------

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


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

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

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

A `ClipboardEvent`. Inherits from `Event`.

Event

ClipboardEventExamples
--------

### Live example

#### HTML


```html
<div class="source" contenteditable="true">Cut text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>
```


```
div.source,
div.target {
  border: 1px solid gray;
  margin: 0.5rem;
  padding: 0.5rem;
  height: 1rem;
  background-color: #e9eef1;
}
```


#### JavaScript


```js
const source = document.querySelector("div.source");

source.addEventListener("cut", (event) => {
  const selection = document.getSelection();
  event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
  selection.deleteFromDocument();
  event.preventDefault();
});
```


#### Result

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

| Specification |
| --- |
| Clipboard API and events # clipboard-event-cut |
| HTML Standard # handler-oncut |

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

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

See also
--------

* Related events: `copy`, `paste`
* This event on `Document` targets: `cut`
* This event on `Window` targets: `cut`
Element: attributes property
============================

 The **`Element.attributes`** property returns a live collection
 of all attribute nodes registered to the specified node. It is a
 `NamedNodeMap`, not an `Array`, so it has no `Array`
 methods and the `Attr` nodes' indexes may differ among browsers. To be more
 specific, `attributes` is a key/value pair of strings that represents any
 information regarding that attribute.

Value
-----

A `NamedNodeMap` object.

Examples
--------

### Basic examples


```js
// Get the first <p> element in the document
const paragraph = document.querySelector("p");
const attributes = paragraph.attributes;
```

### Enumerating elements attributes

 You can enumerate through an element's attributes using `for...of`.
 The following example runs through the attribute nodes for the element in the document
 with id "paragraph", and prints each attribute's value.


```html
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Attributes example</title>
    <script>
 function listAttributes() {
 const paragraph = document.getElementById("paragraph");
 const result = document.getElementById("result");

 // First, let's verify that the paragraph has some attributes
 if (paragraph.hasAttributes()) {
 let output = "Attributes of first paragraph:\n";
 for (const attr of paragraph.attributes) {
 output += `${attr.name} -> ${attr.value}\n`;
 }
 result.textContent = output;
 } else {
 result.textContent = "No attributes to show";
 }
 }
 </script>
  </head>

  <body>
    <p id="paragraph" style="color: green;">Sample Paragraph</p>
    <form action="">
      <p>
        <input type="button" value="Show first attribute name and value"
 onclick="listAttributes();">
        <pre id="result"></pre>
      </p>
    </form>
  </body>
</html>
```

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

| Specification |
| --- |
| DOM Standard # dom-element-attributes |

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

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

See also
--------

* `NamedNodeMap`, the interface of the returned object
* Cross-browser compatibility considerations: on quirksmode
Element: previousElementSibling property
========================================

 The **`Element.previousElementSibling`**
 read-only property returns the `Element` immediately prior to the specified
 one in its parent's children list, or `null` if the specified element is the first one in the list.

Value
-----

An `Element` object, or `null`.

Examples
--------


```html
<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>
<li>This is a list item</li>
<li>This is another list item</li>
<div id="div-03">Here is div-03</div>

<script>
 let el = document.getElementById("div-03").previousElementSibling;
 document.write("<p>Siblings of div-03</p><ol>");
 while (el) {
 document.write("<li>" + el.nodeName + "</li>");
 el = el.previousElementSibling;
 }
 document.write("</ol>");
</script>
```


This example outputs the following into the page when it loads:
```

Siblings of div-03

   1. LI
   2. LI
   3. DIV
   4. DIV
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-nondocumenttypechildnode-previouselementsibling② |

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

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

See also
--------

* `Element.nextElementSibling`
Element: ariaLive property
==========================

The **`ariaLive`** property of the `Element` interface reflects the value of the `aria-live` attribute, which indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

Value
-----

A string with one of the following values:

`"assertive"`

Indicates that updates to the region have the highest priority and should be presented to the user immediately.

`"off"`

Indicates that updates to the region should not be presented to the user unless the user is currently focused on that region.

`"polite"`

Indicates that updates to the region should be presented at the next graceful opportunity, such as at the end of speaking the current sentence or when the user pauses typing.

Examples
--------

In this example the `aria-live` attribute on the element with an ID of `planetInfo` is set to `"polite"`. We then update the value to `"assertive"`.


```html
<div role="region" id="planetInfo" aria-live="polite">
  <h2 id="planetTitle">No planet selected</h2>
  <p id="planetDescription">Select a planet to view its description</p>
</div>
```



```js
let el = document.getElementById("planetInfo");
console.log(el.ariaLive); // "polite"
el.ariaLive = "assertive";
console.log(el.ariaLive); // "assertive"
```

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

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-arialive |

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

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