recursal/MDN huggingface dataset:
NodeList: values() method
=========================

 The **`NodeList.values()`** method returns an
 `iterator` allowing to go through all values contained
 in this object. The values are `Node` objects.

Syntax
------


```js
values()
```

### Return value

Returns an `iterator`.

Example
-------


```js
const node = document.createElement("div");
const kid1 = document.createElement("p");
const kid2 = document.createTextNode("hey");
const kid3 = document.createElement("span");

node.appendChild(kid1);
node.appendChild(kid2);
node.appendChild(kid3);

const list = node.childNodes;

// Using for...of
for (const value of list.values()) {
  console.log(value);
}
```


The result is:
```

<p>
#text "hey"
<span>
```

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

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

See also
--------

* Polyfill of `NodeList.prototype.values` in `core-js`
* `Node`
* `NodeList`
NodeList: length property
=========================

 The **`NodeList.length`** property returns the number of items
 in a `NodeList`.

Value
-----

An integer value representing the number of items in a `NodeList`.

Examples
--------

 The `length` property is often useful in DOM programming. It's often used to
 test the length of a list, to see if it exists at all. It's also commonly used as the
 iterator in a `for` loop, as in this example.


```js
// All the paragraphs in the document
const items = document.getElementsByTagName("p");

// For each item in the list,
// append the entire element as a string of HTML
let gross = "";
for (let i = 0; i < items.length; i++) {
  gross += items[i].innerHTML;
}

// gross is now all the HTML for the paragraphs
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-nodelist-length① |

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

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

 Returns a node from a `NodeList` by index. This method
 doesn't throw exceptions as long as you provide arguments. A value of `null`
 is returned if the index is out of range, and a `TypeError` is thrown if no
 argument is provided.

Syntax
------


```js
item(index)
```


 JavaScript also offers an array-like bracketed syntax for obtaining an item from a
 NodeList by index:


```js
nodeItem = nodeList[index];
```

### Parameters

* `index` is the index of the node to be fetched. The index is zero-based.
### Return value

The `index`th node in the `nodeList` returned by the `item` method.

### Exceptions

`TypeError`

Thrown if no argument is provided.

Examples
--------


```js
const tables = document.getElementsByTagName("table");
const firstTable = tables.item(1); // or tables[1] - returns the second table in the DOM
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-nodelist-item① |

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

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

 The **`forEach()`** method of the `NodeList`
 interface calls the callback given in parameter once for each value pair in the list, in
 insertion order.

Syntax
------


```js
forEach(callback)
forEach(callback, thisArg)
```

### Parameters

`callback`

 A function to execute on each element of `someNodeList`. It
 accepts 3 parameters:


`currentValue`

The current element being processed in `someNodeList`.

`currentIndex` Optional

 The index of the `currentValue` being processed in
 `someNodeList`.


`listObj` Optional

 The `someNodeList` that `forEach()` is being
 applied to.



`thisArg` Optional

 Value to use as
 `this`
 when executing `callback`.


### Return value

`undefined`.

Example
-------


```js
const node = document.createElement("div");
const kid1 = document.createElement("p");
const kid2 = document.createTextNode("hey");
const kid3 = document.createElement("span");

node.appendChild(kid1);
node.appendChild(kid2);
node.appendChild(kid3);

const list = node.childNodes;

list.forEach(function (currentValue, currentIndex, listObj) {
  console.log(`${currentValue}, ${currentIndex}, ${this}`);
}, "myThisArg");
```


The above code results in the following:
```

[object HTMLParagraphElement], 0, myThisArg
[object Text], 1, myThisArg
[object HTMLSpanElement], 2, myThisArg
```

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

| Specification |
| --- |
| DOM Standard # interface-nodelist |

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

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

See also
--------

* Polyfill of `NodeList.prototype.forEach` in `core-js`
* `Node`
* `NodeList`
NodeList: keys() method
=======================

 The **`NodeList.keys()`** method returns an
 `iterator` allowing to go through all keys contained
 in this object. The keys are `unsigned integer`.

Syntax
------


```js
keys()
```

### Return value

Returns an `iterator`.

Example
-------


