GamepadPose: orientation property - Web APIs

GamepadPose: orientation property
=================================

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

The **`orientation`** read-only property of the `GamepadPose` interface returns the orientation of the `Gamepad`, as a quarternion value.

The value is a `Float32Array`, made up of the following values:

* pitch — rotation around the X axis.
* yaw — rotation around the Y axis.
* roll — rotation around the Z axis.
* w — the fourth dimension (usually 1).

The orientation yaw (rotation around the y axis) is relative to the initial yaw of the sensor when it was first read.

Value
-----

A `Float32Array`, or `null` if the VR sensor is not able to provide orientation data.

Examples
--------

TBD

**Note:** An orientation of `{ x: 0, y: 0, z: 0, w: 1 }` is considered to be "forward".

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

| Specification |
| --- |
| Gamepad Extensions # dom-gamepadpose-orientation |

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

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

See also
--------

* WebVR API
* Gamepad API


GamepadPose: hasOrientation property - Web APIs

GamepadPose: hasOrientation property
====================================

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

The **`hasOrientation`** read-only property of the `GamepadPose` interface returns a boolean value stating whether the `Gamepad` can track and return orientation information.

Value
-----

A boolean value.

Examples
--------

TBD

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

| Specification |
| --- |
| Gamepad Extensions # dom-gamepadpose-hasorientation |

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

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

See also
--------

* WebVR API
* Gamepad API


PaymentMethodChangeEvent: methodDetails property - Web APIs

PaymentMethodChangeEvent: methodDetails property
================================================

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

 The read-only **`methodDetails`** property of the `PaymentMethodChangeEvent` interface is an object
 containing any data the payment handler may provide to describe the change the user
 has made to their payment method. The value is `null` if no details
 are available.

Value
-----

 An object containing any data needed to describe the changes made to the payment
 method. The contents vary depending on the actual payment method chosen, so you will
 need to refer to the `methodName`
 property first, then interpret the `methodDetails` after that.

 The default value is `null`, indicating that no additional details are
 available.

Examples
--------

 This example uses the `paymentmethodchange` event to watch for changes to
 the payment method selected for Apple Pay, in order to compute a discount if the user
 chooses to use a Visa card as their payment method.

```js
request.onpaymentmethodchange = (ev) => {
  const { type: cardType } = ev.methodDetails;
  const newStuff = {};
  if (ev.methodName === "https://apple.com/apple-pay") {
    switch (cardType) {
      case "visa": {
        // do Apple Pay specific handling for Visa card…
        // methodDetails contains the card information
        const discount = calculateDiscount(ev.methodDetails);
        Object.assign(newStuff, discount);
        break;
      }
    }
  }
  // finally…
  ev.updateWith(newStuff);
};
const response = await request.show();
```

Note that the `methodDetails` property is being used by the `calculateDiscount()` function to compute any payment discount, then `updateWith()` is called to update the event with the computed update.

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

| Specification |
| --- |
| Payment Request API 1.1 # dom-paymentmethodchangeevent-methoddetails |

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

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


PaymentMethodChangeEvent: methodName property - Web APIs

PaymentMethodChangeEvent: methodName property
=============================================

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

 The read-only **`methodName`** property of the `PaymentMethodChangeEvent` interface is a string which
 uniquely identifies the payment handler currently selected by the user. The
 payment handler may be a payment technology, such as Apple Pay or Android Pay, and each
 payment handler may support multiple payment methods; changes to the payment method
 within the payment handler are described by the `PaymentMethodChangeEvent`.

Value
-----

 A string which uniquely identifies the currently-selected payment
 handler. This may be a string chosen from the list of standardized payment method
 identifiers, or a URL used by the payment processing service. See
 Payment method identifiers for more information.

The default value is the empty string, `""`.

Examples
--------

 This example uses the `paymentmethodchange` event to watch for changes to
 the payment method selected for Apple Pay, in order to compute a discount if the user
 chooses to use a Visa card as their payment method.

```js
request.onpaymentmethodchange = (ev) => {
  const { type: cardType } = ev.methodDetails;
  const newStuff = {};
  if (ev.methodName === "https://apple.com/apple-pay") {
    switch (cardType) {
      case "visa": {
        // do Apple Pay specific handling for Visa card…
        // methodDetails contains the card information
        const discount = calculateDiscount(ev.methodDetails);
        Object.assign(newStuff, discount);
        break;
      }
    }
  }
  // finally…
  ev.updateWith(newStuff);
};
const response = await request.show();
```

Note that the `methodDetails` property is being used by the `calculateDiscount()` function to compute any payment discount, then `updateWith()` is called to update the event with the computed update.

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

| Specification |
| --- |
| Payment Request API 1.1 # dom-paymentmethodchangeevent-methodname |

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

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


PaymentMethodChangeEvent: PaymentMethodChangeEvent() constructor - Web APIs

PaymentMethodChangeEvent: PaymentMethodChangeEvent() constructor
================================================================

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

 The **`PaymentMethodChangeEvent()`**
 constructor creates a new `PaymentMethodChangeEvent` object providing
 details about a `paymentmethodchange` event.

Syntax
------

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

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `paymentmethodchange`.

`options` Optional

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

`methodName` Optional

 A string containing the payment method identifier for the
 payment handler being used. This is an empty string by default.

`methodDetails` Optional

 An object providing payment method-specific information describing the changes
 made to the payment, or `null` if there is no additional information
 available or required. This is `null` by default.

### Return value

 A new `PaymentMethodChangeEvent` object describing a change to
 the options specified for the payment method given in the `methodName`
 property.

 The type of the `methodDetails` property depends on the payment method. For
 example, if `methodName` is `https://example.com/pay`, indicating that the
 Example Pay payment method is being used for validation, the shape of `methodDetails`
 is defined by the payment method.

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

| Specification |
| --- |
| Payment Request API 1.1 # dom-paymentmethodchangeevent-constructor |

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

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

See also
--------

* Payment Request API
* Using the Payment Request API
* Payment processing concepts


PaintWorkletGlobalScope: registerPaint() method - Web APIs

PaintWorkletGlobalScope: registerPaint() method
===============================================

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

 The **`registerPaint()`** method of the
 `PaintWorkletGlobalScope` interface registers a class to programmatically generate an
 image where a CSS property expects a file.

Syntax
------

```js
registerPaint(name, classRef)
```

### Parameters

`name`

The name of the worklet class to register.

`classRef`

A reference to the class that implements the worklet.

Return value
------------

None (`undefined`).

### Exceptions

`TypeError`

Thrown when one of the arguments is invalid or missing.

`InvalidModificationError` `DOMException`

Thrown when the a worklet already exists with the specified name.

