recursal/MDN huggingface dataset:
DocumentType: publicId property
===============================

The read-only **`publicId`** property of the `DocumentType` returns a formal identifier of the document.

For synthetic `DocumentType`, this property reflects the value given in parameter to `DOMImplementation.createDocumentType()`.

For HTML documents, browsers always set it up to `html`, whatever the actual `DOCTYPE` in the source code is. For SVG documents, for example, it can be `"-//W3C//DTD SVG 1.1//EN"`.

Value
-----

A string.

Examples
--------


```js
const docType = document.implementation.createDocumentType(
  "svg",
  "-//W3C//DTD SVG 1.1//EN",
  "http://www.w3.org/2000/svg",
);

console.log(docType.publicId); // Displays "-//W3C//DTD SVG 1.1//EN"
```

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

| Specification |
| --- |
| DOM Standard # dom-documenttype-publicid |

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

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

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

**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 **`MediaStreamTrackGenerator()`** constructor creates a new `MediaStreamTrackGenerator` object which consumes a stream of media frames and exposes a `MediaStreamTrack`.

Syntax
------


```js
new MediaStreamTrackGenerator(options)
```

### Parameters

`options`

An object containing the property `kind`, which is one of the following strings:

`"audio"`

Specifies that the stream accepts `AudioTrack` objects.

`"video"`

Specifies that the stream accepts `VideoTrack` objects.


Exceptions
----------

`TypeError`

Thrown if `init.kind` is not `"video"` or `"audio"`.

Examples
--------

In the following example a new video `MediaStreamTrackGenerator` is created.


```js
const trackGenerator = new MediaStreamTrackGenerator({ kind: "video" });
```

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

#### No specification found

No specification data found for `api.MediaStreamTrackGenerator.MediaStreamTrackGenerator`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* Insertable streams for MediaStreamTrack
MediaStreamTrackGenerator: writable property
============================================

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

**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 **`writable`** property of the `MediaStreamTrackGenerator` interface returns a `WritableStream`. This allows the writing of media frames to the `MediaStreamTrackGenerator`. The frames will be audio or video. The type is dictated by the kind of `MediaStreamTrackGenerator` that was created.

Value
-----

A `WritableStream`.

Examples
--------

In the following example video frames are transformed then written to the `WritableStream` accessed with `MediaStreamTrackGenerator.writable`.


```js
const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: "video" });

/\* \*/

trackProcessor.readable
  .pipeThrough(transformer)
  .pipeTo(trackGenerator.writable);
```

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

#### No specification found

No specification data found for `api.MediaStreamTrackGenerator.writable`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

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

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

The **`hide()`** method of the `VirtualKeyboard` interface programmatically hides the on-screen virtual keyboard. This is useful when the page needs to implement its own virtual keyboard logic by using the VirtualKeyboard API.

This method only works if the currently-focused element's `virtualKeyboardPolicy` attribute is set to `manual` and `inputmode` isn't set to `none`.

The `hide()` method always returns `undefined` and triggers a `geometrychange` event.

Syntax
------


```js
hide()
```

### Parameters

None.

### Return value

Undefined.

Example
-------

The code snippet below shows how to use the `virtualkeyboardpolicy` attribute to prevent the browser from showing the virtual keyboard on click or tap. The code also uses the `navigator.virtualKeyboard.show()` and `navigator.virtualKeyboard.hide()` methods to show and hide the virtual keyboard when a button is clicked:


```js
<div contenteditable virtualkeyboardpolicy="manual" id="editor"></div>
<button id="edit-button">Edit</button>
<script>
  if ("virtualKeyboard" in navigator) {
    const editor = document.getElementById("editor");
    const editButton = document.getElementById("edit-button");
    let isEditing = false;

    editButton.addEventListener("click", () => {
      if (isEditing) {
        navigator.virtualKeyboard.hide();
        editButton.textContent = "Edit";
      } else {
        editor.focus();
        navigator.virtualKeyboard.show();
        editButton.textContent = "Save changes";
      }

      isEditing = !isEditing;
    });
  }
</script>
```

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