```js
const node = document.createElement("div");
const kid1 = document.createElement("p");
const kid2 = document.createTextNode("hey");
const kid3 = document.createElement("span");

node.appendChild(kid1);
node.appendChild(kid2);
node.appendChild(kid3);

let list = node.childNodes;

// Using for...of
for (const key of list.keys()) {
  console.log(key);
}
```


The result is:
```

0
1
2
```

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

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

See also
--------

* Polyfill of `NodeList.prototype.keys` in `core-js`
* `Node`
* `NodeList`
ImageCapture: grabFrame() method
================================

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

 The **`grabFrame()`** method of the
 `ImageCapture` interface takes a snapshot of the live video in a
 `MediaStreamTrack` and returns a `Promise` that resolves with
 a `ImageBitmap` containing the snapshot.

Syntax
------


```js
grabFrame()
```

### Parameters

None.

### Return value

A `Promise` that resolves to an `ImageBitmap` object.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if `readyState` property of the `MediaStreamTrack` passing in the constructor is not `live`.

`UnknownError` `DOMException`

Thrown if the operation can't complete for any reason.

Examples
--------

 This example is extracted from this Simple Image Capture demo. It shows how to use the `Promise` returned by
 `grabFrame()` to copy the returned frame to a `<canvas>`
 element. For simplicity it does not show how to instantiate the
 `ImageCapture` object.


```js
let grabFrameButton = document.querySelector("button#grabFrame");
let canvas = document.querySelector("canvas");

grabFrameButton.onclick = grabFrame;

function grabFrame() {
  imageCapture
    .grabFrame()
    .then((imageBitmap) => {
      console.log("Grabbed frame:", imageBitmap);
      canvas.width = imageBitmap.width;
      canvas.height = imageBitmap.height;
      canvas.getContext("2d").drawImage(imageBitmap, 0, 0);
      canvas.classList.remove("hidden");
    })
    .catch((error) => {
      console.error("grabFrame() error: ", error);
    });
}
```

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

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-grabframe |

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

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

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

 The **`track`** read-only property of the
 `ImageCapture` interface returns a reference to the
 `MediaStreamTrack` passed to the
 `ImageCapture()` constructor.

Value
-----

A `MediaStreamTrack` object.

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

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-track |

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

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

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

 The **`getPhotoCapabilities()`**
 method of the `ImageCapture` interface returns a `Promise`
 that resolves with an object containing the ranges of
 available configuration options.

Syntax
------


```js
getPhotoCapabilities()
```

### Parameters

None.

### Return value

A `Promise` that resolves with an object containing the following properties:

`redEyeReduction`

Returns one of `"never"`, `"always"`, or `"controllable"`. The `"controllable"` value means the device's red-eye reduction is controllable by the user.

`imageHeight`

Returns an object indicating the image height range supported by the user agent.

`imageWidth`

Returns an object indicating the image width range supported by the user agent.

`fillLightMode`

Returns an array of available fill light options. Options include `auto`, `off`, or `flash`.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if `readyState` property of the `MediaStreamTrack` passing in the constructor is not `live`.

`OperationError` `DOMException`

Thrown if the operation can't complete for any reason.

Examples
--------

 The following example, extracted from Chrome's Image Capture / Photo Resolution Sample, uses the results from
 `getPhotoCapabilities()` to modify the size of an input range. This example
 also shows how the `ImageCapture` object is created using a
 `MediaStreamTrack` retrieved from a device's `MediaStream`.


```js
const input = document.querySelector('input[type="range"]');

let imageCapture;

navigator.mediaDevices
  .getUserMedia({ video: true })
  .then((mediaStream) => {
    document.querySelector("video").srcObject = mediaStream;

    const track = mediaStream.getVideoTracks()[0];
    imageCapture = new ImageCapture(track);

    return imageCapture.getPhotoCapabilities();
  })
  .then((photoCapabilities) => {
    const settings = imageCapture.track.getSettings();

    input.min = photoCapabilities.imageWidth.min;
    input.max = photoCapabilities.imageWidth.max;
    input.step = photoCapabilities.imageWidth.step;

    return imageCapture.getPhotoSettings();
  })
  .then((photoSettings) => {
    input.value = photoSettings.imageWidth;
  })
  .catch((error) => console.error("Argh!", error.name || error));
```

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

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-getphotocapabilities |

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

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

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

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

