recursal/MDN huggingface dataset:
RTCSctpTransport: maxMessageSize property
=========================================

The **`maxMessageSize`** read-only property of the `RTCSctpTransport` interface indicates the maximum size of a message that can be sent using the `RTCDataChannel.send()` method.

Value
-----

An integer value giving the maximum size, in bytes, of a message which can be sent using the `RTCDataChannel.send()` method.

Examples
--------

This example shows how you might split up a string into small enough parts to send based on maximum message size.


```js
// Function splits strings to a specified size and returns array.
function splitStringToMax(str, maxLength) {
  const result = [];
  let i = 0;
  while (i < str.length) {
    result.push(str.substring(i, i + maxLength));
    i += maxLength;
  }
  return result;
}

const peerConnection = new RTCPeerConnection(options);
const channel = peerConnection.createDataChannel("chat");
channel.onopen = (event) => {
  const maximumMessageSize = peerConnection.sctp.maxMessageSize;
  const textToSend = "This is my possibly overly long string!";
  splitStringToMax(textToSend, maximumMessageSize).forEach((elem) => {
    channel.send(elem);
  });
};
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcsctptransport-maxmessagesize |

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

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

See also
--------

* `RTCSctpTransport`
* Understanding message size limits section of Using WebRTC data channels
RTCSctpTransport: state property
================================

The **`state`** read-only property of the `RTCSctpTransport` interface provides information which describes a Stream Control Transmission Protocol (SCTP) transport state.

Value
-----

A string whose value is one of the following:

`connecting`

The initial state when the connection is being established.

`connected`

The connection is open for data transmission.

`closed`

The connection is closed and can no longer be used.

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcsctptransport-state |

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

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

See also
--------

* `RTCSctpTransport`
RTCSctpTransport: maxChannels property
======================================

The **`maxChannels`** read-only property of the `RTCSctpTransport` interface indicates the maximum number of `RTCDataChannel` objects that can be opened simultaneously.

Value
-----

An integer value indicating the maximum number of `RTCDataChannel` objects that can be opened simultaneously, or `null` before the SCTP transport goes into the "connected" state.

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcsctptransport-maxchannels |

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

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

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

**Note:** A web developer doesn't typically need to call this constructor, as the browser creates these objects itself when firing events.

Syntax
------


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

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `start`, `end`, `error`, `pause`, `resume`, `mark`, or `boundary`.


`options`

An object that, *in addition to the properties defined in `Event()`*, has the following properties:

`utterance`

A `SpeechSynthesisUtterance` object, which is the speech request the event was triggered on.

`charIndex` Optional

The index position of the character in `SpeechSynthesisUtterance.text` that was being spoken when the event was triggered. Its default value is `0`.

`charLength` Optional

The number of characters left to be spoken after the character at the `charIndex` position. Its default value is `0`.

`elapsedTime` Optional

The elapsed time in seconds, after the `SpeechSynthesisUtterance.text` started being spoken, at which the event was triggered. Its default value is `0`.

`name` Optional

The name associated with certain types of events: the name of the SSML marker reached in the case of a `mark` event, or the type of boundary reached in the case of a `boundary` event. It defaults to the empty string (`""`).


### Return value

A new `SpeechSynthesisEvent` object.

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

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisevent-speechsynthesisevent |

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

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

See also
--------

* `SpeechSynthesisErrorEvent`
SpeechSynthesisEvent: charIndex property
========================================

The **`charIndex`** read-only property of the `SpeechSynthesisUtterance` interface returns the index position of the character in `SpeechSynthesisUtterance.text` that was being spoken when the event was triggered.

Value
-----

A number.

Examples
--------


```js
utterThis.onpause = (event) => {
  const char = event.utterance.text.charAt(event.charIndex);
  console.log(
    `Speech paused at character ${event.charIndex} of "${event.utterance.text}", which is "${char}".`,
  );
};
```

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

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisevent-charindex |

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

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

See also
--------

* Web Speech API
SpeechSynthesisEvent: utterance property
========================================

The **`utterance`** read-only property of the `SpeechSynthesisUtterance` interface returns the `SpeechSynthesisUtterance` instance that the event was triggered on.

Value
-----

A `SpeechSynthesisUtterance` object.

Examples
--------


```js
utterThis.onpause = (event) => {
  const char = event.utterance.text.charAt(event.charIndex);
  console.log(
    `Speech paused at character ${event.charIndex} of "${event.utterance.text}", which is "${char}".`,
  );
};
```

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

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisevent-utterance |

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

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

See also
--------

* Web Speech API
SpeechSynthesisEvent: name property
===================================

 The **`name`** read-only property of the `SpeechSynthesisUtterance` interface returns the name associated with certain types of events occurring as the `SpeechSynthesisUtterance.text` is being spoken:
 the name of the SSML marker reached in the case of a `mark` event, or the type of boundary reached in the case of a `boundary` event.

Value
-----

A string.

Examples
--------


```js
utterThis.onboundary = (event) => {
  console.log(
    `${event.name} boundary reached after ${event.elapsedTime} seconds.`,
  );
};
```

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

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisevent-name |

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

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

See also
--------

* Web Speech API
SpeechSynthesisEvent: elapsedTime property
==========================================

The **`elapsedTime`** read-only property of the `SpeechSynthesisEvent` returns the elapsed time in seconds, after the `SpeechSynthesisUtterance.text` started being spoken, at which the event was triggered.

Value
-----

A float containing the elapsed time, in seconds.

**Note:** Early versions of the specification required the elapsed time in milliseconds.
 Check the compatibility table below for your browser.


Examples
--------


```js
utterThis.onboundary = (event) => {
  console.log(
    `${event.name} boundary reached after ${event.elapsedTime} seconds.`,
  );
};
```

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

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisevent-elapsedtime |

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

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

See also
--------

* Web Speech API
SpeechSynthesisEvent: charLength property
=========================================

The read-only **`charLength`** property of the `SpeechSynthesisEvent` interface returns the number of characters left to be spoken after the character at the `charIndex` position.

If the speech engine can't determine it, it returns 0.

Value
-----

An integer.

Examples
--------


```js
utterThis.onpause = (event) => {
  const char = event.utterance.text.charAt(event.charIndex);
  const charLeft = event.charLength;
  if (charLeft) {
    console.log(
      `Speech paused. There are still ${charLeft} characters to be spoken.`,
    );
  } else {
    console.log(
      "Speech paused. The underlying speech engine can't tell how many characters are left.",
    );
  }
};
```

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

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisevent-charlength |

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

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

The **`HTMLSelectElement.showPicker()`** method displays the browser picker for a `select` element.

This is the same picker that would normally be displayed when the element is selected, but can be triggered from a button press or other user interaction.

Syntax
------


```js
showPicker()
```

### Parameters

None.

### Return value

None (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the element is not mutable, meaning that the user cannot modify it and/or that it cannot be automatically prefilled.

`NotAllowedError` `DOMException`

Thrown if not explicitly triggered by a user action such as a touch gesture or mouse click (the picker requires Transient activation).

`NotSupportedError` `DOMException`

Thrown if the element associated with the picker is not being rendered.

`SecurityError` `DOMException`

Thrown if called in a cross-origin iframe.

Security considerations
-----------------------

Transient user activation is required.
 The user has to interact with the page or a UI element in order for this feature to work.

The method is only allowed to be called in same-origin iframes; an exception is thrown if this is called in a cross-origin iframe.

Examples
--------

### Feature detection

The code below shows how to check if `showPicker()` is supported:


```js
if ("showPicker" in HTMLSelectElement.prototype) {
  // showPicker() is supported.
}
```

### Launching the picker

This example shows how to use a button to launch the picker for a `<select>` element with two options.

#### HTML


```html
<p>
  <select>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <button type="button">Show Picker</button>
