recursal/MDN huggingface dataset:
NavigateEvent: downloadRequest property
=======================================

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

 The **`downloadRequest`** read-only property of the
 `NavigateEvent` interface returns the filename of the file requested for download, in the case of a download navigation (e.g. an `<a>` or `<area>` element with a `download` attribute), or `null` otherwise.

Value
-----

A string containing the filename of the file requested for download, or `null`.

Examples
--------


```js
navigation.addEventListener("navigate", (event) => {
  // Some navigations, e.g. cross-origin navigations, we
  // cannot intercept. Let the browser handle those normally.
  if (!event.canIntercept) {
    return;
  }

  // Don't intercept fragment navigations or downloads.
  if (event.hashChange || event.downloadRequest !== null) {
    return;
  }

  event.intercept({
    handler() {
      if (event.formData) {
        processFormDataAndUpdateUI(event.formData, event.signal);
      } else {
        doSinglePageAppNav(event.destination, event.signal);
      }
    },
  });
});
```

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

| Specification |
| --- |
| HTML Standard # dom-navigateevent-downloadrequest-dev |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
NavigateEvent: canIntercept property
====================================

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

 The **`canIntercept`** read-only property of the
 `NavigateEvent` interface returns `true` if the navigation can be intercepted and have its URL rewritten, or `false` otherwise

There are several rules around when a navigation can be intercepted. For example:

* You can't intercept cross-origin navigations.
* You can intercept `http` or `https` URLs if only the `path`, `query`, and `fragment` portions of the new URL differ from the current URL.
* You can intercept `file` URLs if only the `query` and `fragment` portions of the new URL differ.
* For other URL types you can intercept the navigation if only the `fragment` portion differs.

See the spec for more explanation on when a Document can have its URL rewritten, including a table of examples.

Value
-----

A boolean value—`true` if the navigation can be intercepted, `false` if not.

Examples
--------


```js
navigation.addEventListener("navigate", (event) => {
  // Some navigations, e.g. cross-origin navigations, we
  // cannot intercept. Let the browser handle those normally.
  if (!event.canIntercept) {
    return;
  }

  // Don't intercept fragment navigations or downloads.
  if (event.hashChange || event.downloadRequest !== null) {
    return;
  }

  event.intercept({
    handler() {
      if (event.formData) {
        processFormDataAndUpdateUI(event.formData, event.signal);
      } else {
        doSinglePageAppNav(event.destination, event.signal);
      }
    },
  });
});
```

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

| Specification |
| --- |
| HTML Standard # dom-navigateevent-canintercept-dev |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
NavigateEvent: formData property
================================

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

 The **`formData`** read-only property of the
 `NavigateEvent` interface returns the `FormData` object representing the submitted data in the case of a `POST` form submission, or `null` otherwise.

Value
-----

A `FormData` object, or `null`.

Examples
--------


```js
navigation.addEventListener("navigate", (event) => {
  // Some navigations, e.g. cross-origin navigations, we
  // cannot intercept. Let the browser handle those normally.
  if (!event.canIntercept) {
    return;
  }

  // Don't intercept fragment navigations or downloads.
  if (event.hashChange || event.downloadRequest !== null) {
    return;
  }

  event.intercept({
    handler() {
      if (event.formData) {
        processFormDataAndUpdateUI(event.formData, event.signal);
      } else {
        doSinglePageAppNav(event.destination, event.signal);
      }
    },
  });
});
```

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

| Specification |
| --- |
| HTML Standard # dom-navigateevent-formdata-dev |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
NavigateEvent: hashChange property
==================================

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

 The **`hashChange`** read-only property of the
 `NavigateEvent` interface returns `true` if the navigation is a fragment navigation (i.e. to a fragment identifier in the same document), or `false` otherwise.

Value
-----

A boolean value—`true` if the navigation is a fragment navigation, `false` if not.

Examples
--------


