recursal/MDN huggingface dataset:
Node: nodeValue property
========================

The **`nodeValue`** property of the `Node` interface returns or sets the value of the current node.

Value
-----

 A string containing the value of the current node, if any.
 For the document itself, `nodeValue` returns `null`.
 For text, comment, and CDATA nodes, `nodeValue` returns the content of the node.
 For attribute nodes, the value of the attribute is returned.

The following table shows the return values for different types of nodes.

| Node | Value of nodeValue |
| --- | --- |
| `CDATASection` | Content of the CDATA section |
| `Comment` | Content of the comment |
| `Document` | `null` |
| `DocumentFragment` | `null` |
| `DocumentType` | `null` |
| `Element` | `null` |
| `NamedNodeMap` | `null` |
| `ProcessingInstruction` | Entire content excluding the target |
| `Text` | Content of the text node |

**Note:** When `nodeValue` is defined to be `null`, setting it has no effect.

Example
-------


```html
<div id="d1">Hello world</div>
<!-- Example of comment -->
<output id="result">Not calculated yet.</output>
```


and the following script:


```js
let node = document.querySelector("body").firstChild;
let result = "<br/>Node names are:<br/>";
while (node) {
  result += `Value of ${node.nodeName}: ${node.nodeValue}<br/>`;
  node = node.nextSibling;
}

const output = document.getElementById("result");
output.innerHTML = result;
```

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

| Specification |
| --- |
| DOM Standard # dom-node-nodevalue |

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

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

 The read-only **`parentElement`** property of `Node` interface
 returns the DOM node's parent `Element`, or `null` if the node either has no
 parent, or its parent isn't a DOM `Element`.

Value
-----

 An `Element` that is the parent element of the current node,
 or `null` if there isn't one.

Example
-------