| Specification |
| --- |
| VirtualKeyboard API # dom-virtualkeyboard-hide |

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

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

See also
--------

* The VirtualKeyboard API
* Full control with the VirtualKeyboard API
VirtualKeyboard: show() method
==============================

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

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

The **`show()`** method of the `VirtualKeyboard` interface programmatically shows the on-screen virtual keyboard. This is useful when the page needs to implement its own virtual keyboard logic, especially when using the `virtualkeyboardpolicy` attribute on `contenteditable` elements as explained in Control the virtual keyboard on `contenteditable` elements.

This method only works if the currently-focused element is a form control — such as an `<input>` or `<textarea>` element — or if the focused element is `contenteditable`, and the currently-focused element's `virtualKeyboardPolicy` attribute is set to `manual` and `inputmode` isn't set to `none`.

The `show()` method always returns `undefined` and triggers a `geometrychange` event.

Syntax
------


```js
show()
```

### Parameters

None.

### Return value

Undefined.

Example
-------

The code snippet below shows how to use the `virtualkeyboardpolicy` attribute to prevent the browser from showing the virtual keyboard on click or tap. The code also uses the `navigator.virtualKeyboard.show()` and `navigator.virtualKeyboard.hide()` methods to show and hide the virtual keyboard when a button is clicked:


```js
<div contenteditable virtualkeyboardpolicy="manual" id="editor"></div>
<button id="edit-button">Edit</button>
<script>
  if ("virtualKeyboard" in navigator) {
    const editor = document.getElementById("editor");
    const editButton = document.getElementById("edit-button");
    let isEditing = false;

    editButton.addEventListener("click", () => {
      if (isEditing) {
        navigator.virtualKeyboard.hide();
        editButton.textContent = "Edit";
      } else {
        editor.focus();
        navigator.virtualKeyboard.show();
        editButton.textContent = "Save changes";
      }

      isEditing = !isEditing;
    });
  }
</script>
```

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

| Specification |
| --- |
| VirtualKeyboard API # dom-virtualkeyboard-show |

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

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

See also
--------

* The VirtualKeyboard API
* Full control with the VirtualKeyboard API
VirtualKeyboard: geometrychange event
=====================================

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

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

 The **`geometrychange`** event of the `VirtualKeyboard`
 interface fires when the on-screen virtual keyboard is toggled between shown and hidden states.

The `geometrychange` event is useful to detect when the virtual keyboard appears and disappears, so you can adjust the layout as appropriate. This is necessary when using the Virtual Keyboard API to disable the browser's default automatic resizing of the viewport when the virtual keyboard is shown and hidden.

Syntax
------

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


```js
navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {});

navigator.virtualKeyboard.ongeometrychange = (event) => {};
```

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

A generic `Event`.

Examples
--------

The following code snippet uses the `geometrychange` event to detect when the virtual keyboard geometry changes, and then accesses the `boundingRect` property to query the size and position of the virtual keyboard:


```js
if ("virtualKeyboard" in navigator) {
  navigator.virtualKeyboard.overlaysContent = true;

  navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
    const { x, y, width, height } = event.target.boundingRect;
  });
}
```

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

| Specification |
| --- |
| VirtualKeyboard API # dom-virtualkeyboard-ongeometrychange |

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

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

See also
--------

* The VirtualKeyboard API
* Full control with the VirtualKeyboard API
VirtualKeyboard: overlaysContent property
=========================================

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

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

The **`overlaysContent`** property of the VirtualKeyboard interface can be used to opt out of the automatic way in which browsers handle on-screen virtual keyboards by reducing the size of the viewport to make space for them.

If the `overlaysContent` property is set to `true`, the browser no longer resizes the viewport when the virtual keyboard appears. The virtual keyboard instead overlays the content of the web page, and you can adapt the page layout as appropriate using the Virtual Keyboard API and your own custom CSS and JavaScript.

