recursal/MDN huggingface dataset:
HTMLElement
===========

HTMLElement 接口表示所有的 HTML 元素。一些 HTML 元素直接实现了 HTMLElement 接口，其他的间接实现 HTMLElement 接口。

属性
--

*继承自父接口 `Element` 和 `GlobalEventHandlers` 的属性。*

| 属性名称 | 属性类型 | Description |
| --- | --- | --- |
| `HTMLElement.accessKey` | `DOMString` | 获取/设置元素访问的快捷键 |
| `HTMLElement.accessKeyLabel` | `DOMString` | 返回一个包含元素访问的快捷键的字符串（只读） |
| `HTMLElement.contentEditable` | `DOMString` | 获取/设置元素的可编辑状态 |
| `HTMLElement.isContentEditable` 只读  | `Boolean` (en-US) | 表明元素的内容是否可编辑（只读） |
| `HTMLElement.dataset` 只读  | `DOMStringMap` | 获取元素的自定义属性，是一个对象（key-value，只读） |
| `HTMLElement.dir` | `DOMString` | 获取/设置元素的方向，可选的值有：ltr，rtl，auto |
| `HTMLElement.draggable` (en-US) | `Boolean` (en-US) | 设置/获取元素是否可以拖拽 |
| `HTMLElement.dropzone` 只读  | `DOMSettableTokenList` |  |
| `HTMLElement.hidden` | `Boolean` (en-US) | 获取/设置元素是否隐藏 |
| `HTMLElement.itemScope` 
实验性
 | `Boolean` (en-US) |  |
| `HTMLElement.itemType` 只读 
实验性
 | `DOMSettableTokenList` |  |
| `HTMLElement.itemId` 
实验性
 | `DOMString` |  |
| `HTMLElement.itemRef` 只读 
实验性
 | `DOMSettableTokenList` |  |
| `HTMLElement.itemProp` 只读 
实验性
 | `DOMSettableTokenList` |  |
| `HTMLElement.itemValue` 
实验性
 | `object` |  |
| `HTMLElement.lang` | `DOMString` | 获取/设置元素属性、文本、内容的语言 |
| `HTMLElement.offsetHeight` 只读  | `double` | 元素自身可视高度加上上下 border 的宽度 |
| `HTMLElement.offsetLeft`只读  | `double` | 元素自己 border 左边距离父元素 border 左边或者 body 元素 border 左边的距离 |
| `HTMLElement.offsetParent`只读  | `Element` | 元素的父元素，如果没有就是 body 元素 |
| `HTMLElement.offsetTop`只读  | `double` | 元素自己 border 顶部距离父元素顶部或者 body 元素 border 顶部的距离 |
| `HTMLElement.offsetWidth`只读  | `double` | 元素自身可视宽度加上左右 border 的宽度 |
| `HTMLElement.properties` 只读 
实验性
 | `HTMLPropertiesCollection` |  |
| `HTMLElement.spellcheck` (en-US) | `Boolean` (en-US) |  |
| `HTMLElement.style` | `CSSStyleDeclaration` | 获取/设置元素的 style 属性 |
| `HTMLElement.tabIndex` (en-US) | `long` | 获取/设置元素的 tab 键控制次序 |
| `HTMLElement.title` | `DOMString` | 获取/设置元素的 title 属性 |
| `HTMLElement.translate` (en-US) | `Boolean` (en-US) | 获取/设置元素是否可以被翻译 |

事件
--

Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.

`copy`

Fired when the user initiates a copy action through the browser's user interface.

`cut`

Fired when the user initiates a cut action through the browser's user interface.

`paste`

Fired when the user initiates a paste action through the browser's user interface.

`invalid`

Fired when an element does not satisfy its constraints during constraint validation.

方法
--

*从父元素继承的方法，`Element`.*

