recursal/MDN huggingface dataset:
Fetch API
=========

Fetch API 提供了一个获取资源的接口（包括跨网络通信）。对于任何使用过 `XMLHttpRequest` 的人都能轻松上手，而且新的 API 提供了更强大和灵活的功能集。

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

概念和用法
-----

Fetch 提供了对 `Request` 和 `Response`（以及其他与网络请求有关的）对象的通用定义。这将在未来更多需要它们的地方使用它们，无论是 service worker、Cache API，又或者是其他处理请求和响应的方式，甚至是任何一种需要你自己在程序中生成响应的方式（即使用计算机程序或者个人编程指令）。

它同时还为有关联性的概念，例如 CORS 和 HTTP Origin 标头信息，提供一种新的定义，取代它们原来那种分离的定义。

发送请求或者获取资源，请使用 `fetch()` 方法。它在很多接口中都被实现了，更具体地说，是在 `Window` 和 `WorkerGlobalScope` (en-US) 接口上。因此在几乎所有环境中都可以用这个方法获取资源。

`fetch()` 强制接受一个参数，即要获取的资源的路径。它返回一个 `Promise`，该 Promise 会在服务器使用标头响应后，兑现为该请求的 `Response`——**即使服务器的响应是 HTTP 错误状态**。你也可以传一个可选的第二个参数 `init`（参见 `Request`）。

一旦 `Response` 被返回，有许多方法可以获取主体定义的内容以及如何处理它。

你也可以通过 `Request()` 和 `Response()` 构造函数直接创建请求和响应。但是我们不建议这么做，它们更可能被创建为其他的 API 操作的结果（比如，service worker 中的 `FetchEvent.respondWith`）。

### 与 jQuery 的区别

`fetch` 规范主要在三个方面与 `jQuery.ajax()` 不同：

* 从 `fetch()` 返回的 Promise **不会因 HTTP 的错误状态而被拒绝**，即使响应是 HTTP `404` 或 `500`。相反，它将正常兑现（`ok` 状态会被设置为 `false`），并且只有在网络故障或者有任何阻止请求完成时，才拒绝。
* 除非你在 init 对象中设置（去包含）*credentials*，否则 `fetch()` **将不会发送跨源 cookie**。
    + 2018 年 4 月，该规范将默认的 credentials 策略更改为 `'same-origin'`。以下浏览器发布了过时的原生 fetch，并在以下版本中更新：Firefox 61.0b13、Safari 12、Chrome 68。
    + 如果你的目标是这些旧的浏览器，请务必在所有可能接受 cookie/用户登录状态影响的 API 请求中包含拥有 `credentials: 'same-origin'` 的 init 对象。

**备注：** 更多关于 Fetch API 的用法，参考使用 Fetch，以及一些概念 Fetch 基础概念。

### 中止 fetch

要中止未完成的 `fetch()`，甚至 `XMLHttpRequest` 操作，请使用 `AbortController` 和 `AbortSignal` 接口。

Fetch 接口
--------

`fetch()`

包含了 `fetch()` 方法，用于获取资源。

`Headers`

表示响应/请求的标头信息，允许你查询它们，或者针对不同的结果做不同的操作。

`Request`

相当于一个资源请求。

`Response`

相当于请求的响应

规范
--

| Specification |
| --- |
| Fetch Standard # fetch-method |

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

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

参见
--

* 使用 Fetch
* ServiceWorker API (en-US)
* HTTP 访问控制（CORS）
* HTTP
* Fetch polyfill
* Fetch 基础概念
MessagePort
===========

Channel Messaging API 的 **`MessagePort`** 接口代表 `MessageChannel` 的两个端口之一，它可以让你从一个端口发送消息，并在消息到达的另一个端口监听它们。

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

方法
--

*继承自父类 `EventTarget` 的方法。*

`MessagePort.postMessage` (en-US)

从端口发送一条消息，并且可选是否将对象的所有权交给其他浏览器上下文。

`MessagePort.start` (en-US)

开始发送该端口中的消息队列 (只有使用 `EventTarget.addEventListener` 的时候才需要调用；当使用 `MessagePort.onmessage` 时，是默认开始的。)

`MessagePort.close` (en-US)

断开端口连接，它将不再是激活状态。

事件回调
----

*继承自父类 `EventTarget` 的事件回调。*

`MessagePort.onmessage`

是一个 `EventListener`, 当类型为 `message` 的 `MessageEvent` 在该端口触发时，它将会被调用 ── 也就是说，该端口收到了一条消息。

