recursal/MDN huggingface dataset:
Location: hash property
=======================

 The **`hash`** property of the
 `Location` interface returns a string containing a
 `'#'` followed by the fragment identifier of the URL — the ID on the page
 that the URL is trying to target.

 The fragment is not URL decoded. If the URL does not
 have a fragment identifier, this property contains an empty string, `""`.

Value
-----

A string.

Examples
--------


```html
<a id="myAnchor" href="/en-US/docs/Location.href#Examples">Examples</a>
<script>
 const anchor = document.getElementById("myAnchor");
 console.log(anchor.hash); // Returns '#Examples'
</script>
```

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

| Specification |
| --- |
| HTML Standard # dom-location-hash-dev |

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

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

 The **`origin`** read-only property of
 the `Location` interface is a string containing the
 Unicode serialization of the origin of the represented URL.

That is:

* for URL using the `http` or `https`, the scheme followed by
 `'://'`, followed by the domain, followed by `':'`, followed by
 the port (the default port, `80` and `443` respectively, if
 explicitly specified);
* for URL using `file:` scheme, the value is browser dependent;
* for URL using the `blob:` scheme, the origin of the URL following
 `blob:`. E.g `"blob:https://mozilla.org"` will have
 `"https://mozilla.org".`

**Note:** This feature is available in Web Workers

Value
-----

A string.

Examples
--------


```js
// On this page, returns the origin
const result = window.location.origin; // Returns:'https://developer.mozilla.org'
```

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

| Specification |
| --- |
| HTML Standard # dom-location-origin-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Location: assign() method
=========================

 The **`assign()`** method of the `Location`
 interface causes the window to load
 and display the document at the URL specified. After the navigation occurs, the user can
 navigate back to the page that called `Location.assign()` by pressing the "back" button.

Syntax
------


```js
assign(url)
```

### Parameters

`url`

A string containing the URL of the page to navigate to; for example, an absolute URL such as `https://developer.mozilla.org/en-US/docs/Web/API/Location/reload`, or a relative URL — such as `"/Web` (just a path, for navigating to another document at the same origin) or `#specifications` (just a fragment string, for navigating to some part of the same page), and so on.

### Exceptions

`SecurityError` `DOMException`

Thrown if the origin of the script calling the method is not the same origin of the page originally described by the `Location` object, mostly when the script is hosted on a different domain.

`SyntaxError` `DOMException`

Thrown if the provided `url` parameter is not a valid URL.

### Return value

None (`undefined`).

Examples
--------


```js
// Navigate to the Location.reload article
window.location.assign(
  "https://developer.mozilla.org/en-US/docs/Web/API/Location/reload",
);

// Then navigate to its Specifications section
window.location.assign("#specifications");

// Eventually navigate to https://developer.mozilla.org/en-US/docs/Web
window.location.assign("/Web");
```

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

| Specification |
| --- |
| HTML Standard # dom-location-assign-dev |

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

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

See also
--------

* The `Location` interface it belongs to.
* Similar methods: `Location.replace()` and
 `Location.reload()`.
Location: replace() method
==========================

 The **`replace()`** method of the `Location`
 interface replaces the current resource with the one at the provided URL. The difference
 from the `assign()` method is that after using
 `replace()` the current page will not be saved in session `History`,
 meaning the user won't be able to use the *back* button to navigate to it.

Syntax
------


```js
replace(url)
```

### Parameters

`url`

A string containing the URL of the page to navigate to.

### Exceptions

`SyntaxError` `DOMException`

Thrown if the provided `url` parameter is not a valid URL.

### Return value

None (`undefined`).

Examples
--------


```js
// Navigate to the Location.reload article by replacing this page
window.location.replace(
  "https://developer.mozilla.org/en-US/docs/Web/API/Location.reload",
);
```

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

| Specification |
| --- |
| HTML Standard # dom-location-replace-dev |

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

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

See also
--------