| Name & Arguments | Return | Description |
| --- | --- | --- |
| `HTMLElement.blur()` (en-US) | `void` | 元素失去焦点 |
| `HTMLElement.click()` | `void` | 触发元素的点击事件 |
| `HTMLElement.focus()` (en-US) | `void` | 元素获得焦点 |
| `HTMLElement.forceSpellCheck()` (en-US) 
实验性
 | `void` |  |

规范
--

| Specification |
| --- |
| HTML Standard # htmlelement |

浏览器兼容性
------

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

参见
--

* `Element`
CSSValue
========

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

`CSSValue` 接口表示经过计算的当前 CSS 属性值。属性
--

`CSSValue.cssText` (en-US)

`DOMString` 代表当前值。

`CSSValue.cssValueType` (en-US) 只读 

一个 `unsigned short` 类型的数据用来定义了值的类型。可取值为：

| 值 | 说明 |
| --- | --- |
| `CSS_CUSTOM` | 该值是一个自定义值。 |
| `CSS_INHERIT` | 该值是继承来的值，并且它的 `cssText` 属性值中包含`"inherit"`。 |
| `CSS_PRIMITIVE_VALUE` | 该值是一个原始值，并且是 `CSSPrimitiveValue` (en-US) 接口的一个实例，可以通过绑定特殊的构造方法在这个 CSSValue 接口的这个实例来获得。 |
| `CSS_VALUE_LIST` | 该值是一个 `CSSValue` 列表，是`CSSValueList` 接口的一个实例，可以通过绑定特殊的构造方法在这个 CSSValue 接口的这个实例来获得。 |

规范
--

该特性最初在 DOM Style Level 2 中定义，但从那时起已从标准化工作中移除。

它已被现代、不兼容的 CSS 类型对象模型 API (en-US) 取代，该 API 已被标准化。

浏览器兼容性
------

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

参见
--

* `CSSPrimitiveValue` (en-US)
* `CSSValueList`
CompressionStream
=================

Compression Streams API 的 **`CompressionStream`** 接口是一个用于压缩数据流的 API。

构造函数
----

`CompressionStream()`

创建新的 `CompressionStream`。

实例属性
----

`CompressionStream.readable`

返回由此对象控制的 `ReadableStream` 实例。

`CompressionStream.writable`

返回由此对象控制的 `WritableStream` 实例。

示例
--

在该示例中，使用 gzip 对流进行压缩。


```js
const compressedReadableStream = inputReadableStream.pipeThrough(
  new CompressionStream("gzip"),
);
```

规范
--

| Specification |
| --- |
| Compression Streams # compression-stream |

浏览器兼容性
------

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

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

网络信息 API 的 **`NetworkInformation`** 接口提供有关设备正在使用的与网络进行通信的连接的信息，并提供了在连接类型发生变化时通知脚本的方法。`NetworkInformation` 接口不能被实例化，而需要通过 `Navigator` 的 `connection` 属性进行访问。

**备注：** 此特性在 Web Worker 中可用

EventTarget

NetworkInformation实例属性
----

*此接口也从其父接口 `EventTarget` 继承属性。*

`NetworkInformation.downlink` 只读  
实验性

返回以每秒兆比特为单位的有效带宽估计，四舍五入到最接近的 25 千比特每秒的倍数。

`NetworkInformation.downlinkMax` (en-US) 只读  
实验性

返回底层连接技术的最大下行速度，以每秒兆比特（Mbps）为单位。

`NetworkInformation.effectiveType` (en-US) 只读  
实验性

返回连接的有效类型（意思是“slow-2g”、“2g”、“3g”或“4g”中的一个）。此值是使用最近观察到的往返时间和下行链路值的组合来确定的。

`NetworkInformation.rtt` 只读  
实验性

返回当前连接的有效往返时间估计，四舍五入到最接近的 25 毫秒的倍数。

`NetworkInformation.saveData` 只读  
实验性

如果用户在用户代理上设置了减少数据使用的选项，则返回 `true`。

`NetworkInformation.type` (en-US) 只读  
实验性