`onmessageerror` (en-US)

是一个 `EventListener`, 当类型为 `MessageError` 的 `MessageEvent` 被触发时，它将会被调用 ── 这意味着，端口收到了一条无法被反序列化的消息。

事件
--

`message`

 当 `MessagePort` 对象收到消息时会触发。
 也可以通过 `onmessage` 属性使用。


`messageerror` (en-US)

 当 `MessagePort` 对象收到无法被反序列化的消息时触发。
 也可以通过 `onmessageerror` (en-US) 属性使用。


示例
--

在下面的示例中，你可以看到一个使用 `MessageChannel()` 构造函数创建出的新通道。

当 IFrame 加载完成后，我们给 `MessageChannel.port1` 注册了一个 `onmessage` 回调，并且使用 `window.postMessage` 方法把 `MessageChannel.port2` 和一条消息一起传给 IFrame。

当从 IFrame 收到消息时，`onMessage` 方法会把消息输出到一个段落里。


```js
var channel = new MessageChannel();
var output = document.querySelector(".output");
var iframe = document.querySelector("iframe");

// 等待 iframe 加载
iframe.addEventListener("load", onLoad);

function onLoad() {
  // 监听 port1 的事件
  channel.port1.onmessage = onMessage;

  // 把 port2 传给 iframe
  iframe.contentWindow.postMessage("Hello from the main page!", "\*", [
    channel.port2,
  ]);
}

// 处理 port1 收到的消息
function onMessage(e) {
  output.innerHTML = e.data;
}
```


要查看可运行的完整示例，参考我们在 Github 上的 channel messaging basic demo (也可以在线运行).

规范
--

| Specification |
| --- |
| HTML Standard # message-ports |

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

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

参见
--

* 使用 channel messaging
BarcodeDetector
===============

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

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

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

Barcode Detection API 的 **`BarcodeDetector`** 接口允许检测图像中的条形码和二维码。

构造方法
----

`BarcodeDetector.BarcodeDetector()` 
实验性

使用可选的 `BarcodeDetectorOptions` 参数创建并返回一个 `BarcodeDetector` 对象。

静态方法
----

`getSupportedFormats()` 
实验性

返回一个 `Promise`，它兑现一个 `Array`，包含受支持的条形码格式类型。

实例方法
----

`detect()` 
实验性

返回一个 `Promise`，它兑现一个具有以下属性的 `DetectedBarcode` 对象数组：

* `boundingBox`: 一个 `DOMRectReadOnly`，返回表示检测到的条形码范围的矩形尺寸，与图像对齐。
* `cornerPoints`：检测到的条形码的四个角点相对于图像的 x 和 y 坐标，从左上角开始顺时针旋转。由于图像内的透视变形，这可能不是方形的。
* `format`：检测到的条形码格式。（有关格式的完整列表，请参阅受支持的条形码格式类型）
* `rawValue`：一个从条形码数据解码的字符串。

示例
--

### 创建检测器

此示例测试浏览器兼容性并使用指定的支持格式创建新的条形码检测器对象。


```js
// 检查兼容性
if (!("BarcodeDetector" in globalThis)) {
  console.log("此浏览器不支持条形码检测器。");
} else {
  console.log("条形码检测器是支持的！");

  // 创建新检测器
  const barcodeDetector = new BarcodeDetector({
    formats: ["code\_39", "codabar", "ean\_13"],
  });
}
```

### 获取支持的格式

以下示例调用 `getSupportedFormats()` 方法并将结果在控制台打印。


```js
// 检查支持的类型
BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
  supportedFormats.forEach((format) => console.log(format));
});
```

### 检测条形码

此示例使用 `detect()` 方法来检测给定图像中的条形码。识别结果被迭代并且条形码数据在控制台打印。


```js
barcodeDetector
  .detect(imageEl)
  .then((barcodes) => {
    barcodes.forEach((barcode) => console.log(barcode.rawValue));
  })
  .catch((err) => {
    console.log(err);
  });
```

规范
--

| Specification |
| --- |
| Accelerated Shape Detection in Images # barcode-detection-api |

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

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

参见
--

* barcodefaq.com：包含有关不同条形码和不同类型示例的信息的网站。
* 图像中的加速形状检测
EyeDropper API
==============

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

**EyeDropper API** 提供了一种创建拾色器工具的机制。使用该工具，用户可以从屏幕上取样颜色，包括浏览器窗口之外的区域。

概念
--

创意应用通常允许用户从应用程序中的绘图或形状中取样颜色以便重用。Web 应用程序可以利用 **EyeDropper API**，通过浏览器提供类似的拾色器模式。

