recursal/MDN huggingface dataset:
HTMLSelectElement: namedItem() method
=====================================

 The **`HTMLSelectElement.namedItem()`** method returns the
 `HTMLOptionElement` corresponding to the `HTMLOptionElement`
 whose `name` or `id` match the specified name, or
 `null` if no option matches.

In JavaScript, using `selectElt.namedItem('value')` is equivalent to `selectElt.options.namedItem('value')`.

Syntax
------


```js
namedItem(str)
```

### Parameters

* `str` is a string.
### Return value

* `item` is a `HTMLOptionElement`.
Examples
--------

### HTML


```html
<form>
  <select id="myFormControl">
    <option id="o1">Opt 1</option>
    <option id="o2">Opt 2</option>
  </select>
</form>
```

### JavaScript


```js
let selectElt = document.getElementById("myFormControl");
elem1 = selectElt.namedItem("o1"); // Returns the HTMLOptionElement representing #o1
```


But, you cannot write:


```js
let selectElt = document.getElementById("myFormControl");
elem1 = selectElt.o1; // Returns undefined
elem1 = selectElt["o1"]; // Returns undefined
```

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

| Specification |
| --- |
| HTML Standard # dom-select-nameditem-dev |

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

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

See also
--------

* `HTMLSelectElement` that implements it.
HTMLSelectElement: disabled property
====================================

 The **`HTMLSelectElement.disabled`** property is a boolean value that reflects the
 `disabled`
 HTML attribute, which indicates whether the control is disabled. If it is disabled, it
 does not accept clicks. A disabled element is unusable and un-clickable.

Value
-----

A boolean value.

Examples
--------

### HTML


```html
<label>
  Allow drinks?
  <input id="allow-drinks" type="checkbox" />
</label>

<label for="drink-select">Drink selection:</label>
<select id="drink-select" disabled>
  <option value="1">Water</option>
  <option value="2">Beer</option>
  <option value="3">Pepsi</option>
  <option value="4">Whisky</option>
</select>
```

### JavaScript