</p>
```


#### JavaScript

 The code gets the `<button>` and adds a listener for its `click` event.
 The event handler gets the `<select>` element and calls `showPicker()` on it.


```js
const button = document.querySelector("button");
button.addEventListener("click", (event) => {
  const select = event.srcElement.previousElementSibling;
  try {
    select.showPicker();
  } catch (error) {
    window.alert(error);
  }
});
```

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

| Specification |
| --- |
| HTML Standard # dom-select-showpicker |

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

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

See also
--------

* `<select>`
* `HTMLSelectElement`
* `HTMLInputElement.showPicker()`
HTMLSelectElement: item() method
================================

 The **`HTMLSelectElement.item()`** method returns the
 `Element` corresponding to the `HTMLOptionElement` whose
 position in the options list corresponds to the index given in the parameter, or
 `null` if there are none.

 In JavaScript, using the array bracket syntax with an `unsigned long`, like
 `selectElt[index]` is equivalent to
 `selectElt.namedItem(index)`.

Syntax
------


```js
item(index)
// or collection[index]
```

### Parameters

* `index` is an `unsigned long`.
### 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
// Returns the HTMLOptionElement representing #o2
elem1 = document.forms[0]["myFormControl"][1];
```

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

| Specification |
| --- |
| HTML Standard # dom-select-item-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: form property
================================

 The **`HTMLSelectElement.form`** read-only property returns a
 `HTMLFormElement` representing the form that this element is associated
 with. If the element is not associated with a `<form>` element, then
 it returns `null`.