使用该 API，Web 应用程序可以启动拾色器模式。一旦启动，光标会变化以提示用户拾色器模式处于活动状态。用户可以从屏幕上的任意位置选择颜色，或者按下 `Escape` 键取消拾色器模式。

安全和隐私措施
-------

为了防止恶意网站在用户不知情的情况下获取其屏幕上的像素数据，**EyeDropper API** 实施了以下措施：

* 该 API 不允许在没有用户意图的情况下启动拾色器模式。只能在用户操作（例如按钮点击）的响应中调用 `EyeDropper.prototype.open()` 方法。
* 在没有用户新的意图的情况下，无法再次获取任何像素信息。由 `EyeDropper.prototype.open()` 返回的 Promise 只会在用户操作（例如点击像素）的响应中返回一个颜色值。因此，无法在用户不知情的情况下在后台使用拾色器。
* 为了帮助用户更容易地注意到拾色器模式，浏览器会提供明显的提示。在启动拾色器模式后，正常的鼠标光标会在短暂延迟后消失，取而代之的是一个放大镜图标。此外，拾色器模式开始和用户能够选择像素之间存在一段延迟，以确保用户有足够的时间看到放大镜图标。
* 用户还可以随时取消拾色器模式（通过按下 `Escape` 键）。
接口
--

* `EyeDropper` 
实验性
规范
--

| Specification |
| --- |
| EyeDropper API # eyedropper-interface |

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

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

参见
--

* 使用 EyeDropper API，可以选择屏幕上任意像素的颜色。
* EyeDropper API W3C/SMPTE 联合研讨会
CSSMathSum
==========

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

CSS Typed Object Model API (en-US) 的 **`CSSMathSum`** 接口通过调用`CSSNumericValue` (en-US) 的 `add()` (en-US), `sub()` (en-US), 或 `toSum()` (en-US) 方法获得结果。

创建
--

`CSSMathSum.CSSMathSum()` (en-US)

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

属性
--

`CSSMathSum.values` (en-US)

返回一个包含一个或多个 `CSSNumericValue` (en-US) 对象的 `CSSNumericArray` (en-US) 对象。

### 事件处理

No

方法
--

None.

说明
--

| Specification |
| --- |
| CSS Typed OM Level 1 # cssmathsum |

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

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

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

**`VideoPlaybackQuality`** 对象表示了一系列描述视频播放质量的指标。

可以通过 `HTMLVideoElement.getVideoPlaybackQuality()` (en-US) 创建一个实例。

属性
--

*`VideoPlaybackQuality` 对象不继承任何属性。*

`VideoPlaybackQuality.creationTime` (en-US) 只读 

一个用毫秒表示从开始页面浏览到对象创建的 `DOMHighResTimeStamp` 对象。

`VideoPlaybackQuality.totalVideoFrames` 只读 

一个表示相关联的 `HTMLVideoElement` 自从创建起的已创建和丢弃帧数数量总和的 unsigned long 值。.

`VideoPlaybackQuality.droppedVideoFrames` (en-US) 只读 

一个表示相关联的 `HTMLVideoElement` 自从创建起的已丢弃帧数数量的 `unsigned long` 值。

`VideoPlaybackQuality.corruptedVideoFrames` (en-US) 只读 

一个表示相关联的 `HTMLVideoElement` 自从创建起的损坏帧数数量的 `unsigned long` 值。一个损坏帧可能属于创建帧或丢弃帧。

`VideoPlaybackQuality.totalFrameDelay` (en-US) 只读  
已弃用

一个表示相关联的 `HTMLVideoElement` 自从创建起的帧延迟总和的 double 值。帧延迟是指一个帧的理论展示时间与实际显示时间的差值。

方法
--

*`VideoPlaybackQuality` 对象没有实现任何特定方法，也没有继承任何方法。*

规范
--

| Specification |
| --- |
| Media Playback Quality # videoplaybackquality-interface |

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

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

另见
--

* The `HTMLVideoElement.getVideoPlaybackQuality()` (en-US) method for constructing and returning this interface.
* `MediaSource`
* `SourceBuffer`
HTMLOptGroupElement
===================

**`HTMLOptGroupElement`** 接口提供一些特别的属性和方法（除了从 `HTMLElement` 对象接口中继承的以外）以调整 `<optgroup>` 元素的布局和显示。

属性
--

*从 `HTMLElement` 中继承属性。*

`HTMLOptGroupElement.disabled`