```js
const allowDrinksCheckbox = document.getElementById("allow-drinks");
const drinkSelect = document.getElementById("drink-select");

allowDrinksCheckbox.addEventListener(
  "change",
  (event) => {
    drinkSelect.disabled = !event.target.checked;
  },
  false,
);
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-fe-disabled |

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

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

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback

 The **`HTMLSelectElement.setCustomValidity()`** method sets the
 custom validity message for the selection element to the specified message. Use the
 empty string to indicate that the element does *not* have a custom validity
 error.

Syntax
------


```js
setCustomValidity(string)
```

### Parameters

* `string` is the string containing the error message.
### Return value

None (`undefined`).

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

| Specification |
| --- |
| HTML Standard # dom-cva-setcustomvalidity-dev |

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

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

See also
--------

* Form validation.
MediaKeys: setServerCertificate() method
========================================

 The **`MediaKeys.setServerCertificate()`** method provides a
 server certificate to be used to encrypt messages to the license server.

Syntax
------


```js
setServerCertificate(serverCertificate)
```

### Parameters

`serverCertificate`

An `ArrayBuffer`, a `TypedArray`, or a `DataView` object containing the server certificate. The contents are Key System-specific. It MUST NOT contain executable code.

### Return value

A `Promise` that resolves to a boolean. If the Key System implementation represented by this object's content decryption module's implementation value does not support server certificates, return a promise resolved with false.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeys-setservercertificate |

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

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

 The `MediaKeys.createSession()` method returns a new
 `MediaKeySession` object, which represents a context for message exchange
 with a content decryption module (CDM).

Syntax
------


```js
createSession()
createSession(mediaKeySessionType)
```

### Parameters

`mediaKeySessionType` Optional

A string. Either "temporary" or "persistent-license". The default value is "temporary".

### Return value

A new `MediaKeySession` object.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeys-createsession |

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

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

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`data`** read-only property of the `MIDIMessageEvent` interface returns the MIDI data bytes of a single MIDI message.

Value
-----

A `Uint8Array`.

Examples
--------

In the following example `midimessage` events are listened for on all input ports. When a message is received the value of `data` is printed to the console.


```js
inputs.forEach((input) => {
  input.onmidimessage = (message) => {
    console.log(message.data);
  };
});
```

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

| Specification |
| --- |
| Web MIDI API # dom-midimessageevent-data |

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

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

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`MIDIMessageEvent()`** constructor creates a new `MIDIMessageEvent` object. Typically this constructor is not used as events are created when a `MIDIInput` finishes receiving one or more MIDI messages.

Syntax
------


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

### Parameters

`type`

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


`options` Optional

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

`data`

A `Uint8Array` instance containing the data bytes of the MIDI message.


### Return value

A new `MIDIMessageEvent` object.

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

| Specification |
| --- |
| Web MIDI API # dom-midimessageevent-constructor |

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

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

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
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

 The **`USBConnectionEvent()`** constructor creates a new `USBConnectionEvent` object.
 This constructor is not typically used,
 it is created by the browser in response to the connection and disconnection of a USB device.

Syntax
------


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

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `connect` or `disconnect`.


`options`

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

`device`

A `USBDevice` representing the USB device being connected or disconnected.


### Return value

A new `USBConnectionEvent` object.

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

| Specification |
| --- |
| WebUSB API # dom-usbconnectionevent-usbconnectionevent |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
USBConnectionEvent: device 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
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

The **`device`** read-only property of the `USBConnectionEvent` interface returns a `USBDevice` object representing the device being connected or disconnected.

Value
-----

A `USBDevice` object.

Examples
--------

Connecting a USB device fires the `connect` event. The current `USBDevice` is returned by calling `event.device`.


```js
navigator.usb.addEventListener("connect", (event) => {
  console.log(event.device);
});
```

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

| Specification |
| --- |
| WebUSB API # dom-usbconnectionevent-device |

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

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

 The **`endOffset`** property of the `StaticRange`
 interface returns the offset into the end node of the range's end position.

Value
-----

 An integer value indicating the number of characters into the `Node`
 indicated by `endContainer` at which the final
 character of the range is located.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-endoffset① |

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

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

 The **`StaticRange()`** constructor
 creates a new `StaticRange` object representing a span of content within
 the DOM.

 This constructor includes properties identifying the start and end positions of
 the range as well as a Boolean indicating whether or not the range is
 **collapsed** (that is, empty).

Syntax
------


```js
new StaticRange(rangeSpec)
```

### Parameters

`rangeSpec`

 The required `rangeSpec` parameter is an object
 containing the four following properties:


`startContainer`

The `Node` in which the starting point of the range is located.

`startOffset`

 The offset into the starting node at which the first character of the range is
 found.


`endContainer`

The `Node` in which the end point of the range is located.

`endOffset`

 The offset into the node indicated by `endOffset` at which the last
 character in the range is located.



### Return value

 A new `StaticRange` object initialized with the values given in
 the `rangeSpec` object.

### Exceptions

`InvalidNodeTypeError`

 A `DOMException` fired if either or both of the
 `startContainer` and/or `endContainer` are a type of node which
 you can't include in a range. Those node types
 are `Node.DOCUMENT_TYPE_NODE` (representing the `DocumentType`
 node derived from the DTD identified using the `doctype`
 preamble in the HTML, for example) and the `Attr` node describing an
 attribute of an element on the DOM.


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

| Specification |
| --- |
| DOM Standard # ref-for-dom-staticrange-staticrange① |

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

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

 The **`collapsed`** read-only property
 of the `StaticRange` interface returns `true` if the range's
 start position and end position are the same.

Value
-----

 A boolean value which is `true` if the range
 is **collapsed**. A collapsed range is one in which the start and end
 positions are the same, resulting in a zero-character-long range.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-collapsed① |

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

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

 The read-only **`startOffset`**
 property of the `StaticRange` interface returns the offset into the start
 node of the range's start position.

Value
-----

 An integer value indicating the number of characters into the `Node`
 indicated by `startContainer` at which the
 first character of the range is located.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-startoffset① |

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

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

The **`endContainer`** property of the `StaticRange` interface returns the end `Node` for the range.

Value
-----

The DOM `Node` which contains the final character of the range.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-endcontainer① |

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

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

 The read-only **`startContainer`**
 property of the `StaticRange` interface returns the start
 `Node` for the range.

Value
-----

The DOM `Node` inside which the start position of the range is found.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-startcontainer① |

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

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

 The **`FocusEvent.relatedTarget`** read-only property is the
 secondary target, depending on the type of event:


| Event name | `target` | `relatedTarget` |
| --- | --- | --- |
| `blur` | The `EventTarget` losing focus | The `EventTarget` receiving focus (if any). |
| `focus` | The `EventTarget` receiving focus | The `EventTarget` losing focus (if any) |
| `focusin` | The `EventTarget` receiving focus | The `EventTarget` losing focus (if any) |
| `focusout` | The `EventTarget` losing focus | The `EventTarget` receiving focus (if any) |

 Note that many elements can't have focus, which is a common reason for `relatedTarget` to be
 `null`. `relatedTarget` may also be set to `null` for
 security reasons, like when tabbing in or out of a page.

`MouseEvent.relatedTarget` is a similar property for mouse events.

Value
-----

An instance of `EventTarget`.

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

| Specification |
| --- |
| UI Events # dom-focusevent-relatedtarget |

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

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

See also
--------

* The `FocusEvent` interface it belongs to.
FocusEvent: FocusEvent() constructor
====================================

 The **`FocusEvent()`** constructor returns a newly created
 `FocusEvent` object with an optional `EventTarget`. When the
 event has both a source and a destination, the `relatedTarget` value must be
 set to the other target.

Syntax
------


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

### Parameters

*The `FocusEvent()` constructor also inherits arguments from
`UIEvent()` and from `Event()`.*

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `blur`, `focus`, `focusin`, or `focusout`.


`options` Optional

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

`relatedTarget` Optional

An `EventTarget` representing the secondary target of a `FocusEvent`. It defaults to `null`.


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

| Specification |
| --- |
| UI Events # dom-focusevent-focusevent |

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

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

See also
--------

* The `FocusEvent` interface it belongs to.
XRLayerEvent: layer property
============================

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

The **`layer`** property of the `XRLayerEvent` interface is a reference to the `XRLayer` which generated the event.

Value
-----

An `XRLayer`.

Examples
--------

### Using the `layer` property

In this example, the `layer` property is used to obtain the `XRLayer` object that sent the event.


```js
myLayer.addEventListener("redraw", (e) => {
  if (typeof e.layer === "XRQuadLayer") {
    // redraw quad layer
  }
});
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrlayerevent-layer |

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

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