Value
-----

A boolean. `false` by default, set it to `true` to opt out of the browser's automatic handling of the on-screen virtual keyboard.

Example
-------


```js
if ("virtualKeyboard" in navigator) {
  console.log(navigator.virtualKeyboard.overlaysContent); // false
  navigator.virtualKeyboard.overlaysContent = true; // Opt out of the automatic handling.
}
```

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

| Specification |
| --- |
| VirtualKeyboard API # dom-virtualkeyboard-overlayscontent |

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

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

See also
--------

* The VirtualKeyboard API
* Full control with the VirtualKeyboard API
VirtualKeyboard: boundingRect property
======================================

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

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

The **`boundingRect`** property of the `VirtualKeyboard` interface contains a `DOMRect` indicating the position and size of the on-screen virtual keyboard that overlays the web page.

The on-screen virtual keyboard will overlay the viewport when the Virtual Keyboard API is used to prevent the browser from resizing the viewport automatically. This is done by setting the `overlaysContent` property to `true`.

Value
-----

A `DOMRect` which indicates the position and size of the virtual keyboard in the viewport.

The `x`, `y`, `width`, and `height` coordinates of the rectangle are useful to reposition content in the webpage that needs to be visible even when the virtual keyboard is displayed.


```js
const { x, y, width, height } = navigator.virtualKeyboard.boundingRect;
```

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

| Specification |
| --- |
| VirtualKeyboard API # dom-virtualkeyboard-boundingrect |

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

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

See also
--------

* The VirtualKeyboard API
* Full control with the VirtualKeyboard API
Lock: name property
===================

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

 The **`name`** read-only property of
 the `Lock` interface returns the *name* passed to
 `LockManager.request` selected when the lock was requested.

 The name of a lock is passed by script when the lock is requested. The name is selected
 by the developer to represent an abstract resource for which use is being coordinated
 across multiple tabs, workers, or other code within the origin. For example, if only one
 tab of a web application should be synchronizing network resources with an offline
 database, it could use a lock name such as `"net_db_sync"`.

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

Value
-----

A string.

Examples
--------

 The following examples show how the name property passed in the call
 to `LockManager.request()`. `LockManager` is the object returned
 by `navigator.locks`.


```js
navigator.locks.request("net\_db\_sync", show_lock_properties);

function show\_lock\_properties(lock) {
  console.log(`The lock name is: ${lock.name}`);
  console.log(`The lock mode is: ${lock.mode}`);
}
```

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

| Specification |
| --- |
| Web Locks API # dom-lock-name |

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

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

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

 The **`mode`** read-only property of the `Lock` interface returns the access mode passed to `LockManager.request()` when the lock was requested.
 The mode is either `"exclusive"` (the default) or `"shared"`.

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

Value
-----

One of `"exclusive"` or `"shared"`.

Examples
--------

 The following examples show how the mode property is passed in the call to `LockManager.request()`.
 `LockManager` is the object returned by `navigator.locks`.


```js
// Should show "exclusive" (the default)
navigator.locks.request("my\_resource", show_lock_properties);

// Should show "exclusive"
navigator.locks.request(
  "my\_resource",
  { mode: "exclusive" },
  show_lock_properties,
);

// Should show "shared"
navigator.locks.request(
  "my\_resource",
  { mode: "shared" },
  show_lock_properties,
);

function show\_lock\_properties(lock) {
  console.log(`The lock name is: ${lock.name}`);
  console.log(`The lock mode is: ${lock.mode}`);
}
```

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

| Specification |
| --- |
| Web Locks API # dom-lock-mode |

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

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

 The read-only **`sheet`** property of the `HTMLStyleElement` interface
 contains the stylesheet associated with that element.

An `StyleSheet` is always associated with a `HTMLStyleElement`, unless its `type` attribute is not `text/css`.