```js
navigation.addEventListener("navigate", (event) => {
  // Some navigations, e.g. cross-origin navigations, we
  // cannot intercept. Let the browser handle those normally.
  if (!event.canIntercept) {
    return;
  }

  // Don't intercept fragment navigations or downloads.
  if (event.hashChange || event.downloadRequest !== null) {
    return;
  }

  event.intercept({
    handler() {
      if (event.formData) {
        processFormDataAndUpdateUI(event.formData, event.signal);
      } else {
        doSinglePageAppNav(event.destination, event.signal);
      }
    },
  });
});
```

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

| Specification |
| --- |
| HTML Standard # dom-navigateevent-hashchange-dev |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
NavigateEvent: info property
============================

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

 The **`info`** read-only property of the
 `NavigateEvent` interface returns the `info` data value passed by the initiating navigation operation (e.g. `Navigation.back()`, or `Navigation.navigate()`), or `undefined` if no `info` data was passed.

Value
-----

The `info` value passed by the initiating navigation operation, or `undefined` if none was passed.

Examples
--------

One example of how `info` might be used is to trigger different single-page navigation renderings depending on how a certain route was reached. For example, consider a photo gallery app, where you can reach the same photo URL and state via various routes. You might want to use a different animation to show the photo for each route.


```js
navigation.addEventListener("navigate", (event) => {
  if (isPhotoNavigation(event)) {
    event.intercept({
      async handler() {
        switch (event.info?.via) {
          case "go-left": {
            await animateLeft();
            break;
          }
          case "go-right": {
            await animateRight();
            break;
          }
          case "gallery": {
            await animateZoomFromThumbnail(event.info.thumbnail);
            break;
          }
        }

        // TODO: actually load the photo.
      },
    });
  }
});
```

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