返回设备用于网络通信的连接类型。它会是以下值之一：

* `bluetooth`
* `cellular`
* `ethernet`
* `none`
* `wifi`
* `wimax`
* `other`
* `unknown`

实例方法
----

*此接口也从其父接口 `EventTarget` 继承方法。*

事件
--

`change` (en-US) 
实验性

在连接信息发生变化时触发的事件。

规范
--

| Specification |
| --- |
| Network Information API # networkinformation-interface |

浏览器兼容性
------

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

参见
--

* 在线和离线事件 (en-US)
DOMRectReadOnly
===============

**`DOMRectReadOnly`** 接口通过详细列出 `DOMRect` 所使用的标准属性来定义一个属性不可变的矩形。

构造函数
----

`DOMRectReadOnly()` (en-US)

用来创建新的 `DOMRectReadOnly` 对象，但请注意，该构造函数不能由第三方 JavaScript 调用：这样做将返回“Illegal constructor”类型错误。

属性
--

`DOMRectReadOnly.x` (en-US) 只读 

`DOMRect` 原点的 x 坐标。

`DOMRectReadOnly.y` (en-US) 只读 

`DOMRect` 原点的 y 坐标。

`DOMRectReadOnly.width` (en-US) 只读 

`DOMRect` 的宽度。

`DOMRectReadOnly.height` (en-US) 只读 

`DOMRect` 的高度。

`DOMRectReadOnly.top` (en-US) 只读 

返回 `DOMRect` 的顶部坐标值（通常与 `y` 相同）。

`DOMRectReadOnly.right` (en-US) 只读 

返回 `DOMRect` 的右坐标值（通常与 `x + width` 相同）。

`DOMRectReadOnly.bottom` (en-US) 只读 

返回 `DOMRect` 的底部坐标值（通常与 `y + height` 相同）。

`DOMRectReadOnly.left` (en-US) 只读 

返回 `DOMRect` 的左坐标值（通常与 `x` 相同）。

静态方法
----

`DOMRectReadOnly.fromRect()` (en-US)

使用指定的位置和尺寸创建一个新的 `DOMRect` 对象。

规范
--

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMRect |

浏览器兼容性
------

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

其他
--

* `DOMPoint`
WebGLQuery
==========

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`WebGLQuery`** 接口是 WebGL 2 API 的一部分，并且提供几种异步查询信息的方法。缺省情况下，遮蔽查询和图元查询是可用的。

另一种查询是分离定时器查询，它可以允许你测量 GPU 的性能和能力。仅当存在 `EXT_disjoint_timer_query` (en-US) 扩展时分离定时器查询才是可用的。

使用 `WebGLQuery` 对象时，`WebGL2RenderingContext` 的下列方法是有用的：

* `WebGL2RenderingContext.createQuery()` (en-US)
* `WebGL2RenderingContext.deleteQuery()` (en-US)
* `WebGL2RenderingContext.isQuery()` (en-US)
* `WebGL2RenderingContext.beginQuery()`
* `WebGL2RenderingContext.endQuery()` (en-US)
* `WebGL2RenderingContext.getQuery()` (en-US)
* `WebGL2RenderingContext.getQueryParameter()` (en-US)
示例
--

### 创建一个 `WebGLQuery` 对象

在本例中，`gl` 必须是 `WebGL2RenderingContext`. `WebGLQuery` 对象在 WebGL 1 中是不可用的。


```js
var query = gl.createQuery();
```

规范
--

| Specification |
| --- |
| WebGL 2.0 Specification # 3.2 |

浏览器兼容性
------

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

参见
--

* `EXT_disjoint_timer_query` (en-US)
FontData
========

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

Local Font Access API 的 **`FontData`** 接口表示单个本地字体。

实例属性
----

`FontData.family` 只读  
实验性

返回字体的字体族。

`FontData.fullName` 只读  
实验性

返回字体的全名。