Examples
--------

 The following shows registering an example worklet module. This should be in a separate
 js file. Note that `registerPaint()` is called without a reference to
 `PaintWorkletGlobalScope`. The file itself is loaded
 through `CSS.paintWorklet.addModule()` (documented here on the parent class
 of PaintWorklet, at `Worklet.addModule()`.

```js
/\* checkboardWorklet.js \*/

class CheckerboardPainter {
  paint(ctx, geom, properties) {
    // Use `ctx` as if it was a normal canvas
    const colors = ["red", "green", "blue"];
    const size = 32;
    for (let y = 0; y < geom.height / size; y++) {
      for (let x = 0; x < geom.width / size; x++) {
        const color = colors[(x + y) % colors.length];
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.rect(x \* size, y \* size, size, size);
        ctx.fill();
      }
    }
  }
}

// Register our class under a specific name
registerPaint("checkerboard", CheckerboardPainter);
```

 The first step in using a paintworklet is defining the paint worklet using the
 `registerPaint()` function, as done above. To use it, you register it with
 the `CSS.paintWorklet.addModule()` method:

```html
<script>
 CSS.paintWorklet.addModule("checkboardWorklet.js");
</script>
```

 You can then use the ``paint()`` CSS function in your
 CSS anywhere an ``<image>`` value is valid.

```css
li {
  background-image: paint(checkerboard);
}
```

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

| Specification |
| --- |
| CSS Painting API Level 1 # dom-paintworkletglobalscope-registerpaint |

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

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

See also
--------

* CSS Painting API
* Houdini APIs


PaintWorkletGlobalScope: devicePixelRatio property - Web APIs

PaintWorkletGlobalScope: devicePixelRatio property
==================================================

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

The **`devicePixelRatio`** read-only property of the `PaintWorkletGlobalScope` interface returns the current device's ratio of physical pixels to logical pixels.

Value
-----

A double-precision integer.

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

| Specification |
| --- |
| CSS Painting API Level 1 # ref-for-dom-paintworkletglobalscope-devicepixelratio |

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

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

See also
--------

* CSS.paintWorklet
* Worklet
* CSS Painting API
* Houdini APIs
* window.devicePixelRatio


XRLightProbe: probeSpace property - Web APIs

XRLightProbe: probeSpace property
=================================

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

The *read-only* **`probeSpace`** property of the `XRLightProbe` interface returns an `XRSpace` tracking the position and orientation that the lighting estimations are relative to.

Value
-----

An `XRSpace` object.

Examples
--------

The `probeSpace` property returns the position and orientation in space that the lighting estimate is relative to. It may update over time as the user moves around. Use the `XRFrame.getPose()` method to get the current lighting state with each frame.

```js
const lightProbe = await xrSession.requestLightProbe();
const probePose = xrFrame.getPose(lightProbe.probeSpace, xrReferenceSpace);
```

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

| Specification |
| --- |
| WebXR Lighting Estimation API Level 1 # dom-xrlightprobe-probespace |

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

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

See also
--------

* `XRSpace()`
* `XRFrame.getPose()`


XRLightProbe: reflectionchange event - Web APIs

XRLightProbe: reflectionchange event
====================================

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

The WebXR **`reflectionchange`** event fires each time the estimated reflection cube map changes. This happens in response to use movements through different lighting conditions or to direct changes to lighting itself. This event is not cancelable.

Syntax
------

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

```js
addEventListener("reflectionchange", (event) => {});

onreflectionchange = (event) => {};
```

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

`Event`.

Examples
--------

### Using the `reflectionchange` event

Whenever the `reflectionchange` event fires on a light probe, you can retrieve an updated cube map by calling `XRWebGLBinding.getReflectionCubeMap()`. This is less expensive than retrieving lighting information with every `XRFrame`.

```js
const glBinding = new XRWebGLBinding(xrSession, gl);
const lightProbe = await xrSession.requestLightProbe();
let glCubeMap = glBinding.getReflectionCubeMap(lightProbe);

lightProbe.addEventListener("reflectionchange", () => {
  glCubeMap = glBinding.getReflectionCubeMap(lightProbe);
});
```

### The `onreflectionchange` event handler property

The `reflectionchange` event is also available using the `onreflectionchange` event handler property.

```js
lightProbe.onreflectionchange = (event) => {
  glCubeMap = glBinding.getReflectionCubeMap(lightProbe);
};
```

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

| Specification |
| --- |
| WebXR Lighting Estimation API Level 1 # eventdef-xrlightprobe-reflectionchange |
| WebXR Lighting Estimation API Level 1 # dom-xrlightprobe-onreflectionchange |

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

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

See also
--------

* `addEventListener()`


Bluetooth: requestDevice() method - Web APIs

Bluetooth: requestDevice() method
=================================

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

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

 The **`Bluetooth.requestDevice()`** method of the
 `Bluetooth` interface returns a `Promise` to a
 `BluetoothDevice` object with the specified options. If there is no chooser
 UI, this method returns the first device matching the criteria.

Syntax
------

```js
requestDevice()
requestDevice(options)
```

### Parameters

`options` Optional

An object that sets options for the device request. The available options are:

`filters[]`

 An array of `BluetoothScanFilters`. This
 filter consists of an array of `BluetoothServiceUUID`s, a
 `name` parameter, and a `namePrefix` parameter.

`optionalServices[]`

An array of `BluetoothServiceUUID`s.

`acceptAllDevices`

 A boolean value indicating that the
 requesting script can accept all Bluetooth devices. The default is
 `false`.

### Return value

A `Promise` to a `BluetoothDevice` object.

### Exceptions

`TypeError`

 Thrown if the provided `options` do not make sense. For example,
 `options.filters` is present and `options.acceptAllDevices` is
 `true`, or if `options.filters` is not present and
 `options.acceptAllDevices` is `false`. Or
 `options.filters` is `[]`.

`NotFoundError` `DOMException`

Thrown if there is no Bluetooth device that matches the specified options.

`SecurityError` `DOMException`

 Thrown if this operation is not permitted in this context due to security concerns. For
 example, it is called from insecure origin.

Examples
--------

```js
// Discovery options match any devices advertising:
// . The standard heart rate service.
// . Both 16-bit service IDs 0x1802 and 0x1803.
// . A proprietary 128-bit UUID service c48e6067-5295-48d3-8d5c-0395f61792b1.
// . Devices with name "ExampleName".
// . Devices with name starting with "Prefix".
//
// And enables access to the battery service if devices
// include it, even if devices do not advertise that service.
let options = {
  filters: [
    { services: ["heart\_rate"] },
    { services: [0x1802, 0x1803] },
    { services: ["c48e6067-5295-48d3-8d5c-0395f61792b1"] },
    { name: "ExampleName" },
    { namePrefix: "Prefix" },
  ],
  optionalServices: ["battery\_service"],
};

navigator.bluetooth
  .requestDevice(options)
  .then((device) => {
    console.log(`Name: ${device.name}`);
    // Do something with the device.
  })
  .catch((error) => console.error(`Something went wrong. ${error}`));
```

Detailed examples are in the specification.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetooth-requestdevice |

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

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


Bluetooth: getAvailability() method - Web APIs

Bluetooth: getAvailability() method
===================================

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

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

The **`getAvailability()`** method of the `Bluetooth` interface returns `true` if the device has a Bluetooth adapter, and false otherwise (unless the user has configured the browser to not expose a real value).

**Note:** A user might not allow use of Web Bluetooth API, even if
 `getAvailability()` returns `true`
 (`navigator.bluetooth.requestDevice()` might
 not resolve with a `BluetoothDevice`). Also, a user can configure their browser to return a fixed value instead of a real one.

Syntax
------

```js
getAvailability()
```

### Parameters

None.

### Return value

A `Promise` that resolves with `Boolean`.

Exceptions
----------

This method doesn't throw any exceptions.

Examples
--------

 The following snippet prints out a message in the console specifying whether or not
 Bluetooth is supported:

```js
navigator.bluetooth.getAvailability().then((available) => {
  if (available) {
    console.log("This device supports Bluetooth!");
  } else {
    console.log("Doh! Bluetooth is not supported");
  }
});
```

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetooth-getavailability |

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

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


Bluetooth: getDevices() method - Web APIs

Bluetooth: getDevices() method
==============================

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

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

 The **`getDevices()`** method of
 `Bluetooth` interface of Web Bluetooth API exposes the
 Bluetooth devices this origin is allowed to access. This method does not display any
 permission prompts.

**Note:** This method returns a `BluetoothDevice` for each
 device the origin is currently allowed to access, even the ones that are out of range
 or powered off.

Syntax
------

```js
getDevices()
```

### Parameters

None.

### Return value

A `Promise` that resolves with an array of `BluetoothDevice`s.

Exceptions
----------

This method doesn't throw any exceptions.

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

| Specification |
| --- |
| Web Bluetooth # dom-bluetooth-getdevices |

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

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


TrustedScript: toString() method - Web APIs

TrustedScript: toString() method
================================

The **`toString()`** method of the `TrustedScript` interface returns a string which may safely inserted into an injection sink.

Syntax
------

```js
toString()
```

### Parameters

None.

### Return value

A string containing the sanitized script.

Examples
--------

The constant `sanitized` is an object created via a Trusted Types policy. The `toString()` method returns a string to safely execute as a script.

```js
const sanitized = scriptPolicy.createScript("eval('2 + 2')");
console.log(sanitized.toString());
```

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

| Specification |
| --- |
| Trusted Types # trustedscripturl-stringification-behavior |

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

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


TrustedScript: toJSON() method - Web APIs

TrustedScript: toJSON() method
==============================

The **`toJSON()`** method of the `TrustedScript` interface returns a JSON representation of the stored data.

Syntax
------

```js
toJSON()
```

### Parameters

None.

### Return value

A string containing a JSON representation of the stored data.

Examples
--------

The constant `sanitized` is an object created via a Trusted Types policy. The `toString()` method returns a string to safely execute as a script.

```js
const sanitized = scriptPolicy.createScript("eval('2 + 2')");
console.log(sanitized.toJSON());
```

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

| Specification |
| --- |
| Trusted Types # dom-trustedscript-tojson |

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

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


DocumentTimeline: DocumentTimeline() constructor - Web APIs

DocumentTimeline: DocumentTimeline() constructor
================================================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **`DocumentTimeline()`** constructor of the Web Animations API creates a new instance of the `DocumentTimeline` object associated with the active document of the current browsing context.

Syntax
------

```js
new DocumentTimeline(options)
```

### Parameters

`options` Optional

An object specifying options for the new timeline. The following properties are available:

`originTime` Optional

 A `number` that specifies the zero time for the `DocumentTimeline`
 as a number of milliseconds relative to `Performance.timeOrigin`.
 Defaults to `0`.

Examples
--------

### Origin time

 A `DocumentTimeline` with an `originTime` of zero counts time
 starting from `Performance.timeOrigin`. This is the same behavior
 as `Document.timeline`.

```js
const timeline = new DocumentTimeline();
console.log(timeline.currentTime === document.timeline.currentTime); // true
```

 Setting a non-zero `originTime` will offset the `DocumentTimeline`
 from `Document.timeline` by that amount:

```js
const offsetTimeline = new DocumentTimeline({ originTime: 500 });
console.log(document.timeline.currentTime - offsetTimeline.currentTime); // 500
```

A `DocumentTimeline` relative to the current moment can be constructed with:

```js
const nowTimeline = new DocumentTimeline({
  originTime: document.timeline.currentTime,
});
console.log(nowTimeline.currentTime); // 0
```

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

| Specification |
| --- |
| Web Animations # dom-documenttimeline-documenttimeline |

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

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

See also
--------

* Web Animations API
* `AnimationTimeline`
* `DocumentTimeline`


FileSystemDirectoryEntry: getFile() method - Web APIs

FileSystemDirectoryEntry: getFile() method
==========================================

 The `FileSystemDirectoryEntry` interface's method
 **`getFile()`** returns a
 `FileSystemFileEntry` object corresponding to a file contained somewhere
 within the directory subtree rooted at the directory on which it's called.

Syntax
------

```js
getFile()
getFile(path)
getFile(path, options)
getFile(path, options, successCallback)
getFile(path, options, successCallback, errorCallback)
```

### Parameters

`path` Optional

 A string specifying the path, relative to the directory on which
 the method is called, describing which file's entry to return.

`options` Optional

 An object which allows you
 to specify whether or not to create the entry if it's missing and if it's an error if
 the file already exists. These options are currently not useful in Web contexts.
 See the options parameter section for more details.

`successCallback` Optional

 A method to be called once the `FileSystemFileEntry` has been created.
 The method receives a single parameter: the `FileSystemFileEntry` object
 representing the file in question.

`errorCallback` Optional

 A method to be called if an error occurs. Receives as its sole input parameter a
 `DOMException` object describing the error which occurred.

#### `options` parameter

The `options` parameter object accepts the following parameters:

`create` Optional

 If this property is `true`, and the requested file doesn't exist, the user agent should create it.
 The default is `false`.
 The parent directory must already exist.

`exclusive` Optional

 If `true`, and the `create` option is also `true`, the file must not exist prior to issuing the call.
 Instead, it must be possible for it to be created newly at call time.
 The default is `false`. This parameter is ignored if `create` is `false`.

The table below describes the result of each possible combination of these flags depending on whether or not the target file path already exists.

| `create` option | `exclusive` option | Path condition | Result |
| --- | --- | --- | --- |
| `false` | *Ignored* | Path exists and is a file | The `successCallback` is called with a `FileSystemFileEntry`. |
| `false` | *Ignored* | Path exists but is a directory | The `errorCallback` is called with an appropriate error code (if the callback was provided). |
| `true` | `false` | Path exists | The existing file is removed and replaced with a new one, then the `successCallback` is called with a `FileSystemFileEntry`. |
| `true` | `false` | Path doesn't exist | The file is created, then a `FileSystemFileEntry` is passed to the `successCallback`. |
| `true` | `true` | Path exists | The `errorCallback` is called with an appropriate error, such as `FileError.PATH_EXISTS_ERR`. |
| `true` | `true` | Path doesn't exist | The file is created, then a `FileSystemFileEntry` is passed to the `successCallback`. |

### Return value

None (`undefined`).

### Exceptions

`NotFoundError` `DOMException`

 Thrown if the `create` option was not specified (or was specified as
 `false`), and the file doesn't exist.

`SecurityError` `DOMException`

Thrown if the request to access the file was denied for security reasons.

`TypeMismatchError` `DOMException`

 Thrown if the path specified is not a file; it's probably a directory, but might be an
 unsupported file descriptor such as a pipe; this depends on the user agent to some
 extent.

Examples
--------

 In this example, a function is presented whose job it is to locate within a user's app
 data directory a JSON file containing a user dictionary for a specified language, then
 load that dictionary.

```js
let dictionary = null;

function loadDictionaryForLanguage(appDataDirEntry, lang) {
  dictionary = null;

  appDataDirEntry.getDirectory("Dictionaries", {}, (dirEntry) => {
    dirEntry.getFile(`${lang}-dict.json`, {}, (fileEntry) => {
      fileEntry.file((dictFile) => {
        let reader = new FileReader();

        reader.addEventListener("loadend", () => {
          dictionary = JSON.parse(reader.result);
        });

        reader.readAsText(dictFile);
      });
    });
  });
}
```

 The `loadDictionaryForLanguage()` function starts by using
 `getDirectory()` to obtain the `FileSystemDirectoryEntry` object
 representing a subfolder named "Dictionaries" located inside the specified app data
 directory. The success callback for this takes the resulting directory entry object and
 calls `getFile()` to get a
 `FileSystemFileEntry` object representing the dictionary file; the success
 callback for this, in turn, creates a new `FileReader` and uses it to load
 the contents of the file. When that is loaded successfully (as indicated by the
 `loadend` event being fired), the loaded text is passed into
 `JSON.parse()` to be reconstituted into a JavaScript object.

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

| Specification |
| --- |
| File and Directory Entries API # dom-filesystemdirectoryentry-getfile |

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

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

See also
--------

* File and Directory Entries API
* Introduction to the File and Directory Entries API
* `FileSystemFileEntry`


FileSystemDirectoryEntry: removeRecursively() method - Web APIs

FileSystemDirectoryEntry: removeRecursively() method
====================================================

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

**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 `FileSystemDirectoryEntry` interface's method
 **`removeRecursively()`** removes
 the directory as well as all of its content, hierarchically iterating over its entire
 subtree of descendant files and directories.

 To remove a single file, or an empty directory, you can also use
 `FileSystemEntry.remove()`.

Syntax
------

```js
removeRecursively(successCallback)
removeRecursively(successCallback, errorCallback)
```

### Parameters

`successCallback`

 A function to call once the directory removal process has completed. The callback
 has no parameters.

`errorCallback` Optional

 A function to be called if an error occurs while attempting to remove the directory
 subtree. Receives a `FileError` describing the error which occurred as
 input.

### Return value

None (`undefined`).

### Errors

 If an error occurs and an `errorCallback` was specified, it gets called with
 a single parameter: a `FileError` object describing the error. The
 `FileError.code` specifies what type of error occurred, as follows:

`FileError.INVALID_MODIFICATION_ERR`

An attempt was made to remove the root directory; this is not permitted.

`FileError.NO_MODIFICATION_ALLOWED_ERR`

The file system's state doesn't permit modification.

`FileError.NOT_FOUND_ERR`

 The directory represented by the `FileSystemDirectoryEntry` no longer
 exists.

`FileError.NOT_READABLE_ERR`

 The directory is not accessible; perhaps it's in use by another application or is
 locked at the operating system level.

`FileError.SECURITY_ERR`

The directory could not be removed for security reasons. Possible reasons include:

* The directory and/or its contents may not be safe to access from a Web
 application.
* Too many file system calls are being made.
* Other security concerns as raised by the user agent or the operating system.

**Note:** If you try to delete a directory which contains one or more files that can't be
 removed, or if an error occurs while deletion of a number of files is underway, some
 files may not be deleted. You should provide an `errorCallback` to watch
 for and handle this, perhaps by trying again.

Examples
--------

```js
directory.removeRecursively(
  () => {
    /\* The directory was removed successfully \*/
  },
  () => {
    /\* an error occurred while removing the directory \*/
  },
);
```

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

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

See also
--------

* File and Directory Entries API
* Introduction to the File and Directory Entries API
* `FileSystemDirectoryEntry`
* `FileSystemEntry.remove()`


FileSystemDirectoryEntry: createReader() method - Web APIs

FileSystemDirectoryEntry: createReader() method
===============================================

 The `FileSystemDirectoryEntry` interface's method
 **`createReader()`** returns a
 `FileSystemDirectoryReader` object which can be used to read the entries in
 the directory.

Syntax
------

```js
createReader()
```

### Parameters

None.

### Return value

 A `FileSystemDirectoryReader` object which can be used to read the
 directory's entries.

Examples
--------

 This example creates a method called `readDirectory()`, which fetches all of
 the entries in the specified `FileSystemDirectoryEntry` and returns them in
 an array.

```js
function readDirectory(directory) {
  let dirReader = directory.createReader();
  let entries = [];

  let getEntries = () => {
    dirReader.readEntries(
      (results) => {
        if (results.length) {
          entries = entries.concat(toArray(results));
          getEntries();
        }
      },
      (error) => {
        /\* handle error — error is a FileError object \*/
      },
    );
  };

  getEntries();
  return entries;
}
```

 This works by creating an internal function, `getEntries()`, which calls
 itself recursively to get all the entries in the directory, concatenating each batch to
 the array. Each iteration, `readEntries()` is called to get more entries. When it returns an empty array, the
 end of the directory has been reached, and the recursion ends. Once control is returned
 to `readDirectory()`, the array is returned to the caller.

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

| Specification |
| --- |
| File and Directory Entries API # dom-filesystemdirectoryentry-createreader |

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

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

See also
--------

* File and Directory Entries API
* Introduction to the File and Directory Entries API
* `FileSystemDirectoryReader`
* `FileSystemDirectoryEntry`
* `FileSystemFileEntry`
* `FileSystemEntry`


FileSystemDirectoryEntry: getDirectory() method - Web APIs

FileSystemDirectoryEntry: getDirectory() method
===============================================

 The `FileSystemDirectoryEntry` interface's method
 **`getDirectory()`** returns a
 `FileSystemDirectoryEntry` object corresponding to a directory contained
 somewhere within the directory subtree rooted at the directory on which it's called.

Syntax
------

```js
getDirectory()
getDirectory(path)
getDirectory(path, options)
getDirectory(path, options, successCallback)
getDirectory(path, options, successCallback, errorCallback)
```

### Parameters

`path` Optional

 A string representing an absolute path or a path relative to the
 directory on which the method is called, describing which directory entry to return.
 Absolute paths may not be able to be used, for security reasons.

`options` Optional

 An object which allows you
 to specify whether or not to create the entry if it's missing and if it's an error if
 the file already exists. These options are currently not useful in Web contexts.
 See the options parameter section for more details.

`successCallback` Optional

 A method to be called once the `FileSystemDirectoryEntry` has been
 created. The method receives a single parameter: the
 `FileSystemDirectoryEntry` object representing the directory in question.

`errorCallback` Optional

 A method to be called if an error occurs. Receives as its sole input parameter a
 `DomException` object describing the error which occurred.

#### `options` parameter

The `options` parameter object accepts the following parameters:

`create` Optional

 If this property is `true`, and the requested directory doesn't exist, the user agent should create it.
 The default is `false`.
 The parent directory must already exist.

`exclusive` Optional

 If `true`, and the `create` option is also `true`, the directory must not exist prior to issuing the call.
 Instead, it must be possible for it to be created newly at call time.
 The default is `false`. This parameter is ignored if `create` is `false`.

The table below describes the result of each possible combination of these flags depending on whether or not the target directory path already exists.

| `create` option | `exclusive` option | Path condition | Result |
| --- | --- | --- | --- |
| `false` | *Ignored* | Path exists and is a directory | The `successCallback` is called with a `FileSystemDirectoryEntry`. |
| `false` | *Ignored* | Path exists but is a file | The `errorCallback` is called with an appropriate error code (if the callback was provided). |
| `true` | `false` | Path exists | The existing directory is removed and replaced with a new one, then the `successCallback` is called with a `FileSystemDirectoryEntry`. |
| `true` | `false` | Path doesn't exist | The directory is created, then a `FileSystemDirectoryEntry` is passed to the `successCallback`. |
| `true` | `true` | Path exists | The `errorCallback` is called with an appropriate error, such as `FileError.PATH_EXISTS_ERR`. |
| `true` | `true` | Path doesn't exist | The directory is created, then a `FileSystemDirectoryEntry` is passed to the `successCallback`. |

### Return value

None (`undefined`).

### Exceptions

`NotFoundError` `DOMException`

 Thrown if the `create` option was not specified (or was specified as
 `false`), and the directory doesn't exist.

`SecurityError` `DOMException`

Thrown if the request to access the directory was denied for security reasons.

`TypeMismatchError` `DOMException`

 Thrown if the path specified is not a directory; it's probably a file, but might be an
 unsupported file descriptor such as a pipe; this depends on the user agent to some
 extent.

Examples
--------

 In this example, a function is presented whose job it is to locate within a user's app
 data directory a JSON file containing a user dictionary for a specified language, then
 load that dictionary.

```js
let dictionary = null;

function loadDictionaryForLanguage(appDataDirEntry, lang) {
  dictionary = null;

  appDataDirEntry.getDirectory("Dictionaries", {}, (dirEntry) => {
    dirEntry.getFile(`${lang}-dict.json`, {}, (fileEntry) => {
      fileEntry.file((dictFile) => {
        let reader = new FileReader();

        reader.addEventListener("loadend", () => {
          dictionary = JSON.parse(reader.result);
        });

        reader.readAsText(dictFile);
      });
    });
  });
}
```

 The `loadDictionaryForLanguage()` function starts by using
 `getDirectory()` to obtain the `FileSystemDirectoryEntry` object
 representing a subfolder named "Dictionaries" located inside the specified app data
 directory. The success callback for this takes the resulting directory entry object and
 calls `getFile()` to get a
 `FileSystemFileEntry` object representing the dictionary file; the success
 callback for this, in turn, creates a new `FileReader` and uses it to load
 the contents of the file. When that is loaded successfully (as indicated by the
 `loadend` event being fired), the loaded text is passed into
 `JSON.parse()` to be reconstituted into a JavaScript object.

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

| Specification |
| --- |
| File and Directory Entries API # dom-filesystemdirectoryentry-getdirectory |

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

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

See also
--------

* File and Directory Entries API
* Introduction to the File and Directory Entries API
* `FileSystemDirectoryEntry`


HTMLTimeElement: dateTime property - Web APIs

HTMLTimeElement: dateTime property
==================================

 The
 **`HTMLTimeElement.dateTime`**
 property is a string that reflects the `datetime` HTML attribute, containing a machine-readable form of the element's date and
 time value.

The format of the string must follow one of the following HTML microsyntaxes:

| Microsyntax | Description | Examples |
| --- | --- | --- |
| Valid month string | *YYYY*`-`*MM* | `2011-11`, `2013-05` |
| Valid date string | *YYYY*`-`*MM*`-`*DD* | `1887-12-01` |
| Valid yearless date string | *MM*`-`*DD* | `11-12` |
| Valid time string | *HH*`:`*MM**HH*`:`*MM*`:`*SS**HH*`:`*MM*`:`*SS*`.`*mmm* | `23:59``12:15:47``12:15:52.998` |
| Valid local date and time string | *YYYY*`-`*MM*`-`*DD*
*HH*`:`*MM**YYYY*`-`*MM*`-`*DD* *HH*`:`*MM*`:`*SS**YYYY*`-`*MM*`-`*DD* *HH*`:`*MM*`:`*SS*`.`*mmm**YYYY*`-`*MM*`-`*DD*`T`*HH*`:`*MM**YYYY*`-`*MM*`-`*DD*`T`*HH*`:`*MM*`:`*SS**YYYY*`-`*MM*`-`*DD*`T`*HH*`:`*MM*`:`*SS*`.`*mmm* | `2013-12-25 11:121972-07-25 13:43:071941-03-15
07:06:23.6782013-12-25T11:121972-07-25T13:43:071941-03-15T07:06:23.678` |
| Valid time-zone offset string | `Z``+`*HHMM*`+`*HH*`:`*MM*`-`*HHMM*`-`*HH*`:`*MM* | `Z+0200+04:30-0300-08:00` |
| Valid global date and time string | *Any combination of a valid local date and time string followed by a
valid time-zone offset string* | `2013-12-25 11:12+02001972-07-25 13:43:07+04:301941-03-15
07:06:23.678Z2013-12-25T11:12-08:00` |
| Valid week string | *YYYY*`-W`*WW* | `2013-W46` |
| Four or more ASCII digits | *YYYY* | `2013`, `0001` |
| Valid duration string | `P`*d*`D``T`*h*`H`*m*`M`*s*`S``P`*d*`D``T`*h*`H`*m*`M`*s*`.`X`S``P`*d*`D``T`*h*`H`*m*`M`*s*`.`XX`S``P`*d*`D``T`*h*`H`*m*`M`*s*`.`XXX`S``P``T`*h*`H`*m*`M`*s*`S``P``T`*h*`H`*m*`M`*s*`.`X`S``P``T`*h*`H`*m*`M`*s*`.`XX`S``P``T`*h*`H`*m*`M`*s*`.`XXX`S`*w*`w` *d*`d` *h*`h` *m*`m` *s*`s` | `P12DT7H12M13SP12DT7H12M13.3SP12DT7H12M13.45SP12DT7H12M13.455SPT7H12M13SPT7H12M13.2SPT7H12M13.56SPT7H12M13.999S7d
5h 24m 13s` |

Value
-----

A string.

Examples
--------

```js
// Assumes there is <time id="t"> element in the HTML

const t = document.getElementById("t");
t.dateTime = "6w 5h 34m 5s";
```

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

| Specification |
| --- |
| HTML Standard # dom-time-datetime |

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

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

See also
--------

* The `HTMLTimeElement` interface it belongs to.


FontFaceSetLoadEvent: fontfaces property - Web APIs

FontFaceSetLoadEvent: fontfaces property
========================================

 The **`fontfaces`** read-only property of the
 `FontFaceSetLoadEvent` interface returns an array of
 `FontFace` instances, each of which represents a single usable font.

Value
-----

An array of `FontFace` instance.

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

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfacesetloadevent-fontfaces |

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

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


FontFaceSetLoadEvent: FontFaceSetLoadEvent() constructor - Web APIs

FontFaceSetLoadEvent: FontFaceSetLoadEvent() constructor
========================================================

 The **`FontFaceSetLoadEvent()`** constructor creates a new
 `FontFaceSetLoadEvent` object which is fired whenever a
 `FontFaceSet` loads.

Syntax
------

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

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers always set it to `loading`, `loadingdone`, or `loadingerror`.

`options` Optional

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

`fontfaces` Optional

An array of `FontFace` instances. It defaults to the empty array.

### Return value

A new `FontFaceSetLoadEvent` object.

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

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfacesetloadevent-fontfacesetloadevent |

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

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


TransitionEvent: pseudoElement property - Web APIs

TransitionEvent: pseudoElement property
=======================================

 The **`TransitionEvent.pseudoElement`** read-only property is a
 string, starting with `'::'`, containing the name of the pseudo-element the animation runs on.
 If the transition doesn't run on a pseudo-element but on the element, an empty string:
 `''``.`

Value
-----

A string.

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

| Specification |
| --- |
| CSS Transitions # Events-TransitionEvent-pseudoElement |

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

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

See also
--------

* Using CSS transitions
* `transition`, `transition-delay`,
 `transition-duration`, `transition-property`,
 `transition-timing-function`.


TransitionEvent: elapsedTime property - Web APIs

TransitionEvent: elapsedTime property
=====================================

 The **`TransitionEvent.elapsedTime`** read-only property is a
 `float` giving the amount of time the animation has been running, in seconds,
 when this event fired. This value is not affected by the `transition-delay`
 property.

Value
-----

A number.

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

| Specification |
| --- |
| CSS Transitions # Events-TransitionEvent-elapsedTime |

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

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

See also
--------

* Using CSS transitions


TransitionEvent: TransitionEvent() constructor - Web APIs

TransitionEvent: TransitionEvent() constructor
==============================================

The **`TransitionEvent()`** constructor returns a new `TransitionEvent` object, representing an event in relation with a transition.

Syntax
------

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

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `transitionrun`, `transitionstart`, `transitionend`, or `transitioncancel`.

`options` Optional

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

`propertyName` Optional

 A string containing the name of the CSS property associated with the transition.
 It defaults to `""`.

`elapsedTime` Optional

 A number giving the amount of time the animation has been running,
 in seconds, when this event fired, excluding any time the animation was paused.
 For an `"animationstart"` event, `elapsedTime` is `0.0` unless there was a negative value for `animation-delay`,
 in which case the event will be fired with `elapsedTime` containing `(-1 * delay)`.
 It defaults to `0.0`.

`pseudoElement` Optional

 A string, defaulting with `"::"`, containing the name of the pseudo-element the animation runs on.
 If the animation doesn't run on a pseudo-element but on the element, an empty string: `""`.
 It defaults to `""`.

### Return value

A new `TransitionEvent` object.

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

| Specification |
| --- |
| CSS Transitions # dom-transitionevent-transitionevent |

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

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

See also
--------

* Using CSS transitions
* CSS properties: `transition`, `transition-delay`,
 `transition-duration`, `transition-property`,
 `transition-timing-function`.


TransitionEvent: propertyName property - Web APIs

TransitionEvent: propertyName property
======================================

The **`propertyName`** read-only property of `TransitionEvent` objects is a string containing the name of the CSS property associated with the transition.

Value
-----

A string.

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

| Specification |
| --- |
| CSS Transitions # Events-TransitionEvent-propertyName |

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

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

See also
--------

* Using CSS transitions


BackgroundFetchRegistration: abort() method - Web APIs

BackgroundFetchRegistration: abort() 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
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`abort()`** method of the `BackgroundFetchRegistration` interface aborts an active background fetch.

Syntax
------

```js
abort()
```

### Parameters

None.

### Return value

A `Promise` that resolves with `true` if the fetch is successfully aborted.

Examples
--------

Use `abort()` to terminate a background fetch that is in progress.

```js
bgFetch.abort();
```

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

| Specification |
| --- |
| Background Fetch # background-fetch-registration-abort |

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

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


BackgroundFetchRegistration: downloaded property - Web APIs

BackgroundFetchRegistration: downloaded 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
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`downloaded`** read-only property of the `BackgroundFetchRegistration` interface returns the size in bytes that has been downloaded, initially `0`.

If the value of this property changes, the progress event is fired at the associated `BackgroundFetchRegistration` object.

Value
-----

A `number`.

Examples
--------

Logging this property to the console returns the number of bytes downloaded.

```js
console.log(bgFetch.downloaded);
```

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

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-downloaded |

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

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


BackgroundFetchRegistration: downloadTotal property - Web APIs

BackgroundFetchRegistration: downloadTotal 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
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`downloadTotal`** read-only property of the `BackgroundFetchRegistration` interface returns the total size in bytes of this download. This is set when the background fetch was registered, or `0` if not set.

Value
-----

A `number`.

Examples
--------

Logging this property to the console returns the total size in bytes of this download.

```js
console.log(bgFetch.downloadTotal);
```

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

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-downloadtotal |

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

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


BackgroundFetchRegistration: uploadTotal property - Web APIs

BackgroundFetchRegistration: uploadTotal 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
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`uploadTotal`** read-only property of the `BackgroundFetchRegistration` interface returns the total number of bytes to be sent to the server.

Value
-----

A `number`.

Examples
--------

Logging `BackgroundFetchRegistration.uploadTotal` to the console returns the uploadTotal.

```js
console.log(bgFetch.uploadTotal);
```

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

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-uploadtotal |

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

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


BackgroundFetchRegistration: match() method - Web APIs

BackgroundFetchRegistration: match() 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
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`match()`** method of the `BackgroundFetchRegistration` interface returns the first matching `BackgroundFetchRecord`.

Syntax
------

```js
match(request)
match(request, options)
```

### Parameters

`request`

 The `Request` for which you are attempting to find records.
 This can be a `Request` object or a URL.

`options` Optional

 An object that sets options for the `match` operation. The available
 options are:

`ignoreSearch`

 A boolean value that specifies whether to
 ignore the query string in the URL. For example, if set to
 `true` the `?value=bar` part of
 `http://foo.com/?value=bar` would be ignored when performing a match.
 It defaults to `false`.

`ignoreMethod`

 A boolean value. When `true`,
 prevents matching operations from validating the `Request` `http` method.
 If `false` (the default) only `GET` and `HEAD` are allowed.

`ignoreVary`

 A boolean value. When `true` indicates that the `VARY`
 header should be ignored.
 It defaults to `false`.

### Return value

 A `Promise` that resolves with the first `BackgroundFetchRecord` that matches
 the request or `undefined` if no match is found.

**Note:** `BackgroundFetchRegistration.match()` is basically identical to
 `BackgroundFetchRegistration.matchAll()`, except that rather than resolving with an array of
 all matching records, it resolves with the first matching record only.

### Exceptions

`InvalidStateError` `DOMException`

Returned if you call `match()` when there are no fetches in progress. This state will be reflected by `BackgroundFetchRegistration.recordsAvailable` being set to `false`.

Examples
--------

In this example we look for a record with the URL "/ep-5.mp3". If a `BackgroundFetchRecord` is found then we can return some information about it.

```js
bgFetch.match("/ep-5.mp3").then(async (record) => {
  if (!record) {
    console.log("No record found");
    return;
  }

  console.log(`Here's the request`, record.request);
  const response = await record.responseReady;
  console.log(`And here's the response`, response);
});
```

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

| Specification |
| --- |
| Background Fetch # background-fetch-registration-match |

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

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


BackgroundFetchRegistration: progress event - Web APIs

BackgroundFetchRegistration: progress event
===========================================

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
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`progress`** event of the `BackgroundFetchRegistration` interface thrown when the associated background fetch progresses.

Practically, this event is fired when any of the following properties will return a new value:

* `uploaded`,
* `downloaded`,
* `result`, or
* `failureReason`.
Syntax
------

Use the event name in methods like `addEventListener()`, or set the `onprogress` event property on the relevant `BackgroundFetchRegistration` object.

```js
addEventListener("progress", (event) => { })
onprogress = (event) => { }
```

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

A generic `Event` with no added properties.

Example
-------

The following example demonstrates how to log the progress of a download. The code first checks that a `downloadTotal` was provided when the background fetch was registered. This is then used to calculate the percentage, based on the `downloaded` property.

```js
bgFetch.addEventListener("progress", () => {
  if (!bgFetch.downloadTotal) return;
  const percent = Math.round(
    (bgFetch.downloaded / bgFetch.downloadTotal) \* 100,
  );
  console.log(`Download progress: ${percent}%`);
});
```

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

| Specification |
| --- |
| Background Fetch # background-fetch-registration-events |

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

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


BackgroundFetchRegistration: uploaded property - Web APIs

BackgroundFetchRegistration: uploaded 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
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`uploaded`** read-only property of the `BackgroundFetchRegistration` interface returns the size in bytes successfully sent, initially `0`.

If the value of this property changes, the progress event is fired at the associated `BackgroundFetchRegistration` object.

Value
-----

A `number`.

Examples
--------

Logging this property to the console returns the number of bytes uploaded.

```js
console.log(bgFetch.uploaded);
```

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

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-uploaded |

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

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


BackgroundFetchRegistration: recordsAvailable property - Web APIs

BackgroundFetchRegistration: recordsAvailable 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
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`recordsAvailable`** read-only property of the `BackgroundFetchRegistration` interface returns `true` if there are requests and responses to be accessed. If this returns false then `match()` and `matchAll()` can't be used.

Value
-----

A `boolean`.

Examples
--------

Logging this property to the console returns `true` or `false` to indicate if there are records.

```js
console.log(bgFetch.recordsAvailable);
```

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

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-recordsavailable |

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

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


BackgroundFetchRegistration: id property - Web APIs

BackgroundFetchRegistration: id 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
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`id`** read-only property of the `BackgroundFetchRegistration` interface returns a copy of the background fetch's `ID`.

Value
-----

A string.

Examples
--------

Logging the this part to the console returns the identifier set when registering the fetch. In this case, `"my-fetch"`.

```js
console.log(bgFetch.id); // "my-fetch"
```

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

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-id |

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

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


BackgroundFetchRegistration: matchAll() method - Web APIs

BackgroundFetchRegistration: matchAll() 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
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`matchAll()`** method of the `BackgroundFetchRegistration` interface returns an array of matching `BackgroundFetchRecord` objects.

Syntax
------

```js
matchAll()
matchAll(request)
matchAll(request,options)
```

### Parameters

`request` Optional

 The `Request` for which you are attempting to find records.
 This can be a `Request` object or a URL. If this parameter is omitted, all records are included in the result.

`options` Optional

 An object that sets options for the `match` operation. The available
 options are:

`ignoreSearch`

 A boolean value that specifies whether to
 ignore the query string in the URL. For example, if set to
 `true` the `?value=bar` part of
 `http://foo.com/?value=bar` would be ignored when performing a match.
 It defaults to `false`.