* The `Location` interface it belongs to.
* Similar methods: `Location.assign()` and
 `Location.reload()`.
SharedStorageRunOperation: run() method
=======================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`run()`** method of the
 `SharedStorageRunOperation` interface defines the structure to which the `run()` method defined inside a Run output gate operation should conform.

Syntax
------


```js
run(data)
```

### Parameters

`data`

An object representing any data required for executing the operation.

### Return value

A `Promise` that fulfills with `undefined`.

Examples
--------

See the main `SharedStorageRunOperation` page for an example.

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

| Specification |
| --- |
| Shared Storage API # dom-sharedstoragerunoperation-run |

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

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

See also
--------

* Shared Storage API
RTCPeerConnectionIceEvent: RTCPeerConnectionIceEvent() constructor
==================================================================

 The **`RTCPeerConnectionIceEvent()`** constructor creates a new
 `RTCPeerConnectionIceEvent` object.

Syntax
------


```js
new RTCPeerConnectionIceEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers always set it to `icecandidate`.


`options` Optional

An object that, *in addition of the properties defined in `Event()`*, can have the following properties:

`candidate`

 A `RTCIceCandidate` representing the ICE candidate being concerned by the event.
 If `null`, the event indicates the end of candidate gathering.


`url`

 A string containing the URL of the STUN or TURN server which was used to gather the candidate.
 If the candidate was not gathered by a STUN or TURN server,
 this value must be `null`, which is also the default value.



### Return value

A new `RTCPeerConnectionIceEvent` object, configured as specified in the provided options.

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnectioniceevent-constructor |

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

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

See also
--------

* WebRTC
* Its usual target: `RTCPeerConnection`.
RTCPeerConnectionIceEvent: candidate property
=============================================

 The read-only **`candidate`** property
 of the `RTCPeerConnectionIceEvent` interface returns the
 `RTCIceCandidate` associated with the event.

Value
-----

 An `RTCIceCandidate` object representing the ICE candidate that has been
 received, or `null` to indicate that there are no further candidates for this
 negotiation session.

Example
-------


```js
pc.onicecandidate = (ev) => {
  alert(
    `The ICE candidate (transport address: '${ev.candidate.candidate}') has been added to this connection.`,
  );
};
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnectioniceevent-candidate |

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

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

See also
--------

* `icecandidate`
* `RTCPeerConnection`
PresentationAvailability: value property
========================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`value`** attribute *MUST* return the last value from which it was set. The value is updated by the monitor the list of available presentation displays algorithm.

The `onchange` attribute is an event handler whose corresponding event handler event type is `change`.

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

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

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`CharacterBoundsUpdateEvent.rangeStart`** read-only property represents the offset of the first character within the editable text region for which the operating system needs the bounds.

Value
-----

A `Number`.

Examples
--------

### Reading the `rangeStart` value

This example shows how to use the `characterboundsupdate` event and read the value of the `rangeStart` and `rangeEnd` properties.


```js
const editContext = new EditContext();
editorElement.editContext = editContext;

editContext.addEventListener("characterboundsupdate", (e) => {
  console.log(
    `The OS needs the bounds of the chars at ${e.rangeStart} - ${e.rangeEnd}.`,
  );
});
```

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

| Specification |
| --- |
| EditContext API # dom-characterboundsupdateevent-rangestart |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CharacterBoundsUpdateEvent: CharacterBoundsUpdateEvent() constructor
====================================================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`CharacterBoundsUpdateEvent()`** constructor returns a new `CharacterBoundsUpdateEvent` object.

Syntax
------


```js
new CharacterBoundsUpdateEvent(type)
new CharacterBoundsUpdateEvent(type, options)
```

### Parameters

`type`

A string representing the type of the event. Possible values: `"characterboundsupdate"`.

`options` Optional

An optional object with the following properties:

`rangeStart`

A number to set the offset of the first character within the editable text region which this event applies to.