`FontData.postscriptName` 只读  
实验性

返回字体的 PostScript 名称。

`FontData.style` 只读  
实验性

返回字体的样式。

实例方法
----

`FontData.blob()` 
实验性

返回一个会兑现包含底层字体文件的原始字节的 `Blob` 的 `Promise`。

示例
--

有关实时演示，请参阅字体选择演示。

### 字体枚举

以下代码片段将查询所有可用的字体并打印元数据。例如，这可以用于填充字体选择器控件。


```js
async function logFontData() {
  try {
    const availableFonts = await window.queryLocalFonts();
    for (const fontData of availableFonts) {
      console.log(fontData.postscriptName);
      console.log(fontData.fullName);
      console.log(fontData.family);
      console.log(fontData.style);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

### 访问底层数据

`blob()` 方法提供对底层 SFNT 数据的访问——这是一种可以包含其他字体格式的字体文件格式，例如 PostScript、TrueType、OpenType 或 Web 开放字体格式（WOFF）。


```js
async function computeOutlineFormat() {
  try {
    const availableFonts = await window.queryLocalFonts({
      postscriptNames: ["ComicSansMS"],
    });
    for (const fontData of availableFonts) {
      // `blob()` 方法返回一个包含有效且完整的 SFNT 包装字体数据的 Blob。
      const sfnt = await fontData.blob();
      // 仅裁剪出我们需要的字节部分：前 4 个字节是 SFNT 版本信息。
      // 规范：https://learn.microsoft.com/zh-cn/typography/opentype/spec/otff#organization-of-an-opentype-font
      const sfntVersion = await sfnt.slice(0, 4).text();

      let outlineFormat = "UNKNOWN";
      switch (sfntVersion) {
        case "\x00\x01\x00\x00":
        case "true":
        case "typ1":
          outlineFormat = "truetype";
          break;
        case "OTTO":
          outlineFormat = "cff";
          break;
      }
      console.log("矢量字体格式：", outlineFormat);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

规范
--

| Specification |
| --- |
| Local Font Access # fontdata-interface |

浏览器兼容性
------

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

参见
--

* 使用带有本地字体的高级排版
* `@font-face`
文件 API
======

概念和基本使用
-------

文件 API 使得 web 应用可以访问文件和其中的内容。

当用户提供文件时，Web 应用可以通过使用文件 `<input>` 元素或拖放来访问它们。

以这种方式提供的文件集被表示为 `FileList` 对象，这使得 web 应用能够检索单个 `File` 对象。反过来，`File` 对象提供对元数据的访问，如文件的名称、大小、类型和最后修改日期。

可以将 `File` 对象传递给 `FileReader` 对象以访问文件的内容。`FileReader` 接口是异步的，`FileReaderSync` 接口提供了同步版本，但仅在 web worker 中可用。

接口
--

`Blob`

Blob 代表“二进制大对象”（类似于文件的不可变的原始数据对象）；`Blob` 可以作为文本或二进制数据被读取，或者转换为 `ReadableStream`，其方法可以用来处理数据。

`File`

提供文件的信息并允许网页中的 JavaScript 代码访问其中的内容。

`FileList`

由 HTML `<input>` 元素的 `files` 属性返回；这让你可以访问用 `<input type="file">` 元素选择的文件列表。当使用拖放 API 时，它也被用于放入网页内容的文件列表；关于这种用法的细节，请参见 `DataTransfer` 对象。

`FileReader`

使 web 应用能够异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 `File` 或 `Blob` 对象来指定要读取的文件或数据。

`FileReaderSync`

使 web 应用能够同步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 `File` 或 `Blob` 对象来指定要读取的文件或数据。

### 对其他接口的扩展

`URL.createObjectURL()`

创建一个可用于获取 `File` 或 `Blob` 对象的 URL。

`URL.revokeObjectURL()`

释放先前通过调用 `URL.createObjectURL()` 创建的现有对象 URL。

示例
--

### 读取文件

在这个例子中，我们提供了一个文件 `<input>` 元素，当用户选择一个文件时，我们把选择的第一个文件的内容作为文本读取，并把结果显示在 `<div>` 元素中。

#### HTML


```html
<input type="file" />
<div class="output"></div>
```


#### CSS


```css
.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}
```


#### JavaScript


```js
const fileInput = document.querySelector("input[type=file]");
const output = document.querySelector(".output");

fileInput.addEventListener("change", () => {
  const [file] = fileInput.files;
  if (file) {
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      output.innerText = reader.result;
    });
    reader.readAsText(file);
  }
});
```

### 运行结果

规范
--

| Specification |
| --- |
| File API  |

参见
--

* `<input type="file">`：文件 input 元素
* `DataTransfer` 接口
Clients
=======

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`Clients` 接口提供对 `Client` 对象的访问。通过在 service worker (en-US) 中使用 ``self`.clients` 访问它。

方法
--

`Clients.get()`

返回一个匹配给定 `id` 的 `Client` 的 `Promise` .

`Clients.matchAll()`

返回一个 `Client` 对象数组的 `Promise` . options 参数允许你控制返回的 clients 类型。

`Clients.openWindow()`

打开给定 URL 的新浏览器窗口，并返回新 `WindowClient` (en-US) a 的 `Promise` .

`Clients.claim()`

允许一个激活的 service worker 将自己设置为其`scope` (en-US) 内所有 clients 的 `controller` .

示例
--

下面示例显示一个已有的聊天窗口，或者当用户点击通知时创建新的窗口。


```js
addEventListener("notificationclick", (event) => {
  event.waitUntil(
    (async function () {
      const allClients = await clients.matchAll({
        includeUncontrolled: true,
      });

      let chatClient;

      // Let's see if we already have a chat window open:
      for (const client of allClients) {
        const url = new URL(client.url);

        if (url.pathname == "/chat/") {
          // Excellent, let's use it!
          client.focus();
          chatClient = client;
          break;
        }
      }

      // If we didn't find an existing chat window,
      // open a new one:
      if (!chatClient) {
        chatClient = await clients.openWindow("/chat/");
      }

      // Message the client:
      chatClient.postMessage("New chat messages!");
    })(),
  );
});
```

规范
--

| Specification |
| --- |
| Service Workers # clients-interface |

浏览器兼容性
------

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

See also
--------

* Using Service Workers (en-US)
* Is ServiceWorker ready?
* `Promise`
GPUAdapter
==========

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

WebGPU API 的 **`GPUAdapter`** 接口表示 GPU 适配器。这时，你可以请求一个 `GPUDevice`、适配器信息、特性和限制。

使用 `GPU.requestAdapter()` 方法去请求 `GPUAdapter` 对象。

实例属性
----

`features` (en-US) 
实验性
 只读 

一个 `GPUSupportedFeatures` (en-US) 对象，其描述了适配器支持的额外的功能。

`isFallbackAdapter` (en-US) 
实验性
 只读 

一个布尔值。如果适配器是备用适配器，则返回 `true` ；如果不是，则返回 `false`。

`limits` (en-US) 
实验性
 只读 

一个 `GPUSupportedLimits` (en-US) 对象，其描述了适配器支持的限制。

实例方法
----

`requestAdapterInfo()` (en-US) 
实验性

返回 `Promise`，会兑现为一个 `GPUAdapterInfo` 对象，该对象包含适配器的识别信息。

`requestDevice()` (en-US) 
实验性

返回 `Promise`，会兑现为一个 `GPUDevice` 对象，该对象是与 GPU 通信的主要接口。

示例
--


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU not supported.");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("Couldn't request WebGPU adapter.");
  }

  const device = await adapter.requestDevice();

  //...
}
```

规范
--

| Specification |
| --- |
| WebGPU # gpu-adapter |

浏览器兼容性
------

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

参见
--

* WebGPU API
Request
=======

Fetch API 的 **`Request`** 接口用来表示资源请求。

你可以使用 `Request()` 构造函数创建一个新的 `Request` 对象，但是你更可能会遇到作为其他 API 操作结果返回的 Request 对象，比如 service worker 的 `FetchEvent.request`。

构造函数
----

`Request()`

创建一个新的 `Request` 对象。

实例属性
----

`Request.body` 只读 

主体内容的 `ReadableStream`。

`Request.bodyUsed` 只读 

存储 `true` 或 `false`，以指示请求是否仍然未被使用。

`Request.cache` 只读 

包含请求的缓存模式（例如，`default`、`reload`、`no-cache`）。

`Request.credentials` 只读 

包含请求的凭据（例如，`omit`、`same-origin`、`include`）。默认是 `same-origin`。

`Request.destination` (en-US) 只读 

返回一个描述请求的目的字符串。这是一个字符串，指示所请求的内容类型。

`Request.headers` 只读 

包含请求相关联的 `Headers` 对象。

`Request.integrity` (en-US) 只读 

包含请求的子资源完整性值（例如 `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`）。

`Request.method` 只读 

包含请求的方法（`GET`、`POST` 等）。

`Request.mode` 只读 

包含请求的模式（例如，`cors`、`no-cors`、`same-origin`、`navigate`）。

`Request.redirect` (en-US) 只读 

包含如何处理重定向的模式。它可能是 `follow`、`error` 或 `manual` 之一。

`Request.referrer` (en-US) 只读 

包含请求的 referrer（例如，`client`）。

`Request.referrerPolicy` (en-US) 只读 

包含请求的 referrer 策略（例如，`no-referrer`）。

`Request.signal` (en-US) 只读 

返回与请求相关联的 `AbortSignal`。

`Request.url` (en-US) 只读 

包含请求的 URL。

实例方法
----

`Request.arrayBuffer()`

返回 promise，其兑现值为请求主体的 `ArrayBuffer` 表示形式。

`Request.blob()`

返回 promise，其兑现值为请求主体的 `Blob` 表示形式。

`Request.clone()`

创建一个当前 `Request` 对象的副本。

`Request.formData()`

返回 promise，其兑现值为请求主体的 `FormData` 表示形式。

`Request.json()`

返回 promise，其兑现值为请求主体经过 `JSON` 解析的结果。

`Request.text()`

返回 promise，其兑现值为请求主体的文本表示形式。


**备注：** 这些请求主体上的函数只能运行一次，随后的调用将出现 TypeError 错误，表明请求主体流已被使用。

示例
--

在下面的代码中，我们使用 `Request()` 构造函数创建了一个新的请求（用来请求与脚本处于同一目录下的图片），然后返回请求的一些属性：


```js
const request = new Request("https://www.mozilla.org/favicon.ico");

const url = request.url;
const method = request.method;
const credentials = request.credentials;
```


然后，通过将 `Request` 对象作为参数传递给 `fetch()` 调用来获取此请求，例如：


```js
fetch(request)
  .then((response) => response.blob())
  .then((blob) => {
    image.src = URL.createObjectURL(blob);
  });
```


在下面的代码片段中，我们使用 `Request()` 构造函数创建了一个新的请求，其中包含一些初始数据和主体内容，用于需要主体有效载荷的 API 请求：


```js
const request = new Request("https://example.com", {
  method: "POST",
  body: '{"foo": "bar"}',
});

const url = request.url;
const method = request.method;
const credentials = request.credentials;
const bodyUsed = request.bodyUsed;
```


**备注：** body 只能是一个 `Blob`、`ArrayBuffer`、`TypedArray`、`DataView`、`FormData`、`URLSearchParams`、`ReadableStream` 或 `String` 对象，也可以是一个字符串字面量，因此增加一个 JSON 对象的有效载荷则需要字符串化该对象。

然后，通过将 `Request` 对象作为参数传递给 `fetch()` 调用来获取此请求，并取得响应，例如：


```js
fetch(request)
  .then((response) => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error("Something went wrong on API server!");
    }
  })
  .then((response) => {
    console.debug(response);
    // …
  })
  .catch((error) => {
    console.error(error);
  });