```js
if (node.parentElement) {
  node.parentElement.style.color = "red";
}
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-parentelement① |

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

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

See also
--------

* `Node.parentNode`
PictureInPictureEvent: PictureInPictureEvent() constructor
==========================================================

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

Syntax
------


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

### Parameters

`type`

A string representing the name of the event. It is case-sensitive and browsers set it to `enterpictureinpicture`, `leavepictureinpicture`, or `resize`.

`options`

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

`pictureInPictureWindow`

A `PictureInPictureWindow`.


### Return value

A new `PictureInPictureEvent` object.

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

| Specification |
| --- |
| Picture-in-Picture # dom-pictureinpictureevent-pictureinpictureevent |

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

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

See also
--------

* The `PictureInPictureEvent` interface it belongs to.
PictureInPictureEvent: pictureInPictureWindow property
======================================================

The read-only **`pictureInPictureWindow`** property of the `PictureInPictureEvent` interface returns the `PictureInPictureWindow` the event relates to.

Value
-----

A `PictureInPictureWindow`.

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

| Specification |
| --- |
| Picture-in-Picture # dom-pictureinpictureevent-pictureinpicturewindow |

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

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

See also
--------

* Picture-in-Picture API
VideoFrame: clone() method
==========================

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
The **`clone()`** method of the `VideoFrame` interface creates a new `VideoFrame` object referencing the same media resource as the original.

Syntax
------


```js
clone()
```

### Parameters

None.

### Return value

A new cloned `VideoFrame` object.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the `VideoFrame` object has been transferred.

Examples
--------

The following example clones a copy of `VideoFrame` as `videoFrame2`.


```js
let videoFrame2 = VideoFrame.clone();
```

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

| Specification |
| --- |
| WebCodecs # dom-videoframe-clone |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VideoFrame: duration 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
The **`duration`** property of the `VideoFrame` interface returns an integer indicating the duration of the video in microseconds.

Value
-----

An integer.

Examples
--------

The following example prints the `duration` to the console.


```js
console.log(VideoFrame.duration);
```

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

| Specification |
| --- |
| WebCodecs # dom-videoframe-duration |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VideoFrame: displayHeight 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
The **`displayHeight`** property of the `VideoFrame` interface returns the height of the `VideoFrame` after applying aspect ratio adjustments.

Value
-----

An integer.

Examples
--------

The following example prints the `displayHeight` to the console.


```js
console.log(VideoFrame.displayHeight);
```

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

| Specification |
| --- |
| WebCodecs # dom-videoframe-displayheight |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VideoFrame: codedHeight 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
The **`codedHeight`** property of the `VideoFrame` interface returns the height of the VideoFrame in pixels, potentially including non-visible padding, and prior to considering potential ratio adjustments.

Value
-----

An integer.

Examples
--------

The following example prints the `codedHeight` to the console.


```js
console.log(VideoFrame.codedHeight);
```

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

| Specification |
| --- |
| WebCodecs # dom-videoframe-codedheight |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VideoFrame: displayWidth 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
The **`displayWidth`** property of the `VideoFrame` interface returns the width of the `VideoFrame` after applying aspect ratio adjustments.

Value
-----

An integer.

Examples
--------

The following example prints the `displayWidth` to the console.


```js
console.log(VideoFrame.displayWidth);
```

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

| Specification |
| --- |
| WebCodecs # dom-videoframe-displaywidth |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VideoFrame: colorSpace 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
The **`colorSpace`** property of the `VideoFrame` interface returns a `VideoColorSpace` object representing the color space of the video.

Value
-----

A `VideoColorSpace` object.

Examples
--------

The following example prints the `colorSpace` to the console.


```js
const cnv = document.createElement("canvas");
// draw something on the canvas
// ...
const videoFrame = new VideoFrame(cnv, { timestamp: 0 });
console.log(videoFrame.colorSpace);
```

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

| Specification |
| --- |
| WebCodecs # dom-videoframe-colorspace |

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

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

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
The **`copyTo()`** method of the `VideoFrame` interface copies the contents of the `VideoFrame` to an `ArrayBuffer`.

Syntax
------


```js
copyTo(destination)
copyTo(destination, options)
```

### Parameters

`destination`

An `ArrayBuffer`, a `TypedArray`, or a `DataView` to copy to.

`options` Optional

An object containing the following:

`rect` Optional

The rectangle of pixels to copy from the `VideoFrame`. If unspecified, the `visibleRect` will be used. This is in the format of a dictionary object containing:

* `x`: The x-coordinate.
* `y`: The y-coordinate.
* `width`: The width of the frame.
* `height`: The height of the frame.

`layout` Optional

A list containing the following values for each plane in the `VideoFrame`:

`offset`

An integer representing the offset in bytes where the given plane begins.

`stride`

 An integer representing the number of bytes, including padding, used by each row of the plane.
 Planes may not overlap. If no `layout` is specified, the planes will be tightly packed.



### Return value

A `Promise` that resolves to the layout of the copy when the copy has completed.

Examples
--------

The following example copies the entire contents of `videoFrame`.


```js
let buffer = new Uint8Array(videoFrame.allocationSize());
let layout = await videoFrame.copyTo(buffer);
```

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

| Specification |
| --- |
| WebCodecs # dom-videoframe-copyto |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VideoFrame: timestamp 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
The **`timestamp`** property of the `VideoFrame` interface returns an integer indicating the timestamp of the video in microseconds.

Value
-----

An integer.

Examples
--------

The following example prints the `timestamp` to the console.


```js
console.log(VideoFrame.timestamp);
```

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

| Specification |
| --- |
| WebCodecs # dom-videoframe-timestamp |

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

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

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
The **`close()`** method of the `VideoFrame` interface clears all states and releases the reference to the media resource.

Syntax
------


```js
close()
```

### Parameters

None.

### Return value

Undefined.

Examples
--------

The following example shows the `VideoFrame` object being closed.


```js
VideoFrame.close();
```

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

| Specification |
| --- |
| WebCodecs # dom-videoframe-close |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VideoFrame: codedWidth 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
The **`codedWidth`** property of the `VideoFrame` interface returns the width of the `VideoFrame` in pixels, potentially including non-visible padding, and prior to considering potential ratio adjustments.

Value
-----

An integer.

Examples
--------

The following example prints the `codedWidth` to the console.


```js
console.log(VideoFrame.codedWidth);
```

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

| Specification |
| --- |
| WebCodecs # dom-videoframe-codedwidth |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VideoFrame: codedRect 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
The **`codedRect`** property of the `VideoFrame` interface returns a `DOMRectReadOnly` with the width and height matching `VideoFrame.codedWidth` and `VideoFrame.codedHeight`.

Value
-----

A `DOMRectReadOnly`.

Examples
--------

The following example prints the `codedRect` to the console.


```js
console.log(VideoFrame.codedRect);
```

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

| Specification |
| --- |
| WebCodecs # dom-videoframe-codedrect |

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

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

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
The **`allocationSize()`** method of the `VideoFrame` interface returns the number of bytes required to hold the video as filtered by options passed into the method.

Syntax
------


```js
allocationSize()
allocationSize(options)
```

### Parameters

`options` Optional

An object containing the following:

`rect` Optional

The rectangle of pixels to copy from the `VideoFrame`. If unspecified the `visibleRect` will be used. This is in the format of a dictionary object containing:

* `x`: The x-coordinate.
* `y`: The y-coordinate.
* `width`: The width of the frame.
* `height`: The height of the frame.

`layout` Optional

A list containing the following values for each plane in the `VideoFrame`. Planes may not overlap. If unspecified the planes will be tightly packed:

`offset`

An integer representing the offset in bytes where the given plane begins.

`stride`

An integer representing the number of bytes, including padding, used by each row of the plane.


### Return value

An integer containing the number of bytes needed to hold the frame as specified by `options`.

Examples
--------

In the following example the `allocationSize` is returned for the rectangle at top left with dimensions of 800 by 600.


```js
const videoRect = {
  x: 0,
  y: 0,
  width: 800,
  height: 600,
};
let size = VideoFrame.allocationSize({ rect: videoRect });
```

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

| Specification |
| --- |
| WebCodecs # dom-videoframe-allocationsize |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VideoFrame: visibleRect 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
The **`visibleRect`** property of the `VideoFrame` interface returns a `DOMRectReadOnly` describing the visible rectangle of pixels for this `VideoFrame`.

Value
-----

A `DOMRectReadOnly`.

Examples
--------

The following example prints the `visibleRect` to the console.


```js
console.log(VideoFrame.visibleRect);
```

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

| Specification |
| --- |
| WebCodecs # dom-videoframe-visiblerect |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TaskPriorityChangeEvent: previousPriority 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
The readonly **`previousPriority`** property of the `TaskPriorityChangeEvent` interface returns the priority of the corresponding `TaskSignal` before it was changed and this `prioritychange` event was emitted.

This is the value that was set in the `TaskPriorityChangeEvent` constructor argument `options.previous`.

The new priority of the task can be read from `event.target.priority`.

Value
-----

 A string, indicating the associated task's priority before it was changed.
 This will be one of: `"user-blocking"`, `"user-visible"`, `"background"`.

Examples
--------

The code below shows the `previousPriority` being obtained in a handler for a `prioritychange` event.


```js
// Listen for 'prioritychange' events on the controller's signal.
controller.signal.addEventListener("prioritychange", (event) => {
  const previousPriority = event.previousPriority;
  const newPriority = event.target.priority;
  console.log(
    `The priority changed from ${previousPriority} to ${newPriority}.`,
  );
});
```


A more complete live example can be found in `prioritychange` event > Examples.

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

| Specification |
| --- |
| Prioritized Task Scheduling # dom-taskprioritychangeevent-previouspriority |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TaskPriorityChangeEvent: TaskPriorityChangeEvent() 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
The **`TaskPriorityChangeEvent()`** constructor creates a new `TaskPriorityChangeEvent` object.

This object is created with a value indicating the previous priority of the task: the priority before it changed and this event was fired.

Syntax
------


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

### Parameters

`type`

 A string with the case-sensitive name of the associated event.
 User agents set it to `"prioritychange"`.


`options`

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

`previousPriority`

 A string indicating the *previous* priority of the task.
 One of: `"user-blocking"`, `"user-visible"`, `"background"`.



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

| Specification |
| --- |
| Prioritized Task Scheduling # dom-taskprioritychangeevent-taskprioritychangeevent |

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

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

 The **`Option()`** constructor creates a new
 `HTMLOptionElement`.

Syntax
------


```js
new Option()
new Option(text)
new Option(text, value)
new Option(text, value, defaultSelected)
new Option(text, value, defaultSelected, selected)
```

### Parameters

`text` Optional

 A string representing the content of the element, i.e. the
 displayed text. If this is not specified, a default value of "" (empty string) is
 used.


`value` Optional

 A string representing the value of the
 `HTMLOptionElement`, i.e. the value attribute of the equivalent
 `<option>`. If this is not specified, the value of text is used as the
 value, e.g. for the associated `<select>` element's value when the form
 is submitted to the server.


`defaultSelected` Optional

 A value of either `true` or `false` that sets the `selected`
 attribute value, i.e. so that this `<option>` will be the default value
 selected in the `<select>` element when the page is first loaded. If
 this is not specified, a default value of false is used. Note that a value of true
 does not set the option to selected if it is not already selected.


`selected` Optional

 A value of either `true` or `false` that sets the option's selected state; the default is false
 (not selected). If omitted, even if the defaultSelected argument is true, the option
 is not selected.


Examples
--------

### Just add new options


```js
/\* assuming we have the following HTML
<select id='s'>