`ignoreMethod`

 A boolean value. When `true`,
 prevents matching operations from validating the `Request` `http` method.
 If `false` (the default) only `GET` and `HEAD` are allowed.

`ignoreVary`

 A boolean value. When `true` indicates that the `VARY`
 header should be ignored.
 It defaults to `false`.

### Return value

A `Promise` that resolves with an array of all matching `BackgroundFetchRecord` objects.

### Exceptions

`InvalidStateError` `DOMException`

Returned if the `recordsAvailable` flag is `false`, indicating that there is no fetch in progress.

Examples
--------

Use `matchAll()` with no parameters to return all of the records in a background fetch.

```js
const records = await bgFetch.matchAll();
console.log(records); // an array of BackgroundFetchRecord objects
```

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

| Specification |
| --- |
| Background Fetch # background-fetch-registration-match-all |

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

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


BackgroundFetchRegistration: result property - Web APIs

BackgroundFetchRegistration: result 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
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`result`** read-only property of the `BackgroundFetchRegistration` interface returns a string indicating whether the background fetch was successful or failed.

If the value of this property changes, the progress event is fired at the associated `BackgroundFetchRegistration` object.

Value
-----

One of the following strings:

`""`

The fetch is active so there is no result.

`"success"`

The background fetch was successful.