是一个 `boolean` (en-US)，表示整个子代 `<option>` 列表是可用的（`false`）还是不可用的（`true`）。

`HTMLOptGroupElement.label`

是一个 `DOMString`，表示该分组的标签。

方法
--

*没有专有的方法；从 `HTMLElement` 中继承方法。*

规范
--

| Specification |
| --- |
| HTML Standard # htmloptgroupelement |

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

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

参见
--

* 实现该接口的 HTML 元素：`<optgroup>`
SVGCircleElement
================

SVG Circle DOM 接口
-----------------

`SVGCircleElement` 接口提供了对`<circle>`元素的属性的访问，而且还提供了操作该元素的方法。

### 接口概览

|  |  |
| --- | --- |
| 又作用于 | `SVGElement`、
 `SVGTests`、
 `SVGLangSpace`、`SVGExternalResourcesRequired`、`SVGStylable` (en-US)、
 `SVGTransformable` |
| 方法 | *无* |
| 属性 | * 只读 `SVGAnimatedLength` (en-US) `cx`
* 只读 `SVGAnimatedLength` (en-US) `cy`
* 只读 `SVGAnimatedLength` (en-US) `r`
 |
| 规范文档 | SVG 1.1 (2nd Edition) |

属性
--

| 名称 | 类型 | 描述 |
| --- | --- | --- |
| `cx` | `SVGAnimatedLength` (en-US) | 对应于给定`<circle>`元素的`cx`属性 |
| `cy` | `SVGAnimatedLength` (en-US) | 对应于给定`<circle>`元素的`cy`属性 |
| `r` | `SVGAnimatedLength` (en-US) | 对应于给定`<circle>`元素的`r`属性 |

方法
--

该`SVGCircleElement`接口没有提供任何专有方法。

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGCircleElement |

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

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

参见
--

* `<circle>` SVG Element
CSSGroupingRule
===============

任何实现了 `CSSGroupingRule` 接口的对象表示任何可以包含或嵌套其他规则的的 CSS @ 规则。

从其派生的对象：

* `CSSConditionRule` 及其派生的对象：`CSSMediaRule`、`CSSSupportsRule`，和 `CSSDocumentRule`。
* `CSSPageRule`
语法
--

The syntax is described using the WebIDL format.
```

interface CSSGroupingRule : CSSRule {
    readonly attribute CSSRuleList cssRules;
    unsigned long insertRule (DOMString rule, unsigned long index);
    void deleteRule (unsigned long index);
}
```

所有 CSSGroupingRule 实例共有的属性
--------------------------

The `CSSGroupingRule` derives from `CSSRule` and inherits all properties of this class. It has one specific property:

`CSSGroupingRule.cssRules` (en-US) 只读 

Returns a `CSSRuleList` of the CSS rules in the media rule.

所有 CSSGroupingRule 实例共有的方法
--------------------------

The `CSSGroupingRule` derives from `CSSRule` and inherits all methods of this class. It has two specific methods:

`CSSGroupingRule.deleteRule` (en-US)

Deletes a rule from the style sheet.

`CSSGroupingRule.insertRule` (en-US)

Inserts a new style rule into the current style sheet.

规范
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssgroupingrule-interface |

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

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

参见
--

* Using dynamic styling information
HTMLBRElement
=============

**`HTMLBRElement`** 接口代表一个 HTML 换行元素 (`<br>`)，它从 `HTMLElement` 继承。

属性
--

*从父类 `HTMLElement` 继承属性。*

`HTMLBRElement.clear` 
已弃用

Is a `DOMString` indicating the flow of text around floating objects.

方法
--

*无具体方法；从父类 `HTMLElement` 继承方法*。

规范
--

| Specification |
| --- |
| HTML Standard # htmlbrelement |

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

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

参见
--

* HTML element implementing this interface: `<br>`
WebSockets
==========

**WebSockets** 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此 API，你可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。

接口
--

`WebSocket`

用于连接 WebSocket 服务器的主要接口，之后可以在这个连接上发送 和接受数据。

`CloseEvent`

连接关闭时 WebSocket 对象发送的事件。

`MessageEvent`

当从服务器获取到消息的时候 WebSocket 对象触发的事件。

工具
--