</select>
\*/

const s = document.getElementById("s");
const options = [Four, Five, Six];

options.forEach((element, key) => {
  s[key] = new Option(element, key);
});
```

### Append options with different parameters


```js
/\* assuming we have the following HTML
<select id="s">
 <option>First</option>
 <option>Second</option>
 <option>Third</option>
</select>
\*/

const s = document.getElementById("s");
const options = ["zero", "one", "two"];

options.forEach((element, key) => {
  if (element === "zero") {
    s[key] = new Option(element, s.options.length, false, false);
  }
  if (element === "one") {
    s[key] = new Option(element, s.options.length, true, false); // Will add the "selected" attribute
  }
  if (element === "two") {
    s[key] = new Option(element, s.options.length, false, true); // Just will be selected in "view"
  }
});

/\* Result
<select id="s">
 <option value="0">zero</option>
 <option value="1" selected="">one</option>
 <option value="2">two</option> // User will see this as 'selected'
</select>
\*/
```

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

| Specification |
| --- |
| HTML Standard # dom-option-dev |

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

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

 The **`deleteData()`** method of the `CharacterData` interface
 removes all or part of the data from this `CharacterData` node.

Syntax
------


```js
characterData.deleteData(offset, count)
```

### Parameters

`offset`

 The number of bytes from the start of the data to remove from.
 `0` is the first character of the string.


`count`

The number of bytes to remove.

### Return value

None.

Exceptions
----------

`IndexSizeError` `DOMException`

Thrown if `offset` is greater than the length of the contained data.

Example
-------


```html
<span>Result: </span>A long string.
```



```js
const span = document.querySelector("span");
const textnode = span.nextSibling;

textnode.deleteData(1, 5);
```

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

| Specification |
| --- |
| DOM Standard # dom-characterdata-deletedata |

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

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

See also
--------

* `CharacterData.appendData()`, `CharacterData.insertData()`, `CharacterData.replaceData()`
* `CharacterData.data`