`"failure"`

The background fetch failed. This only appears when there is no ability for the browser to retry.

Examples
--------

Logging this property to the console returns a string indicating the status, or an empty string if the fetch is still active.

```js
console.log(bgFetch.result);
```

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

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-result |

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

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


BackgroundFetchRegistration: failureReason property - Web APIs

BackgroundFetchRegistration: failureReason 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
**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`failureReason`** read-only property of the `BackgroundFetchRegistration` interface returns a string with a value that indicates a reason for a background fetch failure.

If the value of this property changes, the progress event is fired at the associated `BackgroundFetchRegistration` object.

Value
-----

One of the following strings:

`""`

The background fetch has not completed, or was successful.

`"aborted"`

The operation was cancelled by the user, or `abort()` was called.

`"bad-status"`

A response had a not-ok status (a status outside the range 200-299).

`"fetch-error"`

A fetch failed for other reasons, for example CORS, or a network failure.

`"quota-exceeded"`

Storage quota was reached during the operation.

`"download-total-exceeded"`

The provided `downloadTotal` was exceeded. This value was set when the background fetch was registered.

Examples
--------

Logging this property to the console prints the reason the fetch failed, or an empty string if it was successful or has not yet completed.

```js
console.log(bgFetch.failureReason);
```

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

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-failurereason |

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

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