* HumbleNet: 一个在浏览器中工作的跨平台网络库。它由一个围绕 websocket 和 WebRTC 的 C 包装器组成，抽象了跨浏览器的差异，方便了为游戏和其他应用程序创建多用户网络功能。
* µWebSockets:由 C++11 和 Node.js 实现的高度可扩展的 WebSocket 服务器和客户端.。
* ClusterWS: 轻量级、快速和强大的框架，用于在 Node.js 中构建可伸缩的 WebSocket 应用程序。
* Socket.IO: 一个基于长轮询/WebSocket 的 Node.js 第三方传输协议。
* SocketCluster: 一个用于Node.js的 pub/sub 专注于可伸缩 WebSocket 框架。
* WebSocket-Node: 一个用 Node.js实现 WebSocket 服务器 API。
* Total.js:一个用Node.js 实现的的 Web 应用程序框架（例如:WebSocket 聊天）。
* Faye: 一个 Node.js 的 WebSocket（双向连接）和 EventSource（单向连接）的服务器和客户端。
* SignalR: SignalR 在可用时将隐藏使用 WebSockets，在不可用时将优雅地使用其他技术和技术，而应用程序代码保持不变。
* Caddy: 能够将任意命令（stdin/stdout）代理为 websocket 的 web 服务器。
* ws: 一个流行的 WebSocket 客户端和服务器 Node.js库。
* jsonrpc-bidirectional: 易于使用异步 RPC 库，通过单个 WebSocket 或 RTCDataChannel (WebRTC) 连接支持双向调用。TCP / SCTP /等。客户端和服务器可以各自承载自己的 JSONRPC 和服务器端点。
* rpc-websockets: JSON-RPC 2.0 在 websocket 上实现 Node.js 和 JavaScript。
规范
--

| Specification |
| --- |
| WebSockets Standard # the-websocket-interface |

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

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

参见
--

* RFC 6455——WebSocket 协议
* WebSocket API 规范
* 服务器发送事件
HTMLDocument
============

**`HTMLDocument`** 是 DOM 的一个抽象接口，它提供了 XML 文档里没有出现的特殊属性和方法。

它的属性和方法包含在 `Document` 接口页面中，并且每个属性和方法都分成小节进行了介绍。

HTMLDocument 对象继承了 Document 接口和 HTMLDocument 接口。因此它有比 Document 更多的属性。并且与 XMLDocument 不同的是，HTMLDocument 是具有外观的，并且要管理它后代的 HTMLElement。

规范
--

| Specification |
| --- |
| HTML Standard # htmldocument |

* http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26809268
CSSStyleSheet
=============

**`CSSStyleSheet`** 接口代表一个 CSS 样式表，并允许检查和编辑样式表中的规则列表。它从父类型 `StyleSheet` 继承属性和方法。

一个 CSS 样式表包含了一组表示规则的 `CSSRule` 对象。每条 CSS 规则可以通过与之相关联的对象进行操作，这些规则被包含在 `CSSRuleList` 内，可以通过样式表的 `cssRules` (en-US) 属性获取。

例如，`CSSStyleRule` 对象中的一条规则可能包含这样的样式：


```css
h1,
h2 {
  font-size: 16pt;
}
```


另一条规则可能是一条“@”规则（*at-rule*），例如 `@import` 或 `@media` 等等。

在说明部分中查看 `CSSStyleSheet` 对象的多种获取方式。

属性
--

继承自 *`StyleSheet`。*

`cssRules` (en-US) 只读 

返回一个实时的 `CSSRuleList`，其中包含组成样式表的 `CSSRule` 对象的一个最新列表。

这一般用于获取单条规则，如下：
```

styleSheet.cssRules[i] // where i = 0..cssRules.length-1
```


使用`CSSStyleSheet` 的 `insertRule()` 和 `deleteRule()` 方法以在 `cssRules` 中添加或移除规则。

`ownerRule` (en-US) 只读 

如果一个样式表示通过`@import` 规则引入文档，那么 `ownerRule` 属性会返回相应的`CSSImportRule` (en-US)对象，否则返回 `null`。

方法
--

继承自 *`StyleSheet`。*

`deleteRule()`

从样式表中删除特定位置的一条规则。

`insertRule()`

向样式表的特定位置插入一条新规则，需要提供新规则的完整文本。

遗留属性
----

*这些遗留属性是很久以前由微软提出的，不应该再使用，但这些属性短期内不会被移除。*

`rules` (en-US) 只读 

`rules` 属性的功能与标准的`cssRules` (en-US)属性相同；它返回一个实时的 `CSSRuleList`，其中包含样式表中所有规则的一个最新列表。

遗留方法
----

*这些遗留方法是很久以前由微软提出的，应尽量避免使用，但这些方法短期内不会被移除。*

`addRule()` (en-US)