`rangeEnd`

A number to set the offset of the last character within the editable text region which this event applies to.


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

| Specification |
| --- |
| EditContext API # dom-characterboundsupdateevent-constructor |

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

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

See also
--------

* The `CharacterBoundsUpdateEvent` interface it belongs to.
CharacterBoundsUpdateEvent: rangeEnd property
=============================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`CharacterBoundsUpdateEvent.rangeEnd`** read-only property represents the offset of the last character within the editable text region for which the operating system needs the bounds.

Value
-----

A `Number`.

Examples
--------

### Reading the `rangeEnd` value

This example shows how to use the `characterboundsupdate` event and read the value of the `rangeStart` and `rangeEnd` properties.


```js
const editContext = new EditContext();
editorElement.editContext = editContext;

editContext.addEventListener("characterboundsupdate", (e) => {
  console.log(
    `The OS needs the bounds of the chars at ${e.rangeStart} - ${e.rangeEnd}.`,
  );
});
```

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

| Specification |
| --- |
| EditContext API # dom-characterboundsupdateevent-rangestart |

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

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

**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 **`ariaRelevant`** property of the `Element` interface reflects the value of the `aria-relevant` attribute, which indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. This is used to describe what changes in an `aria-live` region are relevant and should be announced.

Value
-----

A string containing one or more of the following values, space separated:

`"additions"`

Additions of Element Nodes within the live region should be considered relevant.

`"removals"`

Deletion of Nodes from the live region should be considered relevant.

`"text"`

Changes to the textual content of existing nodes should be considered relevant.

`"all"`

Equivalent to `"additions removals text"`.

Examples
--------

In this example the `aria-relevant` attribute on the element with an ID of `text` is set to "all". Using `ariaRelevant` we update the value to "text".


```html
<div
 id="clock"
 role="timer"
 aria-live="polite"
 aria-atomic="true"
 aria-relevant="all"></div>
```



```js
let el = document.getElementById("clock");
console.log(el.ariaRelevant); // all
el.ariaRelevant = "text";
console.log(el.ariaRelevant); // text
```

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element: closest() method
=========================

The **`closest()`** method of the `Element` interface traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector.

Syntax
------


```js
closest(selectors)
```

### Parameters

`selectors`

A string of valid CSS selector to match the `Element` and its ancestors against.

### Return value

The closest ancestor `Element` or itself, which matches the `selectors`. If there are no such element, `null`.

### Exceptions

`SyntaxError` `DOMException`

Thrown if the `selectors` is not a valid CSS selector.

Examples
--------

### HTML


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

### JavaScript


```js
const el = document.getElementById("div-03");

// the closest ancestor with the id of "div-02"
console.log(el.closest("#div-02")); // <div id="div-02">

// the closest ancestor which is a div in a div
console.log(el.closest("div div")); // <div id="div-03">

// the closest ancestor which is a div and has a parent article
console.log(el.closest("article > div")); // <div id="div-01">

// the closest ancestor which is not a div
console.log(el.closest(":not(div)")); // <article>
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-closest① |

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

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

### Compatibility notes

* In Edge 15-18 `document.createElement(tagName).closest(tagName)` will
 return `null` if the element is not first connected (directly or
 indirectly) to the context object, for example the `Document` object in
 the case of the normal DOM.
See also
--------

* CSS selectors module
* Other `Element` methods that take selectors: `Element.querySelector()`, `Element.querySelectorAll()`, and `Element.matches()`.
Element: classList property
===========================

 The **`Element.classList`** is a read-only property that
 returns a live `DOMTokenList` collection of the `class`
 attributes of the element. This can then be used to manipulate the class list.

 Using `classList` is a convenient alternative to accessing an element's list
 of classes as a space-delimited string via `element.className`.

Value
-----

 A `DOMTokenList` representing the contents of the element's
 `class` attribute. If the `class` attribute is not set or empty,
 it returns an empty `DOMTokenList`, i.e. a `DOMTokenList` with
 the `length` property equal to `0`.

Although the `classList` property itself is read-only, you can modify its associated `DOMTokenList` using the `add()`, `remove()`, `replace()`, and `toggle()` methods.

You can test whether the element contains a given class using the `classList.contains()` method.

Examples
--------


```js
const div = document.createElement("div");
div.className = "foo";