See also
--------

* `XRLayer`
XRLayerEvent: XRLayerEvent() constructor
========================================

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

The **`XRLayerEvent`** constructor creates and returns a new `XRLayerEvent` object. These events relate to a change of state of an `XRLayer` object.

Syntax
------


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

### Parameters

`type`

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


`options`

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

`layer`

The `XRLayer` to which the event is to be delivered.


### Return value

 A new `XRLayer` object representing an object of the
 specified type and configured as described by the `eventInitDict` parameter.

Examples
--------

### Creating a new `XRLayerEvent`

In this example, a new `redraw` event is created for an `XRQuadLayer`.


```js
const redrawEvent = new XRLayerEvent("redraw", {
  layer: quadLayer,
});

quadLayer.dispatchEvent();
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrlayerevent-xrlayerevent |

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

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

See also
--------

* `XRLayer`
* `EventTarget.dispatchEvent()`
ExtendableCookieChangeEvent: ExtendableCookieChangeEvent() constructor
======================================================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`ExtendableCookieChangeEvent()`** constructor creates a new `ExtendableCookieChangeEvent` object
 which is the event type passed to `cookiechange` event fired at the `ServiceWorkerGlobalScope` when any cookie changes occur which match the service worker's cookie change subscription list.
 This constructor is called by the browser when a change event occurs.

**Note:** This event constructor is generally not needed for production websites. It's primary use is for tests that require an instance of this event.

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

Syntax
------


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

### Parameters

`type`

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


`options` Optional

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

`changed` Optional

An array containing a changed cookie.

`deleted` Optional

An array containing a deleted cookie.


### Return value

A new `ExtendableCookieChangeEvent` object.

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

| Specification |
| --- |
| Cookie Store API # dom-extendablecookiechangeevent-extendablecookiechangeevent |

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

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

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`changed`** read-only property of the `ExtendableCookieChangeEvent` interface returns any cookies that have been changed by the given `ExtendableCookieChangeEvent` instance.

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

Value
-----

An array of objects containing the changed cookie(s). Each object contains the following properties:

`name`

A string containing the name of the cookie.

`value`

A string containing the value of the cookie.

`domain`

A string containing the domain of the cookie.

`path`

A string containing the path of the cookie.

`expires`

A timestamp, given as Unix time in milliseconds, containing the expiration date of the cookie.

`secure`

A `boolean` indicating whether the cookie is from a site with a secure context (HTTPS rather than HTTP).

`sameSite`

One of the following `SameSite` values:

`"strict"`

Cookies will only be sent in a first-party context and not be sent with requests initiated by third party websites.

`"lax"`

Cookies are not sent on normal cross-site subrequests (for example to load images or frames into a third party site), but are sent when a user is navigating within the origin site (i.e. when following a link).

`"none"`

Cookies will be sent in all contexts.


`partitioned`

A boolean indicating whether the cookie is a partitioned cookie (`true`) or not (`false`). See Cookies Having Independent Partitioned State (CHIPS) for more information.

Examples
--------

In this example when the cookie is set, the event listener logs the `changed` property to the console. The first item in that array contains an object representing the cookie that has just been set.


```js
self.addEventListener("cookiechange", (event) => {
  console.log(event.changed[0]);
});

const one_day = 24 \* 60 \* 60 \* 1000;
cookieStore.set({
  name: "cookie1",
  value: "cookie1-value",
  expires: Date.now() + one_day,
  domain: "example.com",
});
```

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

| Specification |
| --- |
| Cookie Store API # dom-extendablecookiechangeevent-changed |

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

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