HTMLTableElement: createTHead() method - Web APIs

HTMLTableElement: createTHead() method
======================================

 The **`createTHead()`** method of
 `HTMLTableElement` objects returns the `<thead>` element
 associated with a given `<table>`. If no header exists in the table, this
 method creates it, and then returns it.

**Note:** If no header exists, `createTHead()` inserts a new
 header directly into the table. The header does not need to be added separately as
 would be the case if `Document.createElement()` had been used to create
 the new `<thead>` element.

Syntax
------

```js
createTHead()
```

### Parameters

None.

### Return value

`HTMLTableSectionElement`Examples
--------

```js
let myhead = mytable.createTHead();
// Now this should be true: myhead === mytable.tHead
```

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

| Specification |
| --- |
| HTML Standard # dom-table-createthead-dev |

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

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


HTMLTableElement: insertRow() method - Web APIs

HTMLTableElement: insertRow() method
====================================

 The **`HTMLTableElement.insertRow()`** method inserts a new row
 (`<tr>`) in a given `<table>`, and returns a reference to
 the new row.

 If a table has multiple `<tbody>` elements, by default, the new row is
 inserted into the last `<tbody>`. To insert the row into a specific
 `<tbody>`:

```js
let specific_tbody = document.getElementById(tbody_id);
let row = specific_tbody.insertRow(index);
```