Value
-----

A `HTMLFormElement`.

Examples
--------


```html
<form id="pet-form">
  <label for="pet-select">Choose a pet</label>
  <select name="pets" id="pet-select">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="parrot">Parrot</option>
  </select>

  <button type="submit">Submit</button>
</form>

<label for="lunch-select">Choose your lunch</label>
<select name="lunch" id="lunch-select">
  <option value="salad">Salad</option>
  <option value="sandwich">Sandwich</option>
</select>

<script>
 const petSelect = document.getElementById("pet-select");
 const petForm = petSelect.form; // <form id="pet-form">

 const lunchSelect = document.getElementById("lunch-select");
 const lunchForm = lunchSelect.form; // null
</script>
```

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

| Specification |
| --- |
| HTML Standard # dom-fae-form-dev |

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

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

 The **`HTMLSelectElement.remove()`** method removes the element
 at the specified index from the options collection for this select element.

Syntax
------


```js
remove(index)
```

### Parameters

* `index` is a zero-based long for the index of the `HTMLOptionElement`
 to remove from the collection. If the index is not found the method has no effect.
### Return value

None (`undefined`).

Examples
--------


```html
<select id="existingList" name="existingList">
  <option value="1">Option: Value 1</option>
  <option value="2">Option: Value 2</option>
  <option value="3">Option: Value 3</option>
</select>
```



```js
let sel = document.getElementById("existingList");
sel.remove(1);
```


HTML is now:


```html
<select id="existingList" name="existingList">
  <option value="1">Option: Value 1</option>
  <option value="3">Option: Value 3</option>
</select>
```

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

| Specification |
| --- |
| HTML Standard # dom-select-remove |

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

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

See also
--------

* `Element.remove`, the method that gets called when remove is called
 without arguments on a `HTMLSelectElement`.
* `HTMLSelectElement` that implements it.
HTMLSelectElement: type property
================================

 The **`HTMLSelectElement.type`**
 read-only property returns the form control's `type`.

Value
-----

One of the following:

* `"select-multiple"` if multiple values can be selected.
* `"select-one"` if only one value can be selected.
Examples
--------


```js
switch (select.type) {
  case "select-multiple":
    // Multiple values may be selected
    break;
  case "select-one":
    // Only one value may be selected
    break;
  default:
  // Non-standard value (or this isn't a SELECT element)
}
```

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

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

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

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

See also
--------

* The `<select>` HTML element, implementing this interface.
HTMLSelectElement: add() method
===============================

 The **`HTMLSelectElement.add()`** method adds an element to the
 collection of `option` elements for this `select` element.

Syntax
------


```js
add(item)
add(item, before)
```

### Parameters

`item`

 An `HTMLOptionElement` or
 `HTMLOptGroupElement`

`before` Optional

 An element of the collection, or an index of type
 *long*, representing the *item* should be inserted before. If this
 parameter is `null` (or the index does not exist), the new element is
 appended to the end of the collection.


### Return value

None (`undefined`).

### Exceptions

`HierarchyRequestError` `DOMException`

Thrown if the *item* passed to the method is an ancestor of the `HTMLSelectElement`.

Examples
--------

### Creating Elements from Scratch