| Specification |
| --- |
| HTML Standard # dom-navigateevent-info-dev |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
* Methods that allow info to be passed — `Navigation.back()`, `Navigation.forward()`, `Navigation.navigate()`, `Navigation.reload()`, and `Navigation.traverseTo()`
NavigateEvent: userInitiated property
=====================================

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

 The **`userInitiated`** read-only property of the
 `NavigateEvent` interface returns `true` if the navigation was initiated by the user (e.g. by clicking a link, submitting a form, or pressing the browser's "Back"/"Forward" buttons), or `false` otherwise.

**Note:** The table found at Appendix: types of navigations shows which navigation types are user-initiated.

Value
-----

A boolean value—`true` if the navigation is user-initiated, `false` if not.

Examples
--------


```js
navigation.addEventListener("navigate", (event) => {
  console.log(event.userInitiated);
});
```

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

| Specification |
| --- |
| HTML Standard # dom-navigateevent-userinitiated-dev |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
CustomStateSet: entries() method
================================

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

The **`entries`** method of the `CustomStateSet` interface returns a new iterator object, containing an array of `[value,value]` for each element in the `CustomStateSet`.

Syntax
------


```js
entries()
```

### Parameters

None.

### Return value

A new iterator object that contains an array of `[value, value]` for each element in the `CustomStateSet`, in insertion order.

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

| Specification |
| --- |
| Custom State Pseudo Class # customstateset |

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

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

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

The **`keys()`** method of the `CustomStateSet` interface is an alias for `CustomStateSet.values`.

Syntax
------


```js
keys()
```

### Parameters

None.

### Return value

A new iterator object containing the values for each element in the given `CustomStateSet`, in insertion order.

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

| Specification |
| --- |
| Custom State Pseudo Class # customstateset |

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

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

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

The **`size`** property of the `CustomStateSet` interface returns the number of values in the `CustomStateSet`.

Value
-----

An integer indicating how many properties the `CustomStateSet` has.

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

| Specification |
| --- |
| Custom State Pseudo Class # customstateset |

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

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

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

The **`values()`** method of the `CustomStateSet` interface returns a new iterator object that yields the values for each element in the `CustomStateSet` object in insertion order.

Syntax
------


```js
values()
```

### Parameters

None.

### Return value

A new iterator object containing the values for each element in the given `CustomStateSet`, in insertion order.

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

| Specification |
| --- |
| Custom State Pseudo Class # customstateset |

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

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

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

The **`delete()`** method of the `CustomStateSet` interface deletes a single value from the `CustomStateSet`.

Syntax
------


```js
delete(value)
```

### Parameters

`value`

value to remove from the `CustomStateSet`.

### Return value

Returns `true` if `value` was in the `CustomStateSet`; otherwise `false`.

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

| Specification |
| --- |
| Custom State Pseudo Class # customstateset |

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

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

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

The **`clear()`** method of the `CustomStateSet` interface removes all elements from the `CustomStateSet` object.

Syntax
------


```js
clear()
```

### Parameters

None.

### Return value

Undefined.

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

| Specification |
| --- |
| Custom State Pseudo Class # customstateset |

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

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

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

The **`has()`** method of the `CustomStateSet` interface returns a `Boolean` asserting whether an element is present with the given value.

Syntax
------


```js
has(value)
```

### Parameters

`value`

The value to test for in the `CustomStateSet` object.

### Return value

A `Boolean`, `true` if `value` exists in the `CustomStateSet`.

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

| Specification |
| --- |
| Custom State Pseudo Class # customstateset |

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

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

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

The **`add`** method of the `CustomStateSet` interface adds an item to the `CustomStateSet`, after checking that the value is in the correct format.

Syntax
------


```js
add(value)
```

### Parameters

`value`

A string which must be a `<dashed-ident>`, with the form `--mystate`.

### Return value

Undefined.

### Exceptions

`SyntaxError` `DOMException`

Thrown if the string is not a `<dashed-ident>`.

Examples
--------

The following function adds the state `--checked` to a `CustomStateSet`.


```js
class MyCustomElement extends HTMLElement {
  set checked(flag) {
    if (flag) {
      this._internals.states.add("--checked");
    }
  }
}
```

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

| Specification |
| --- |
| Custom State Pseudo Class # dom-customstateset-add |

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

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

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

The **`forEach()`** method of the `CustomStateSet` interface executes a provided function for each value in the `CustomStateSet` object.

Syntax
------


```js
forEach(callbackFn)
forEach(callbackFn, thisArg)
```

### Parameters

`callbackFn`

Function to execute for each element, taking three arguments:

`value`, `key`

The current element being processed in the `CustomStateSet`. As there are no keys in a `CustomStateSet`, the value is passed for both arguments.

`set`

The `CustomStateSet` which `forEach()` was called upon.


`thisArg`

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

### Return value

Undefined.

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

| Specification |
| --- |
| Custom State Pseudo Class # customstateset |

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

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

 The readonly **`ImageData.data`** property returns a
 `Uint8ClampedArray` that contains the `ImageData` object's
 pixel data. Data is stored as a one-dimensional array in the RGBA order, with integer
 values between `0` and `255` (inclusive).

Value
-----

A `Uint8ClampedArray`.

Examples
--------

### Getting an ImageData object's pixel data

 This example creates an `ImageData` object that is 100 pixels wide and 100
 pixels tall, making 10,000 pixels in all. The `data` array stores four values
 for each pixel, making 4 x 10,000, or 40,000 values in all.


```js
let imageData = new ImageData(100, 100);
console.log(imageData.data); // Uint8ClampedArray[40000]
console.log(imageData.data.length); // 40000
```

### Filling a blank ImageData object

 This example creates and fills a new `ImageData` object with colorful
 pixels.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript

 Since each pixel consists of four values within the `data` array, the
 `for` loop iterates by multiples of four. The values associated with each
 pixel are R (red), G (green), B (blue), and A (alpha), in that order.


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(100, 100);

// Fill the array with RGBA values
for (let i = 0; i < imageData.data.length; i += 4) {
  // Percentage in the x direction, times 255
  let x = ((i % 400) / 400) \* 255;
  // Percentage in the y direction, times 255
  let y = (Math.ceil(i / 400) / 100) \* 255;

  // Modify pixel data
  imageData.data[i + 0] = x; // R value
  imageData.data[i + 1] = y; // G value
  imageData.data[i + 2] = 255 - x; // B value
  imageData.data[i + 3] = 255; // A value
}

// Draw image data to the canvas
ctx.putImageData(imageData, 20, 20);
```


#### Result

### More examples

 For more examples using `ImageData.data`, see Pixel manipulation with canvas,
 `CanvasRenderingContext2D.createImageData()`, and
 `CanvasRenderingContext2D.putImageData()`.

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

| Specification |
| --- |
| HTML Standard # dom-imagedata-data-dev |

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

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

See also
--------

* `ImageData.height`
* `ImageData.width`
* `ImageData`
* `CanvasRenderingContext2D.createImageData()`
* `CanvasRenderingContext2D.putImageData()`
* Pixel manipulation with canvas
ImageData: colorSpace property
==============================

The read-only **`ImageData.colorSpace`** property is a string indicating the color space of the image data.

The color space can be set during `ImageData` initialization using either the `ImageData()` constructor or the `createImageData()` method.

Value
-----

This property can have the following values:

* `"srgb"` representing the sRGB color space.
* `"display-p3"` representing the display-p3 color space.
Examples
--------

### Getting the color space of canvas image data

 The `getImageData()` method allows you to explicitly request a color space. If it doesn't match the color space the canvas was initialized with, a conversion will be performed.
 Use the `colorSpace` property to know which color space your `ImageData` object is in.


```js
const context = canvas.getContext("2d", { colorSpace: "display-p3" });
context.fillStyle = "color(display-p3 0.5 0 0)";
context.fillRect(0, 0, 10, 10);

const p3ImageData = context.getImageData(0, 0, 1, 1);
console.log(p3ImageData.colorSpace); // "display-p3"

const srgbImageData = context.getImageData(0, 0, 1, 1, { colorSpace: "srgb" });
console.log(srgbImageData.colorSpace); // "srgb"
```

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

| Specification |
| --- |
| HTML Standard # dom-imagedata-colorspace |

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

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

See also
--------

* `CanvasRenderingContext2D.createImageData()`
* `CanvasRenderingContext2D.getImageData()`
* `colorSpace` setting in `canvas.getContext()`
* Setting WebGL color spaces:
    + `WebGLRenderingContext.drawingBufferColorSpace`
    + `WebGLRenderingContext.unpackColorSpace`
ImageData: height property
==========================

 The readonly **`ImageData.height`** property returns the number
 of rows in the `ImageData` object.

Value
-----

A number.

Examples
--------

 This example creates an `ImageData` object that is 200 pixels wide and 100
 pixels tall. Thus, the `height` property is `100`.


```js
let imageData = new ImageData(200, 100);
console.log(imageData.height); // 100
```

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

| Specification |
| --- |
| HTML Standard # dom-imagedata-height-dev |

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

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

See also
--------

* `ImageData.width`
* `ImageData`
ImageData: width property
=========================

 The readonly **`ImageData.width`** property returns the number
 of pixels per row in the `ImageData` object.

Value
-----

A number.

Examples
--------

 This example creates an `ImageData` object that is 200 pixels wide and 100
 pixels tall. Thus, the `width` property is `200`.


```js
let imageData = new ImageData(200, 100);
console.log(imageData.width); // 200
```

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

| Specification |
| --- |
| HTML Standard # dom-imagedata-width-dev |

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

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

See also
--------

* `ImageData.height`
* `ImageData`
NodeList: entries() method
==========================

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

Syntax
------


```js
entries()
```

### 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 entry of list.entries()) {
  console.log(entry);
}
```


results in:
```

Array [ 0, <p> ]
Array [ 1, #text "hey" ]
Array [ 2, <span> ]
```

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

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

See also
--------

* Polyfill of `NodeList.prototype.entries` in `core-js`
* `Node`
* `NodeList`