// our starting state: <div class="foo"></div>
console.log(div.outerHTML);

// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10);

// false
console.log(div.classList.contains("foo"));

// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);

// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-classlist① |

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

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

See also
--------

* `element.className`
* `DOMTokenList`
* `classList.js` (a cross-browser JavaScript polyfill that fully implements `element.classList`)
Element: ariaLevel property
===========================

The **`ariaLevel`** property of the `Element` interface reflects the value of the `aria-level` attribute, which defines the hierarchical level of an element within a structure.

**Note:** Where possible use an HTML h1 or other correct heading level as these have built in semantics and do not require ARIA attributes.

Value
-----

A string containing an integer.

Examples
--------

In this example the `aria-level` attribute on the element with an ID of `main-heading` is set to "1". Using `ariaLevel` we update the value to "2".


```html
<div role="heading" id="main-heading" aria-level="1">
  This is a main page heading
</div>
```



```js
let el = document.getElementById("main-heading");
console.log(el.ariaLevel); // "1"
el.ariaLevel = "2";
console.log(el.ariaLevel); // "2"
```

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

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

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

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

See also
--------

* ARIA: heading role
Element: ariaKeyShortcuts property
==================================

The **`ariaKeyShortcuts`** property of the `Element` interface reflects the value of the `aria-keyshortcuts` attribute, which indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

Value
-----

A string.

Examples
--------

In this example the `aria-keyshortcuts` attribute on the element with an ID of `skip-link` is set to "Alt+Shift+A". Using `ariaKeyShortcuts` we update the value to "Alt+Shift+M".


```html
<a id="skip-link" href="#content" aria-keyshortcuts="Alt+Shift+A">
  Skip to content
</a>
```



```js
let el = document.getElementById("saveChanges");
console.log(el.ariaKeyShortcuts); // "Alt+Shift+A"
el.ariaKeyShortcuts = "Alt+Shift+M";
console.log(el.ariaKeyShortcuts); // "Alt+Shift+M"
```

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

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

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

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

The **`ariaDisabled`** property of the `Element` interface reflects the value of the `aria-disabled` attribute, which indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

**Note:** Where possible, use the `<input>` element with `type="button"` or the `<button>` element — because those elements have built in semantics and do not require ARIA attributes.

Value
-----

A string with one of the following values:

`"true"`

The element and all focusable descendants are disabled, but perceivable, and their values cannot be changed by the user.

`"false"`

The element is enabled.

Examples
--------

In this example the `aria-disabled` attribute on the element with an ID of `saveChanges` is set to "true" indicating that this input is currently disabled. Using `ariaDisabled` we update the value to "false".


```html
<div id="saveChanges" tabindex="0" role="button" aria-disabled="true">Save</div>
```



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

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

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

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

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

The **`ariaDescription`** property of the `Element` interface reflects the value of the `aria-description` attribute, which defines a string value that describes or annotates the current element.

Value
-----

A string.

Examples
--------

In this example the `aria-description` attribute on the element with an ID of `close-button` is set to the string "A longer description of the function of this element". Using `ariaDescription` we can update the value.


```html
<button
 aria-label="Close"
 aria-description="A longer description of the function of this element"
 id="close-button">
  X
</button>
```



```js
let el = document.getElementById("close-button");
console.log(el.ariaDescription); // "A longer description of the function of this element"
el.ariaDescription = "A different description";
console.log(el.ariaDescription); // "A different description"
```

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

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

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

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