```js
const sel = document.createElement("select");
const opt1 = document.createElement("option");
const opt2 = document.createElement("option");

opt1.value = "1";
opt1.text = "Option: Value 1";

opt2.value = "2";
opt2.text = "Option: Value 2";

sel.add(opt1, null);
sel.add(opt2, null);

/\*
 Produces the following, conceptually:

 <select>
 <option value="1">Option: Value 1</option>
 <option value="2">Option: Value 2</option>
 </select>
\*/
```


The before parameter is optional. So the following is accepted.


```js
sel.add(opt1);
sel.add(opt2);
```

### Append to an Existing Collection


```js
const sel = document.getElementById("existingList");

const opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";

sel.add(opt, null);

/\*
 Takes the existing following select object:

 <select id="existingList">
 <option value="1">Option: Value 1</option>
 <option value="2">Option: Value 2</option>
 </select>

 And changes it to:

 <select id="existingList">
 <option value="1">Option: Value 1</option>
 <option value="2">Option: Value 2</option>
 <option value="3">Option: Value 3</option>
 </select>
\*/
```


The before parameter is optional. So the following is accepted.


```js
sel.add(opt);
```

### Inserting to an Existing Collection


```js
const sel = document.getElementById("existingList");

const opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";

sel.add(opt, sel.options[1]);

/\*
 Takes the existing following select object:

 <select id="existingList">
 <option value="1">Option: Value 1</option>
 <option value="2">Option: Value 2</option>
 </select>

 And changes it to:

 <select id="existingList">
 <option value="1">Option: Value 1</option>
 <option value="3">Option: Value 3</option>
 <option value="2">Option: Value 2</option>
 </select>
\*/
```

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLSelectElement: checkValidity() 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.checkValidity()`** method checks
 whether the element has any constraints and whether it satisfies them. If the element
 fails its constraints, the browser fires a cancelable `invalid` event at the
 element, and then returns `false`.

Syntax
------


```js
checkValidity()
```

### Parameters

None.

### Return value

Returns `true` if the value of the element has no validity problems; otherwise returns `false`.

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

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

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

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

See also
--------

* Form validation
HTMLSelectElement: options property
===================================

 The **`HTMLSelectElement.options`** read-only property returns
 a `HTMLOptionsCollection` of the `<option>` elements
 contained by the `<select>` element.

Value
-----

 A `HTMLOptionsCollection` containing the `<option>`
 elements contained by the `<select>` element.

Examples
--------

### HTML


```html
<label for="test">Label</label>
<select id="test">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>
```

### JavaScript


```js
window.addEventListener("DOMContentLoaded", () => {
  const select = document.getElementById("test");
  for (const option of select.options) {
    console.log(option.label); // "Option 1" and "Option 2"
  }
});
```

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

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

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

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

 The **`HTMLSelectElement.selectedIndex`** property is a
 `long` that reflects the index of the first or last selected
 `<option>` element, depending on the value of `multiple`. The
 value `-1` indicates that no element is selected.

Value
-----

A number.

Examples
--------

### HTML


```html
<p id="p">selectedIndex: 0</p>

<select id="select">
  <option selected>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
  <option>Option D</option>
  <option>Option E</option>
</select>
```

### JavaScript


```js
const selectElem = document.getElementById("select");
const pElem = document.getElementById("p");

// When a new <option> is selected
selectElem.addEventListener("change", () => {
  const index = selectElem.selectedIndex;
  // Add that data to the <p>
  pElem.textContent = `selectedIndex: ${index}`;
});
```

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

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

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

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

 The **`HTMLSelectElement.labels`** read-only property returns a
 `NodeList` of the `<label>` elements associated with the
 `<select>` element.

Value
-----

 A `NodeList` containing the `<label>` elements associated
 with the `<select>` element.

Examples
--------

### HTML


```html
<label id="label1" for="test">Label 1</label>
<select id="test">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>
<label id="label2" for="test">Label 2</label>
```

### JavaScript


```js
window.addEventListener("DOMContentLoaded", () => {
  const select = document.getElementById("test");
  for (const label of select.labels) {
    console.log(label.textContent); // "Label 1" and "Label 2"
  }
});
```

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

| Specification |
| --- |
| HTML Standard # dom-lfe-labels-dev |

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

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