Syntax
------


```js
new ImageCapture(videoTrack)
```

### Parameters

`videoTrack`

 A `MediaStreamTrack` from which the still images will be taken. This
 can be any source, such as an incoming stream of a video conference, a playing movie,
 or the stream from a webcam.


### Return value

 A new `ImageCapture` object which can be used to capture still frames from
 the specified video track.

### Exceptions

`NotSupportedError` `DOMException`

Thrown if the `videoTrack` parameter's `kind` property is not `video`.

Examples
--------

 The following example shows how to use a call to
 `MediaDevices.getUserMedia()` to retrieve the
 `MediaStreamTrack` needed by the `ImageCapture()` constructor.


```js
navigator.mediaDevices
  .getUserMedia({ video: true })
  .then((mediaStream) => {
    document.querySelector("video").srcObject = mediaStream;
    const track = mediaStream.getVideoTracks()[0];
    imageCapture = new ImageCapture(track);
  })
  .catch((error) => console.error(error));
```

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

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-imagecapture |

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

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

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

 The **`takePhoto()`** method of the
 `ImageCapture` interface takes a single exposure using the video capture
 device sourcing a `MediaStreamTrack` and returns a `Promise`
 that resolves with a `Blob` containing the data.

Syntax
------


```js
takePhoto()
takePhoto(photoSettings)
```

### Parameters

`photoSettings` Optional

An object that sets options for the photo to be taken. The available options are:

`fillLightMode`

 The flash setting of the capture device, one of
 `"auto"`, `"off"`, or `"flash"`.


`imageHeight`

 The desired image height as an integer. The user agent
 selects the closest height value to this setting if it only supports discrete
 heights.


`imageWidth`

 The desired image width as an integer. The user agent
 selects the closest width value to this setting if it only supports discrete
 widths.


`redEyeReduction`

 A boolean indicating whether the red-eye reduction
 should be used if it is available.



### Return value

A `Promise` that resolves with a `Blob`.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if `readyState` property of the `MediaStreamTrack` passing in the constructor is not `live`.

`UnknownError` `DOMException`

Thrown if the operation can't complete for any reason.

Examples
--------

 This example is extracted from this Simple Image Capture demo. It shows how to use the `Promise` returned by
 `takePhoto()` to copy the returned `Blob` to an
 `<img>` element. For simplicity it does not show how to instantiate the
 `ImageCapture` object.


```js
let takePhotoButton = document.querySelector("button#takePhoto");
let canvas = document.querySelector("canvas");

takePhotoButton.onclick = takePhoto;

function takePhoto() {
  imageCapture
    .takePhoto()
    .then((blob) => {
      console.log("Took photo:", blob);
      img.classList.remove("hidden");
      img.src = URL.createObjectURL(blob);
    })
    .catch((error) => {
      console.error("takePhoto() error: ", error);
    });
}
```

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

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-takephoto |

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

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

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

 The **`getPhotoSettings()`** method of
 the `ImageCapture` interface returns a `Promise` that
 resolves with an object containing the current photo
 configuration settings.

Syntax
------


```js
getPhotoSettings()
```

### Parameters

None.

### Return value

A `Promise` that resolves with an object containing the following properties:

`fillLightMode`

The flash setting of the capture device, one of `"auto"`, `"off"`, or `"flash"`.

`imageHeight`

The desired image height as an integer. The browser selects the closest width value to this setting if it only supports discrete heights.

`imageWidth`

The desired image width as an integer. The browser selects the closest width value to this setting if it only supports discrete widths.

`redEyeReduction`

A boolean indicating whether the red-eye reduction should be used if it is available.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if `readyState` property of the `MediaStreamTrack` passing in the constructor is not `live`.

`OperationError` `DOMException`

Thrown if the operation can't complete for any reason.

Examples
--------

 The following example, extracted from Chrome's Image Capture / Photo Resolution Sample, uses the results from
 `getPhotoSettings()` to modify the size of an input range. This example also
 shows how the `ImageCapture` object is created using a
 `MediaStreamTrack` retrieved from a device's `MediaStream`.