向样式表添加一条新规则，需要提供应用样式的选择器和应用在匹配元素上的样式块。

这和 `insertRule()` 不同，后者只是简单地将整个传入的规则文本当作一个字符串。

`removeRule()` (en-US)

与`deleteRule()`功能相同；从样式表的规则列表的特定位置中移除规则。

说明
--

在一些浏览器中，如果一个样式表加载自不同的域，访问 `cssRules` 属性时会抛出 `SecurityError`。

一个样式表最多与一个`Document`链接，即所应用的那个`Document`（除非`disabled`）。一个特定文档的 `CSSStyleSheet` 对象列表可用 `document.styleSheets` 属性获取。一个特定的样式表也可以通过其所在对象（`Node` 或 `CSSImportRule`）获取，如果有的话。

在文档的样式表加载时，一个 `CSSStyleSheet` 对象由浏览器自动创建并插入至文档的`Document.styleSheets`列表中。由于样式表列表不能直接修改，我们没有什么有效的手段取手动创建一个新的 `CSSStyleSheet` 对象（不过Constructable Stylesheet Objects很快会来到 web 平台，而且 Blink 早已支持）。需要创建新的样式表就直接在文档中插入`<style>` 或 `<link>` 元素吧。

以下是将样式表链接到文档的一些方式（可能不完整）：

| 样式表与文档链接的原因 | 是否出现在`document. styleSheets` 列表中 | 获取样式表对象所在的元素/规则 | 所在对象的接口 | 从所在对象获取 CSSStyleSheet 对象 |
| --- | --- | --- | --- | --- |
| 文档中的`<style>` 和`<link>` 元素 | 是 | `.ownerNode` (en-US) | `HTMLLinkElement` (en-US), `HTMLStyleElement`, 或 `SVGStyleElement` (en-US) | `.sheet` (en-US) |
| 使用 CSS `@import` 从其他样式表导入并应用到文档的规则 | 是 | `.ownerRule` (en-US) | `CSSImportRule` (en-US) | `.styleSheet` (en-US) |
| `<?xml-stylesheet ?>` processing instruction in the (non-HTML) document | 是 | `.ownerNode` (en-US) | `ProcessingInstruction` (en-US) | `.sheet` (en-US) |
| HTTP 链接头部 | 是 | *N/A* | N/A | N/A |
| 用户代理（默认）样式表 | 否 | N/A | N/A | N/A |

规范
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssstylesheet-interface |

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

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

参见
--

* CSS Object Model
* Using dynamic styling information
FetchEvent
==========

这是会在 service worker 全局作用域中触发 `fetch` 事件的事件类型。它包含关于 fetch 的信息，包括 request 和接收方如何处理响应。它提供 `event.respondWith()` 方法，允许我们为此 fetch 提供一个响应。

Event

ExtendableEvent

FetchEvent构造函数
----

`FetchEvent()` (en-US)

创建一个新的 `FetchEvent` 对象。这个构造函数不是很常用。浏览器自己会创建这些对象，并为它们提供 `fetch` 事件的回调。

属性
--

*从它的祖先 `Event` 继承属性*。

`FetchEvent.clientId` 只读 

发起 fetch 的同源`客户端`的 `id`。

`FetchEvent.preloadResponse` (en-US) 只读 

一个兑现为 `Response` 的 `Promise`，如果该 fetch 没有导航或者 navigation preload (en-US) 未启用，则是 `undefined`。

`FetchEvent.replacesClientId` (en-US) 只读 

页面导航期间正被替换的`客户端`的 `id`。

`FetchEvent.resultingClientId` (en-US) 只读 

页面导航期间用于替换的`客户端`的 `id`。

`FetchEvent.request` 只读 

浏览器想要发送的 `Request`。

方法
--

*从它的父元素 `ExtendableEvent` 继承方法*。

`FetchEvent.respondWith()`

阻止浏览器的默认 fetch 操作，并且由你自己提供一个响应（可以是一个 promise）。

`ExtendableEvent.waitUntil()`

延长事件的生命周期。用于通知浏览器延长超出响应回复时间的任务，例如流和缓存。

示例
--

fetch 事件对非 GET 请求使用浏览器默认值。对于 GET 请求它试图在缓存中匹配，如果缓存中没有匹配，则回落到网络请求。如果在缓存中匹配成功，它将异步更新缓存，以供下次使用。