```

规范
--

| Specification |
| --- |
| Fetch Standard # request-class |

浏览器兼容性
------

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

参见
--

* ServiceWorker API
* 跨源资源共享（CORS）
* HTTP
AnimationTimeline
=================

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
**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

Web 动画 API的`AnimationTimeline`接口表示动画的时间轴。这个接口用于定义时间轴功能（被`文档时间线` (en-US)和未来的时间轴类型所继承），但本身并不能被开发人员直接使用。无论何处当你要用`AnimationTimeline`，都应该使用`DocumentTimeline`或其他时间轴类型来实例化。

属性
--

`AnimationTimeline.currentTime` (en-US) 只读 

返回此时间轴的时间值（以毫秒为单位），若此时间轴未激活则返回`null`。

规格
--

| Specification |
| --- |
| Web Animations # the-animationtimeline-interface |

浏览器兼容性
------

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

参见
--

* 网页动画 API
* `DocumentTimeline` (en-US)
* `Document.timeline`
MediaStreamTrack
================

摘要
--

**`MediaStreamTrack`** 接口在 User Agent 中表示一段媒体源，比如音轨或视频。

属性
--

`MediaStreamTrack.enabled` (en-US)

布尔值，为 true 时表示轨道有效，并且可以被渲染。为 false 时表示轨道失效，只能被渲染为静音或黑屏。如果该轨道连接中断，该值还是可以被改变但不会有任何效果了。

`MediaStreamTrack.id` (en-US) 只读 

返回一个由浏览器产生的`DOMString`类型的 GUID 值，作为这个轨道的唯一标识值。

`MediaStreamTrack.kind` (en-US) 只读 

返回一个`DOMString`类型的值。如果为“audio”表示轨道为音频轨道，为“video”则为视频轨道。如果该轨道从它的源上分离，这个值也不会改变。

`MediaStreamTrack.label` (en-US) 只读 

返回一个`DOMString`类型。内容为一个用户代理指定的标签，来标识该轨道的来源，比如“internal microphone”。该字符串可以为空，并且在没有源与这个轨道连接的情况下会一直为空。当该轨道从它的源上分离时，这个值也不会改变。

`MediaStreamTrack.muted` (en-US) 只读 

返回一个布尔类型的值，为 true 时表示轨道是静音，其他为 false。

`MediaStreamTrack.readonly` 只读 

返回一个布尔类型的值，为 true 时表示该轨道是只读的，比如视频文件源或一个被设置为不能修改的摄像头源，或则为 false。

`MediaStreamTrack.readyState` 只读 

返回枚举类型的值，表示轨道的当前状态。该枚举值为以下中的一个：

* "live"表示当前输入已经连接并且在尽力提供实时数据。在这种情况下，输出数据可以通过操作 MediaStreamTrack.enabled 属性进行开关。
* “ended”表示这个输出连接没有更多的数据了，而且也不会提供更多的数据了。

`MediaStreamTrack.remote` (en-US) 只读 

返回布尔值类型，当为 true 时表示数据是通过`RTCPeerConnection`提供的，否则为 false。

### 事件处理

`MediaStreamTrack.onstarted`

这是 `started` 事件在这个对象上被触发时调用的事件处理器，这时一个新的 `MediaStreamTrack` 对象被添加到轨道源上。

`MediaStreamTrack.onmute` (en-US)

这是 `mute` 事件在这个对象被触发时调用的事件处理器，这时这个流被中断。

`MediaStreamTrack.onunmute` (en-US)

这是 `unmute` 事件在这个对象上被触发时调用的事件处理器，未实现。

`MediaStreamTrack.onoverconstrained` (en-US)

这是 `overconstrained` 事件在这个对象上被触发时调用的事件处理器，未实现。

`MediaStreamTrack.oneended`

这是 `ended` 事件在这个对象被触发时调用的事件处理器，未实现。

方法
--

`MediaStreamTrack.getConstraints()`

TBD

`MediaStreamTrack.applyConstraints()` (en-US)

TBD

`MediaStreamTrack.getSettings()` (en-US)

TBD

`MediaStreamTrack.getCapabilities()`

TBD

`MediaStreamTrack.clone()` (en-US)

TBD

`MediaStreamTrack.stop()`

停止播放轨道对应的源，源与轨道将脱离关联，同时轨道状态将设为“ended”。

规范
--

| Specification |
| --- |
| Media Capture and Streams # mediastreamtrack |

浏览器兼容性
------

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

参见
--

* Using the MediaStream API (en-US)
SharedWorker
============

**`SharedWorker`** 接口代表一种特定类型的 worker，可以从几个浏览上下文中*访问*，例如几个窗口、iframe 或其他 worker。它们实现一个不同于普通 worker 的接口，具有不同的全局作用域，`SharedWorkerGlobalScope` (en-US) 。

**备注：** 如果要使 **SharedWorker** 连接到多个不同的页面，这些页面必须是同源的（相同的协议、host 以及端口）。

构造函数
----

`SharedWorker()`

创建一个执行指定 url 脚本的共享 web worker。

属性
--

*继承自其父类 `EventTarget`，并实现 `AbstractWorker` (en-US) 中的属性。*

`AbstractWorker.onerror` (en-US)

一个 `EventListener`，当 `ErrorEvent` 类型的 `error` 冒泡到 worker 时触发。

`SharedWorker.port` (en-US) 只读 

返回一个 `MessagePort` 对象，该对象可以用来进行通信和对共享 worker 进行控制。

方法
--

*继承自其父类 `EventTarget`，并实现 `AbstractWorker` (en-US) 中的方法。*

示例
--

在这个基本的共享型 worker 示例 中（运行共享型 worker），我们有两个 HTML 页面，每个页面中使用一些 JavaScript 来执行简单的计算。这些脚本使用相同的 worker 文件来执行计算——每个脚本都可以访问这个 worker 文件，即使脚本所处的页面在不同的窗口下。

下面的代码展示了如何通过 `SharedWorker()` 方法来创建一个共享进程对象。


```js
var myWorker = new SharedWorker("worker.js");
```


然后两个脚本都通过 `MessagePort` 对象来访问 worker，这个对象用`SharedWorker.port` (en-US) 属性获得。如果已经用 addEventListener 监听了 onmessage 事件，则可以使用 `start()` 方法手动启动端口：


```js
myWorker.port.start();
```


当启动端口时，两个脚本都会向 worker 发送消息，然后使用 `port.postMessage()`和 `port.onmessage` 处理从 worker 返回的消息：


```js
first.onchange = function () {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

second.onchange = function () {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

myWorker.port.onmessage = function (e) {
  result1.textContent = e.data;
  console.log("Message received from worker");
};
```


在 worker 中我们使用 `SharedWorkerGlobalScope.onconnect` (en-US) 处理程序连接到上面讨论的相同端口。可以在 `connect` (en-US) 事件的 `ports` 属性中获取到与该 worker 相关联的端口——然后我们使用 `MessagePort` `start()` 方法来启动端口，然后 `onmessage` 处理程序处理来自主线程的消息。


```js
onconnect = function (e) {
  var port = e.ports[0];

  port.addEventListener("message", function (e) {
    var workerResult = "Result: " + e.data[0] \* e.data[1];
    port.postMessage(workerResult);
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};
```

规范
--

| Specification |
| --- |
| HTML Standard # shared-workers-and-the-sharedworker-interface |

浏览器兼容性
------

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

参见
--

* `Worker`