Value
-----

A `StyleSheet` object, or `null` if none is associated with the element.

Examples
--------


```html
<html>
  <header>
    <style media="print" />
    …
  </header>
</html>
```


The `sheet` property of the associated `HTMLStyleElement` object will return the `StyleSheet` object describing it.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-linkstyle-sheet |

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

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

 The **`HTMLStyleElement.media`** property specifies the
 intended destination medium for style information.

Value
-----

A string describing a single medium or a comma-separated list.

Examples
--------


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Test page</title>

    <link
 id="LinkedStyle"
 rel="stylesheet"
 href="document.css"
 media="screen" />
    <style id="InlineStyle" rel="stylesheet" media="screen, print">
 p {
 color: blue;
 }
 </style>
  </head>
  <body>
    <script>
 alert("LinkedStyle: " + document.getElementById("LinkedStyle").media); // 'screen'
 alert("InlineStyle: " + document.getElementById("InlineStyle").media); // 'screen, print'
 </script>
  </body>
</html>
```

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

| Specification |
| --- |
| HTML Standard # dom-style-media |

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

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

**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.

 The **`HTMLStyleElement.type`** property returns the type of the current style.
 The value mirrors the HTML `<style>` element's `type` attribute.

Authors should not use this property or rely on the value.

Value
-----

The permitted values are an empty string or a case-insensitive match for "text/css".

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

| Specification |
| --- |
| HTML Standard # dom-style-type |

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

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

See also
--------

* `SVGStyleElement.type`
DeviceMotionEventAcceleration: z property
=========================================

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

 The **`z`** read-only property of the `DeviceMotionEventAcceleration` interface indicates the amount of acceleration that occurred along the Z
 axis in a `DeviceMotionEventAcceleration`
 object.

Value
-----

 A `double` indicating the amount of acceleration along the Z axis.
 See Accelerometer values explained for details.

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

| Specification |
| --- |
| DeviceOrientation Event Specification # dom-devicemotioneventacceleration-z |

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

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

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

 The **`x`** read-only property of the `DeviceMotionEventAcceleration` interface indicates the amount of acceleration that occurred along the X
 axis in a `DeviceMotionEventAcceleration`
 object.

Value
-----

 A `double` indicating the amount of acceleration along the X axis.
 See Accelerometer values explained for details.

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

| Specification |
| --- |
| DeviceOrientation Event Specification # dom-devicemotioneventacceleration-x |

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

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

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

 The **`y`** read-only property of the `DeviceMotionEventAcceleration` interface indicates the amount of acceleration that occurred along the Y
 axis in a `DeviceMotionEventAcceleration`
 object.

Value
-----

 A `double` indicating the amount of acceleration along the Y axis.
 See Accelerometer values explained for details.

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

| Specification |
| --- |
| DeviceOrientation Event Specification # dom-devicemotioneventacceleration-y |

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

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

 If the underlying element collection contains radio buttons, the
 **`RadioNodeList.value`** property represents the checked radio
 button. On retrieving the `value` property, the `value` of the
 currently `checked` radio button is returned as a string. If the collection
 does not contain any radio buttons or none of the radio buttons in the collection is in
 `checked` state, the empty string is returned. On setting the
 `value` property, the first radio button input element whose
 `value` property is equal to the new value will be set to
 `checked`.

Syntax
------


```js
value = radioNodeList.value
radioNodeList.value = string
```

Example
-------

### HTML


```html
<form>
  <label><input type="radio" name="color" value="blue" />Blue</label>
  <label><input type="radio" name="color" value="red" />Red</label>
</form>
```

### JavaScript


```js
// Get the form
const form = document.forms[0];

// Get the form's radio buttons
const radios = form.elements["color"];

// Choose the "red" option
radios.value = "red";
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-radionodelist-value |

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

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

See also
--------

* The `<form>`, `<fieldset>`, `<input>`
 elements.