**Note:** `insertRow()` inserts the row directly into the
 table. The row does not need to be appended separately as would be the case if
 `Document.createElement()` had been used to create the new
 `<tr>` element.

Syntax
------

```js
insertRow()
insertRow(index)
```

`HTMLTableElement` is a reference to an HTML `<table>`
 element.

### Parameters

`index` Optional

 The row index of the new row. If `index` is `-1` or equal to
 the number of rows, the row is appended as the last row.
 If `index` is omitted it defaults to `-1`.

### Return value

 An `HTMLTableRowElement` that references the new
 row.

### Exceptions

`IndexSizeError` `DOMException`

Thrown if `index` is greater than the number of rows.

Examples
--------

This example uses `insertRow(-1)` to append a new row to a table.

 We then use `HTMLTableRowElement.insertCell()` to insert a new cell in the
 new row. (To be valid HTML, a `<tr>` must have at least one
 `<td>` element.) Finally, we add some text to the cell using
 `Document.createTextNode()` and `Node.appendChild()`.

### HTML

```html
<table id="my-table">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>Row 3</td>
  </tr>
</table>
```

### JavaScript

```js
function addRow(tableID) {
  // Get a reference to the table
  let tableRef = document.getElementById(tableID);

  // Insert a row at the end of the table
  let newRow = tableRef.insertRow(-1);

  // Insert a cell in the row at index 0
  let newCell = newRow.insertCell(0);

  // Append a text node to the cell
  let newText = document.createTextNode("New bottom row");
  newCell.appendChild(newText);
}

// Call addRow() with the table's ID
addRow("my-table");
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-table-insertrow-dev |

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

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

See also
--------

* `HTMLTableRowElement.insertCell()`
* The HTML element representing rows: `HTMLTableRowElement`


HTMLTableElement: deleteRow() method - Web APIs

HTMLTableElement: deleteRow() method
====================================

 The **`HTMLTableElement.deleteRow()`** method removes a
 specific row (`<tr>`) from a given `<table>`.

Syntax
------

```js
deleteRow(index)
```

### Parameters

`index`

`index` is an integer representing the row that should be deleted.
 However, the special index `-1` can be used to remove the very last row of
 a table.

### Return value

None (`undefined`).

### Exceptions

`IndexSizeError` `DOMException`

Thrown if `index` is greater than or equal to the number of available rows or is a negative value other than `-1`.

Examples
--------

This example uses JavaScript to delete a table's second row.

### HTML

```html
<table>
  <tr>
    <td>Cell 1.1</td>
    <td>Cell 1.2</td>
    <td>Cell 1.3</td>
  </tr>
  <tr>
    <td>Cell 2.1</td>
    <td>Cell 2.2</td>
    <td>Cell 2.3</td>
  </tr>
  <tr>
    <td>Cell 3.1</td>
    <td>Cell 3.2</td>
    <td>Cell 3.3</td>
  </tr>