```js
const input = document.querySelector('input[type="range"]');

let imageCapture;

navigator.mediaDevices
  .getUserMedia({ video: true })
  .then((mediaStream) => {
    document.querySelector("video").srcObject = mediaStream;

    const track = mediaStream.getVideoTracks()[0];
    imageCapture = new ImageCapture(track);

    return imageCapture.getPhotoCapabilities();
  })
  .then((photoCapabilities) => {
    const settings = imageCapture.track.getSettings();

    input.min = photoCapabilities.imageWidth.min;
    input.max = photoCapabilities.imageWidth.max;
    input.step = photoCapabilities.imageWidth.step;

    return imageCapture.getPhotoSettings();
  })
  .then((photoSettings) => {
    input.value = photoSettings.imageWidth;
  })
  .catch((error) => console.error("Argh!", error.name || error));
```

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

| Specification |
| --- |
| MediaStream Image Capture # dom-imagecapture-getphotosettings |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WebTransportSendStream: sendOrder 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 **`sendOrder`** property of the `WebTransportSendStream` interface indicates the send priority of this stream relative to other streams for which the value has been set.

 Queued bytes are sent first for streams that have a higher value.
 If not set, the send order depends on the implementation.

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

Value
-----

A number indicating the relative priority of this stream when sending bytes.

Examples
--------

 The example below shows how you can set the initial `sendOrder` when calling `WebTransport.createUnidirectionalStream()` to create the send stream, read the value from the stream, and then change the order.
 After changing the order the priority of this stream would increase, becoming higher than any stream with a priority of less than "596996858".


```js
async function writeData() {
  const stream = await transport.createUnidirectionalStream({
    sendOrder: "400", // Set initial stream order
  });

  console.log(`Stream order: ${stream.sendOrder}`); // Stream order: 400

  // write data ...

  // Change the stream order
  stream.sendOrder = 596996858;
  console.log(`Stream order: ${stream.sendOrder}`); // Stream order: 596996858

  // write more data ...
}
```

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

| Specification |
| --- |
| WebTransport # dom-webtransportsendstream-sendorder |

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

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

See also
--------

* Using WebTransport
* WebSockets API
* Streams API
* WebTransport over HTTP/3
WebTransportSendStream: getStats() 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 **`getStats()`** method of the `WebTransportSendStream` interface asynchronously returns an object containing statistics for the current stream.

 The statistics include the total number of bytes written to the stream, the number that have been sent (ignoring packet overhead), and the number of bytes that have been set at least once, and the number that have been acknowledged (up until the first sequentially-ordered non-acknowledged byte).
 It therefore provides a measure of how quickly the application is sending bytes to the server on this particular stream.

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

Syntax
------


```js
getStats()
```

### Parameters

None.

### Return value

 A `Promise` that resolves to a object containing statistics about the current stream.
 The returned object has the following properties:

`bytesAcknowledged`

 A positive integer indicating the number of bytes written to this stream that have been sent and acknowledged as received by the server, using QUIC's ACK mechanism.
 Only sequential bytes up to, but not including, the first non-acknowledged byte, are counted.
 This number can only increase and is always less than or equal to `bytesSent`.
 When the connection is over HTTP/2, the value will match `bytesSent`.


`bytesSent`

 A positive integer indicating the number of bytes written to this stream that have been sent at least once (but not necessarily acknowledged).
 This number can only increase, and is always less than or equal to `bytesWritten`.
 Note that this count does not include bytes sent as network overhead (such as packet headers).


`bytesWritten`

 A positive integer indicating the number of bytes successfully written to this stream.
 This number can only increase.


Examples
--------

 The code snippet below uses `await` to wait on the `Promise` returned by `getStats()`.
 When the promise fulfills, the result for the number of bytes that have been sent but not acknowledged is logged to the console.


```js
const stats = await stream.getStats();
const bytesNotReceived = stats.bytesWritten - stats.bytesAcknowledged;
console.log(`Bytes still successfully sent: ${bytesNotReceived}`);
```

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

| Specification |
| --- |
| WebTransport # dom-webtransportsendstream-getstats |

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

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