```js
self.addEventListener("fetch", (event) => {
  // Let the browser do its default thing
  // for non-GET requests.
  if (event.request.method !== "GET") return;

  // Prevent the default, and handle the request ourselves.
  event.respondWith(
    (async () => {
      // Try to get the response from a cache.
      const cache = await caches.open("dynamic-v1");
      const cachedResponse = await cache.match(event.request);

      if (cachedResponse) {
        // If we found a match in the cache, return it, but also
        // update the entry in the cache in the background.
        event.waitUntil(cache.add(event.request));
        return cachedResponse;
      }

      // If we didn't find a match in the cache, use the network.
      return fetch(event.request);
    })(),
  );
});
```

规范
--

| Specification |
| --- |
| Service Workers # fetchevent-interface |

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

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

参见
--

* `Promise`
* Fetch API
ClipboardEvent
==============

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

**`ClipboardEvent`** 接口描述了与修改剪切板相关信息的事件，这些事件包括 剪切`cut` , 复制`copy` 和 粘贴`paste` 事件。

构造函数
----

`ClipboardEvent()`

用给定的参数创建了一个 `ClipboardEvent` 事件。

属性
--

*同样是从其父类* *`Event`* *继承的属性。*

`ClipboardEvent.clipboardData` 只读 

是一个 `DataTransfer` 对象，它包含了由用户发起的 `cut` 、 `copy` 和 `paste` 操作影响的数据，以及它的 MIME 类型。

方法
--

*没有特定方法；从*其*父类 `Event`* *继承方法。*

规范
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-interfaces |

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

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

参见
--

* Copy-related events: `copy`, `cut`, `paste`
GPU
===

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

WebGPU API 的 **`GPU`** 接口是使用 WebGPU 的入口点。它用于返回一个 `GPUAdapter`，你可以从中请求设备，获取配置特性以及限制等。

当前上下文的 `GPU` 对象可以通过 `Navigator.gpu` 或 `WorkerNavigator.gpu` 属性访问。

实例属性
----

`requestAdapter()` 
实验性

返回 `Promise`，会兑现一个 `GPUAdapter` 对象实例。这时，你可以请求一个 `GPUDevice`，它是使用 WebGPU 功能的主要接口。

`getPreferredCanvasFormat()` 
实验性

返回用于当前系统上显示 8 位色深、标准动态范围（SDR）内容的最佳 canvas 纹理格式。

示例
--

### 请求适配器和设备


```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();

  //...
}
```

### 使用最佳纹理格式配置 GPUCanvasContext


```js
const canvas = document.querySelector("#gpuCanvas");
const context = canvas.getContext("webgpu");

context.configure({
  device: device,
  format: navigator.gpu.getPreferredCanvasFormat(),
  alphaMode: "premultiplied",
});
```

规范
--

| Specification |
| --- |
| WebGPU # gpu-interface |

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

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

参见
--

* WebGPU API
Geolocation
===========

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**`Geolocation`** 接口是一个用来获取设备地理位置的可编程的对象，它可以让 Web 内容访问到设备的地理位置，这将允许网站或应用基于用户的地理位置提供定制的信息。

带有此接口的对象可以用由 `Navigator` 实现的属性 `NavigatorGeolocation.geolocation` 来获得。

**备注：** 出于安全考虑，当一个网页尝试获取地理位置信息时，会请求用户批准地理位置访问权限。因为每个浏览器都有各自请求用户批准该权限的策略和方法。

实例属性
----

*`Geolocation` 接口不实现，也不继承任何属性。*

实例方法
----

*`Geolocation` 接口不继承任何方法。*

`Geolocation.getCurrentPosition()`

确定设备的位置并返回一个携带位置信息的 `Position` 对象。

`Geolocation.watchPosition()`

注册一个位置改变监听器，每当设备位置改变时，返回一个 `long` 类型的该监听器的 ID 值。

`Geolocation.clearWatch()`

取消由 `watchPosition()` 注册的位置监听器。

规范
--

| Specification |
| --- |
| Geolocation API # geolocation\_interface |

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

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

参见
--

* 使用地理位置定位
Credential Management API
=========================

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

Credential Management API 允许网站存储和检索用户，联合账户和公钥证书。这些功能允许用户在不输入密码的情况下登录，查看他们曾经登录到一个站点的联合帐户，并且在会话过期且没有显式的登录流程的情况下恢复会话。

Credential management 概念和用法
---------------------------

此 API 允许网站与用户代理的密码系统进行交互，以便网站能够以统一的方式处理站点凭证，而用户代理则可以为他们的凭证管理提供更好的帮助。例如，用户代理在处理联合身份提供程序或使用不仅仅是用户名和密码的深奥登录机制时特别困难。为了解决这些问题，Credential Management API 为网站提供了存储和检索不同类型凭据的方法。这为用户提供了一些功能，比如查看他们曾经登录到某个站点的联合帐户，或者在会话过期且没有显式的登录流程的情况下恢复会话。