</table>
```

### JavaScript

```js
let table = document.querySelector("table");

// Delete second row
table.deleteRow(1);
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-table-deleterow-dev |

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

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


HTMLTableElement: createTFoot() method - Web APIs

HTMLTableElement: createTFoot() method
======================================

 The **`createTFoot()`** method of
 `HTMLTableElement` objects returns the `<tfoot>` element
 associated with a given `<table>`. If no footer exists in the table, this
 method creates it, and then returns it.

**Note:** If no footer exists, `createTFoot()` inserts a new
 footer directly into the table. The footer does not need to be added separately as
 would be the case if `Document.createElement()` had been used to create
 the new `<tfoot>` element.

Syntax
------

```js
createTFoot()
```

### Parameters

None.

### Return value

`HTMLTableSectionElement`Examples
--------

```js
let myfoot = mytable.createTFoot();
// Now this should be true: myfoot === mytable.tFoot
```

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

| Specification |
| --- |
| HTML Standard # dom-table-createtfoot-dev |

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

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


HTMLTableElement: caption property - Web APIs

HTMLTableElement: caption property
==================================

 The **`HTMLTableElement.caption`** property represents the
 table caption. If no caption element is associated with the table, this property is
 `null`.

Value
-----

A string.

Examples
--------

```js
if (table.caption) {
  // Do something with the caption
}
```

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

| Specification |
| --- |
| HTML Standard # dom-table-caption-dev |

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

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

See also
--------

* The interface implementing this property: `HTMLTableElement`.


HTMLTableElement: summary property - Web APIs

HTMLTableElement: summary 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 **`HTMLTableElement.summary`** property represents the
 table description.

Value
-----

A string.

Examples
--------

```js
HTMLTableElement.summary = "Usage statistics";
```

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

* W3C DOM 2 HTML Specification
Browser compatibility
---------------------

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


HTMLTableElement: border property - Web APIs

HTMLTableElement: border 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 **`HTMLTableElement.border`** property represents the
 border width of the `<table>` element.

Value
-----

A string representing the width of the border in pixels.

Examples
--------

```js
// Set the width of a table border to 2 pixels
const t = document.getElementById("TableA");
t.border = "2";
```

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

W3C DOM 2 HTML Specification *HTMLTableElement.border*.

This attribute is deprecated in HTML 4.0.

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

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


HTMLTableElement: tHead property - Web APIs

HTMLTableElement: tHead property
================================

 The **`HTMLTableElement.tHead`** represents the
 `<thead>` element of a `<table>`. Its value will be
 `null` if there is no such element.

Value
-----

A `HTMLTableSectionElement`.

Examples
--------

```js
if (table.tHead === my_head_el) {
  // …
}
```

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

| Specification |
| --- |
| HTML Standard # dom-table-thead-dev |

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

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

See also
--------

* The interface implementing this property: `HTMLTableElement`.


HTMLTableElement: cellPadding property - Web APIs

HTMLTableElement: cellPadding 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 **`HTMLTableElement.cellPadding`** property represents the
 padding around the individual cells of the table.

Value
-----

A string representing pixels (e.g. "10") or a percentage value (e.g. "10%").

Examples
--------

```js
// Set cell padding to 10 pixels
let t = document.getElementById("TableA");
t.cellPadding = "10";
```

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

* W3C DOM 2 HTML Specification *HTMLTableElement.cellPadding*.
Browser compatibility
---------------------

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


HTMLTableElement: tBodies property - Web APIs

HTMLTableElement: tBodies property
==================================

 The **`HTMLTableElement.tBodies`** read-only property returns a
 live `HTMLCollection` of the bodies in a `<table>`.

 Although the property is read-only, the returned object is live and allows the
 modification of its content.

 The collection returned includes implicit `<tbody>` elements. For
 example:

```html
<table>
  <tr>
    <td>cell one</td>
  </tr>
</table>
```

 The HTML DOM generated from the above HTML will have a `<tbody>` element
 even though the tags are not included in the source HTML.

Value
-----

A live `HTMLCollection`.

Examples
--------

This snippet gets the number of bodies in a table.

```js
mytable.tBodies.length;
```

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

| Specification |
| --- |
| HTML Standard # dom-table-tbodies-dev |

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

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

See also
--------

* `HTMLCollection`
* `<tbody>`


HTMLTableElement: frame property - Web APIs

HTMLTableElement: frame 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 `HTMLTableElement` interface's **`frame`**
 property is a string that indicates which of the table's exterior borders should be
 drawn.

Value
-----

One of the following:

`void`

No sides. This is the default.

`"above"`

Top side

`"below"`

Bottom side

`"hsides"`

Top and bottom only

`"vsides"`

Right and left sides only

`"lhs"`

Left-hand side only

`"rhs"`

Right-hand side only

`"box"`

All four sides

`"border"`

All four sides

Examples
--------

```js
// Set the frame of TableA to 'border'
const t = document.getElementById("TableA");
t.frame = "border";
t.border = "2px";
```

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

* W3C DOM 2 HTML Specification
Browser compatibility
---------------------

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


HTMLTableElement: cellSpacing property - Web APIs

HTMLTableElement: cellSpacing 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.

 While you should instead use the CSS
 `border-spacing` property, the obsolete `HTMLTableElement`
 interface's **`cellSpacing`** property represents the spacing
 around the individual `<th>` and `<td>` elements
 representing a table's cells. Any two cells are separated by the sum of the
 `cellSpacing` of each of the two cells.

Value
-----

 A string which is either a number of pixels (such as
 `"10"`) or a percentage value (like `"10%"`).

Examples
--------

This example sets cell spacing for a given table to 10 pixels.

```js
const t = document.getElementById("TableA");
t.cellSpacing = "10";
```

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

* W3C DOM 2 HTML Specification *HTMLTableElement.cellSpacing*.
Browser compatibility
---------------------

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


HTMLTableElement: deleteTFoot() method - Web APIs

HTMLTableElement: deleteTFoot() method
======================================

 The **`HTMLTableElement.deleteTFoot()`** method removes the
 `<tfoot>` element from a given `<table>`.

Syntax
------

```js
deleteTFoot()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

This example uses JavaScript to delete a table's footer.

### HTML

```html
<table>
  <thead>
    <th>Name</th>
    <th>Score</th>
  </thead>
  <tr>
    <td>Bob</td>
    <td>541</td>
  </tr>
  <tr>
    <td>Jim</td>
    <td>225</td>
  </tr>
  <tfoot>
    <th>Average</th>
    <td>383</td>
  </tfoot>
</table>
```

### JavaScript

```js
let table = document.querySelector("table");
table.deleteTFoot();
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-table-deletetfoot-dev |

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

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


HTMLTableElement: rows property - Web APIs

HTMLTableElement: rows property
===============================

 The read-only `HTMLTableElement`
 property **`rows`** returns a live
 `HTMLCollection` of all the rows in the table, including the rows
 contained within any `<thead>`, `<tfoot>`, and
 `<tbody>` elements.

 Although the property itself is read-only, the returned object is live and allows the
 modification of its content.

Value
-----

 An `HTMLCollection` providing a live-updating list of the
 `HTMLTableRowElement` objects representing all of the `<tr>`
 elements contained in the table. This provides quick access to all of the table rows,
 without having to manually search for them.

Examples
--------

```js
myrows = mytable.rows;
firstRow = mytable.rows[0];
lastRow = mytable.rows.item(mytable.rows.length - 1);
```

 This demonstrates how you can use both array syntax (line 2) and the
 `HTMLCollection.item()` method (line 3) to obtain individual rows in the
 table.

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

| Specification |
| --- |
| HTML Standard # dom-table-rows-dev |

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

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


HTMLTableElement: deleteCaption() method - Web APIs

HTMLTableElement: deleteCaption() method
========================================

 The **`HTMLTableElement.deleteCaption()`** method removes the
 `<caption>` element from a given `<table>`. If there is no
 `<caption>` element associated with the table, this method does
 nothing.

Syntax
------

```js
deleteCaption()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

This example uses JavaScript to delete a table's caption.

### HTML

```html
<table>
  <caption>
    This caption will be deleted!
  </caption>
  <tr>
    <td>Cell 1.1</td>
    <td>Cell 1.2</td>
  </tr>
  <tr>
    <td>Cell 2.1</td>
    <td>Cell 2.2</td>
  </tr>
</table>
```

### JavaScript

```js
let table = document.querySelector("table");
table.deleteCaption();
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-table-deletecaption-dev |

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

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


HTMLTableElement: rules property - Web APIs

HTMLTableElement: rules 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 **`HTMLTableElement.rules`** property indicates which cell
 borders to render in the table.

Value
-----

One of the following:

`none`

No rules

`groups`

Lines between groups only

`rows`

Lines between rows

`cols`

Lines between cols

`all`

Lines between all cells

Examples
--------

```js
// Turn on all the internal borders of a table
const t = document.getElementById("TableID");
t.rules = "all";
```

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

* W3C DOM 2 HTML Specification
Browser compatibility
---------------------

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


HTMLTableElement: align property - Web APIs

HTMLTableElement: align 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 **`HTMLTableElement.align`** property represents the
 alignment of the table.

Value
-----

One of the following string values:

* `left`
* `center`
* `right`
Examples
--------

```js
// Set the alignment of a table
const t = document.getElementById("TableA");
t.align = "center";
```

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

* W3C DOM 2 HTML Specification *HTMLTableElement.align*.
Browser compatibility
---------------------

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


HTMLTableElement: createCaption() method - Web APIs

HTMLTableElement: createCaption() method
========================================

 The **`HTMLTableElement.createCaption()`** method returns the
 `<caption>` element associated with a given `<table>`.
 If no `<caption>` element exists on the table, this method creates
 it, and then returns it.

**Note:** If no caption exists, `createCaption()` inserts a
 new caption directly into the table. The caption does not need to be added
 separately as would be the case if `Document.createElement()` had
 been used to create the new `<caption>` element.

Syntax
------

```js
createCaption()
```

### Parameters

None.

### Return value

`HTMLTableCaptionElement`Examples
--------

This example uses JavaScript to add a caption to a table that initially lacks one.

### HTML

```html
<table>
  <tr>
    <td>Cell 1.1</td>
    <td>Cell 1.2</td>
    <td>Cell 1.3</td>
  </tr>
  <tr>
    <td>Cell 2.1</td>
    <td>Cell 2.2</td>
    <td>Cell 2.3</td>
  </tr>
</table>
```

### JavaScript

```js
let table = document.querySelector("table");
let caption = table.createCaption();
caption.textContent = "This caption was created by JavaScript!";
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-table-createcaption-dev |

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

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


HTMLTableElement: createTBody() method - Web APIs

HTMLTableElement: createTBody() method
======================================

 The **`createTBody()`** method of
 `HTMLTableElement` objects creates and returns a new
 `<tbody>` element associated with a given `<table>`.

**Note:** Unlike `HTMLTableElement.createTHead()` and
 `HTMLTableElement.createTFoot()`, `createTBody()`
 systematically creates a new `<tbody>` element, even if the table
 already contains one or more bodies. If so, the new one is inserted after the existing
 ones.

Syntax
------

```js
createTBody()
```

### Parameters

None.

### Return value

`HTMLTableSectionElement`Examples
--------

```js
let mybody = mytable.createTBody();
// Now this should be true: mybody === mytable.tBodies.item(mytable.tBodies.length - 1)
```

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

| Specification |
| --- |
| HTML Standard # dom-table-createtbody-dev |

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

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


HTMLTableElement: width property - Web APIs

HTMLTableElement: width 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 **`HTMLTableElement.width`** property represents the
 desired width of the table.

Value
-----

A string representing the width in number of pixels or as a percentage value.

Examples
--------

```js
mytable.width = "75%";
```

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

* W3C DOM 2 HTML Specification *HTMLTableElement.width*
Browser compatibility
---------------------

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


HTMLTableElement: tFoot property - Web APIs

HTMLTableElement: tFoot property
================================

 The **`HTMLTableElement.tFoot`** property represents the
 `<tfoot>` element of a `<table>`. Its value will be
 `null` if there is no such element.

Value
-----

A `<tfoot>` element or `null`.

Examples
--------

```js
if (table.tFoot === my_foot) {
  // …
}
```

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

| Specification |
| --- |
| HTML Standard # dom-table-tfoot-dev |

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

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

See also
--------

* The interface implementing this property: `HTMLTableElement`.


HTMLTableElement: bgColor property - Web APIs

HTMLTableElement: bgColor 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 **`bgcolor`** property of the `HTMLTableElement` represents the
 background color of the table.

**Note:** Do not use this attribute anymore. Instead, use the CSS `background-color` property by modifying the element's `style` attribute or using a style rule.

Value
-----

A string representing a color value.

Examples
--------

```js
// Set table background color to lightblue
const t = document.getElementById("TableA");
t.bgColor = "lightblue";
```

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

| Specification |
| --- |
| HTML Standard # dom-table-bgcolor |

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

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

See also
--------

* `background-color`


HTMLTableElement: deleteTHead() method - Web APIs

HTMLTableElement: deleteTHead() method
======================================

 The **`HTMLTableElement.deleteTHead()`** removes the
 `<thead>` element from a given `<table>`.

Syntax
------

```js
deleteTHead()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

This example uses JavaScript to delete a table's header.

### HTML

```html
<table>
  <thead>
    <th>Name</th>
    <th>Occupation</th>
  </thead>
  <tr>
    <td>Bob</td>
    <td>Plumber</td>
  </tr>
  <tr>
    <td>Jim</td>
    <td>Roofer</td>
  </tr>
</table>
```

### JavaScript

```js
let table = document.querySelector("table");
table.deleteTHead();
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-table-deletethead-dev |

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

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


TextTrackCue: exit event - Web APIs

TextTrackCue: exit event
========================

The **`exit`** event fires when a cue stops being active.

Syntax
------

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

```js
addEventListener("exit", (event) => {});

onexit = (event) => {};
```

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

A generic `Event` with no added properties.

Example
-------

In the following example, `cue1` prints to the console when it stops being displayed as the active cue.

```js
cue1.addEventListener("enter", (event) => {
  console.log("Cue 1 has left the building.");
});
```

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

| Specification |
| --- |
| HTML Standard # event-media-exit |
| HTML Standard # handler-texttrackcue-onexit |

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

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


TextTrackCue: pauseOnExit property - Web APIs

TextTrackCue: pauseOnExit property
==================================

The **`pauseOnExit`** property of the `TextTrackCue` interface returns or sets the flag indicating whether playback of the media should pause when the end of the range to which this cue applies is reached.

Value
-----

A `Boolean`, true if the media will pause.

Examples
--------

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

| Specification |
| --- |
| HTML Standard # dom-texttrackcue-pauseonexit |

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

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


TextTrackCue: track property - Web APIs

TextTrackCue: track property
============================

The **`track`** read-only property of the `TextTrackCue` interface returns the `TextTrack` object that this cue belongs to.

Value
-----

A `TextTrack` object.

Examples
--------

In the following example a new `VTTCue` (which inherits from `TextTrackCue`) is created, then added to a track. The value of `track` is printed to the console.

```js
let video = document.querySelector("video");
let captiontrack = video.addTextTrack("captions", "Captions", "en");
captiontrack.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
captiontrack.addCue(cue1);
console.log(cue1.track); // a TextTrack object.
```

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

| Specification |
| --- |
| HTML Standard # dom-texttrackcue-track |

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

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


TextTrackCue: endTime property - Web APIs

TextTrackCue: endTime property
==============================

The **`endTime`** property of the `TextTrackCue` interface returns and sets the end time of the cue.

Value
-----

A number representing the end time, in seconds.

Examples
--------

In the following example a new `VTTCue` (which inherits from `TextTrackCue`) is created starting at 0.1 second and ending at 0.9 seconds. The `endTime` property is then printed to the console.

```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0.1, 0.9, "Hildy!");
console.log(cue1.endTime); // 0.9
track.addCue(cue1);
```

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

| Specification |
| --- |
| HTML Standard # dom-texttrackcue-endtime |

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

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


TextTrackCue: startTime property - Web APIs

TextTrackCue: startTime property
================================

The **`startTime`** property of the `TextTrackCue` interface returns and sets the start time of the cue.

Value
-----

A number representing the start time, in seconds.

Examples
--------

In the following example a new `VTTCue` (which inherits from `TextTrackCue`) is created starting at 0.1 second and ending at 0.9 seconds. The `startTime` property is then printed to the console.

```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0.1, 0.9, "Hildy!");
console.log(cue1.startTime); // 0.1
track.addCue(cue1);
```

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

| Specification |
| --- |
| HTML Standard # dom-texttrackcue-starttime |

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

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