**备注：** 此 API 仅限于顶级上下文。在<iframe>元素中调用 get() 和 store() 将无效。

### 子域共享凭据（Subdomain-shared credentials）

规范的更高版本允许从不同的子域检索凭证。例如，存储在 login.example.com 中的密码可用于登录 www.example.com。要利用这一点，必须通过调用`CredentialsContainer.store()` (en-US)显式存储密码。这有时被称为公共后缀列表（PSL）匹配;但是规范仅建议使用 PSL 来确定凭证的有效范围。它 (子域共享凭据) 不需要它。因此浏览器的实现可能会有所不同。

接口
--

`Credential` (en-US)

提供有关实体的信息，作为信任决策的先决条件。

`CredentialsContainer`

公开请求凭据的方法，并在发生令人关注的事件（如成功登录或注销）时通知用户代理。可以从`Navigator.credentials`访问此接口。

`FederatedCredential` (en-US)

提供关于联合身份提供程序的凭据的信息，联合身份提供程序是网站信任的实体，可以正确地对用户进行身份验证，并为此提供 API。 OpenID Connect 就是这种框架的一个例子。

`PasswordCredential` (en-US)

提供有关用户名/密码对的信息。

`PublicKeyCredential` (en-US)

提供使用不可窃取和数据破坏的非对称密钥对 (而不是密码登录) 的凭据。

规范
--

| Specification |
| --- |
| Credential Management Level 1 # the-credential-interface |

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

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

**`AudioTrack`** 接口表示从 HTML 介质元件中的一个单一的音轨， `<audio>` 或 `<video>`. 访问`AudioTrack` 对象的最常见用途是切换其`enabled` (en-US) 属性，以使轨道静音和取消静音。

属性
--

`enabled` (en-US)

一个布尔值，用于控制是否启用音轨的声音。设置此值`false`可使音轨的音频静音。

`id` (en-US) 只读 

一个`DOMString`唯一标识媒体中的曲目。此 ID 可用于通过调用`AudioTrackList.getTrackById()` (en-US)来定位音轨列表中的特定轨道。如果媒体支持按媒体片段URI 规范按媒体片段搜索，则 ID 也可以用作 URL 的片段部分。

`kind` (en-US) 只读 

一个`DOMString`指定轨道所属的类别。例如，主音频轨道将有一个`kind`的`"main"`。

`label` (en-US) 只读 

A `DOMString`为轨道提供人类可读的标签。例如，一个音频评论轨道的电影可以有一个`label`的`"Commentary with director John Q. Public and actors John Doe and Jane Eod."`，如果没有提供标签此字符串是空的。

`language` (en-US) 只读 

一个`DOMString`指定音轨的主要语言，如果未知，则为空字符串。该语言被指定为 BCP 47(RFC 5646) 语言代码，例如`"en-US"`或`"pt-BR"`。

`sourceBuffer` (en-US) 只读 

创建轨道的`SourceBuffer`。如果轨道不是由`SourceBuffer`创建的，或者`SourceBuffer`已从`MediaSource.sourceBuffers`属性中删除，则返回 null 其母媒体来源。

使用说明
----

要获取`AudioTrack`给定媒体元素，请使用元素的`audioTracks`属性，该属性返回`AudioTrackList` (en-US)对象，你可以从中获取媒体中包含的各个曲目：


```js
var el = document.querySelector("video");
var tracks = el.audioTracks;
```


然后，你可以使用数组语法或`forEach()`等函数访问媒体的各个轨道。

第一个示例获取媒体上的第一个音轨：


```js
var firstTrack = tracks[0];
```


下一个示例扫描所有媒体的音轨，启用用户首选语言中的任何一种 (取自变量`userLanguage`) 并禁用任何其他语音。


```js
tracks.forEach(function (track) {
  if (track.language === userLanguage) {
    track.enabled = true;
  } else {
    track.enabled = false;
  }
});
```


`language` (en-US)采用标准 (RFC 5646) 格式。例如，对于美国英语，这将是`"en-US"`。

示例
--

参见 `AudioTrack.label` (en-US) 以获取简单示例，其中展示了如何获取指定媒体元素按轨道类别筛选后的包含轨道类别与标签的数组。

规范
--

| Specification |
| --- |
| HTML Standard # audiotrack |

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

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