recursal/MDN huggingface dataset:
Headers
=======

Fetch API 的 **Headers** 接口允许你对 HTTP 请求和响应头执行各种操作。这些操作包括检索，设置，添加和删除。

一个 Headers 对象具有关联的标头列表，它最初为空，由零个或多个键值对组成。你可以使用类似于 `append()` 这样的方法添加（参见示例）到这个对象中。在该接口的所有方法中，标头名称由不区分大小写的字节序列匹配。

出于安全考虑，某些头只能由用户代理控制。这些头信息包括 forbidden header names 和 forbidden response header names。

一个 Headers 对象也有一个关联的 guard，它具有不可变的值，`request`，`request-no-cors`，`response`或`none`。这会影响 `set()`, `delete()`, 和`append()` 方法 改变 header. 参考更多信息，请看 Guard.

你可以通过 `Request.headers` 和`Response.headers` 属性检索一个`Headers`对象，并使用 `Headers.Headers()` 构造函数创建一个新的`Headers` 对象。

一个实现了`Headers` 的对象可以直接用于 `for...of` 结构中，而不是 `entries()`: `for (var p of myHeaders)` 等价于 `for (var p of myHeaders.entries())`.

**备注：** 你可以通过阅读我们的 HTTP headers参考找到更多关于可用 headers 的信息。

构造函数
----

`Headers.Headers()`

创建一个新的 Headers 对象。

方法
--

`Headers.append()`

给现有的 header 添加一个值，或者添加一个未存在的 header 并赋值。

`Headers.delete()`

从 Headers 对象中删除指定 header.

`Headers.entries()`

以 `迭代器` 的形式返回 Headers 对象中所有的键值对。

`Headers.get()`

以 `ByteString` 的形式从 Headers 对象中返回指定 header 的全部值。

`Headers.has()`

以布尔值的形式从 Headers 对象中返回是否存在指定的 header.

`Headers.keys()`

以`迭代器`的形式返回 Headers 对象中所有存在的 header 名。

`Headers.set()`

替换现有的 header 的值，或者添加一个未存在的 header 并赋值。

`Headers.values()`

以`迭代器`的形式返回 Headers 对象中所有存在的 header 的值。


**备注：** 值得注意的是，在 header 已存在或者有多个值的状态下`Headers.set()` 和 `Headers.append()`的使用有如下区别，`Headers.set()` 将会用新的值覆盖已存在的值，但是`Headers.append()`会将新的值添加到已存在的值的队列末尾。请参相关词条内的示例代码。

**备注：** 如果你尝试传入名称不是有效的 HTTP 标头名称的引用，则所有 Headers 方法都将引发 `TypeError`。如果标头具有不可变的 Guard，则突变操作会引发 `TypeError`。在任何其他失败情况下，它们都会无声地失败。

### Obsolete methods

`Headers.getAll()`

用于返回具有给定名称的 `Headers` 对象中所有值的数组; 这个方法现在已经从规范中删除了，`Headers.get()` 方法现在返回所有的值而不是一个。

示例
--

在这个小示例中，我们将会通过 Headers 构造函数创建一个新的 header，先使用 append() 方法添加一个 header，然后通过 get() 方法返回这个 header 的值


```js
let myHeaders = new Headers();

myHeaders.append("Content-Type", "text/xml");

myHeaders.get("Content-Type");
// should return 'text/xml'
```

规范
--

| Specification |
| --- |
| Fetch Standard # headers-class |

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

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

参见
--

* ServiceWorker API
* HTTP 访问控制（CORS）
* HTTP
InstallEvent
============

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

该参数传递到 `oninstall` 事件处理程序，`InstallEvent` 接口表示一个 `ServiceWorker` 的 `ServiceWorkerGlobalScope` 上分派的安装操作。作为 `ExtendableEvent` 的一个子类，它确保在安装期间不调度诸如 `FetchEvent` 之类的功能事件。

该接口继承自 `ExtendableEvent` 接口。

构造函数
----

`InstallEvent.InstallEvent()` (en-US)

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

属性
--

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

`InstallEvent.activeWorker` (en-US) 只读 

返回当前处于激活状态，控制页面的`ServiceWorker`。

方法
--

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

示例
--

该代码片段来自 service worker prefetch sample (请参阅 prefetch running live)。代码在`ServiceWorkerGlobalScope.oninstall`中调用`ExtendableEvent.waitUntil(any value)`，并延迟将`ServiceWorkerRegistration.installing` (en-US) worker 视为已安装的，直到传递的 promise 被成功地 resolve。当所有资源已经获取并缓存，或者有任何异常发生时，promise 才会 resolve。

该代码片段也展示了服务工作线程使用的缓存版本控制的最佳实践。虽然此示例只有一个缓存，但你可以将此方法用于多个缓存。代码将缓存的速记标识映射到特定的版本化缓存名称。

**备注：** service worker 的注册日志记录在 Chrome 浏览器中可以通过访问 chrome://serviceworker-internals 查看。


```js
var CACHE\_VERSION = 1;
var CURRENT\_CACHES = {
  prefetch: "prefetch-cache-v" + CACHE\_VERSION,
};

self.addEventListener("install", function (event) {
  var urlsToPrefetch = [
    "./static/pre\_fetched.txt",
    "./static/pre\_fetched.html",
    "https://www.chromium.org/\_/rsrc/1302286216006/config/customLogo.gif",
  ];

  console.log(
    "Handling install event. Resources to pre-fetch:",
    urlsToPrefetch,
  );

  event.waitUntil(
    caches
      .open(CURRENT\_CACHES["prefetch"])
      .then(function (cache) {
        cache
          .addAll(
            urlsToPrefetch.map(function (urlToPrefetch) {
              return new Request(urlToPrefetch, { mode: "no-cors" });
            }),
          )
          .then(function () {
            console.log("All resources have been fetched and cached.");
          });
      })
      .catch(function (error) {
        console.error("Pre-fetching failed:", error);
      }),
  );
});
```

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

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

参见
--

* `NotificationEvent`
* `Promise`
* Fetch API
性能监测对象
======

**`PerformanceObserver`** 用于*监测*性能度量事件，在浏览器的性能时间轴记录新的 performance entry 的时候将会被通知。

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

构造函数
----

`PerformanceObserver()`

创建并返回一个新的 `PerformanceObserver` 对象。

方法
--

`PerformanceObserver.observe()`

指定监测的 `entry types` 的集合。当 `performance entry` 被记录并且是指定的 `entryTypes` 之一的时候，性能观察者对象的回调函数会被调用。

`PerformanceObserver.disconnect()`

性能监测回调停止接收 性能条目。

`PerformanceObserver.takeRecords()`

返回当前存储在性能观察器的 `performance entry` 列表，并将其清空。

示例
--


```js
function perf\_observer(list, observer) {
  // Process the "measure" event
  // 处理 "measure" 事件
}
var observer2 = new PerformanceObserver(perf_observer);
observer2.observe({ entryTypes: ["measure"] });
```

规范
--

| Specification |
| --- |
| Performance Timeline # dom-performanceobserver |

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

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

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

**`ImageBitmapRenderingContext`** 接口是 canvas 的渲染上下文，它只提供了使用给定 `ImageBitmap` 替换 canvas 的功能。它的上下文 ID (`HTMLCanvasElement.getContext()` 或 `OffscreenCanvas.getContext()` (en-US) 的第一个参数) 是 `"bitmaprenderer"`。

这个接口可用于 window context 和 worker context.

方法
--

`ImageBitmapRenderingContext.transferFromImageBitmap()` (en-US)

在与此渲染上下文相关的 canvas 中显示给定的 `ImageBitmap` 。 `ImageBitmap` 的所有权被转移到画布上。这个函数以前命名为`transferImageBitmap()`，但在规范中修改了原名字。为了避免影响之前的代码，旧名称作为别名被保留下来。

规范
--

Currently drafted as a proposal in the OffscreenCanvas specification.

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

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

相关链接
----

* `OffScreenCanvas`
HashChangeEvent
===============

**`HashChangeEvent`** 接口表示一个变化事件，当 URL 中的片段标识符发生改变时，会触发此事件。

片段标识符指 URL 中 `#` 号和它以后的部分。

Event

HashChangeEvent属性
--

*这个接口也从 `Event` 中继承属性。*

`HashChangeEvent.newURL` 只读 

window 即将导航到达的新 URL。

`HashChangeEvent.oldURL` 只读 

window 此前导航到达过的 URL。

方法
--

*这个接口没有自己的方法，但从 `Event` 中继承方法。*

示例
--

### 基本示例


```js
function locationHashChanged() {
  if (location.hash === "#somecoolfeature") {
    somecoolfeature();
  }
}

window.addEventListener("hashchange", locationHashChanged);
```

回落方法（Polyfill）
--------------

在 Modernizr GitHub page 中列出了几种回落（fallback）脚本。基本上，这些脚本每隔一段时间检查以此 `location.hash`。这里是其中一个版本，其仅允许一个处理程序（handler）绑定在 `onhashchange` 属性上：


```js
(function (window) {
  // 如果浏览器已经实现了此事件，则退出函数
  if ("onhashchange" in window.document.body) return;

  var location = window.location,
    oldURL = location.href,
    oldHash = location.hash;

  // 每隔 100 毫秒，检查一次片段标识符
  setInterval(function () {
    var newURL = location.href,
      newHash = location.hash;

    // 如果片段标识符有变化，且处理程序存在
    if (newHash != oldHash && typeof window.onhashchange === "function") {
      // 执行处理程序
      window.onhashchange({
        type: "hashchange",
        oldURL: oldURL,
        newURL: newURL,
      });

      oldURL = newURL;
      oldHash = newHash;
    }
  }, 100);
})(window);
```

规范
--

| Specification |
| --- |
| HTML Standard # the-hashchangeevent-interface |

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

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

相关事件
----

* `hashchange`
* `popstate`
Clipboard API
=============

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
剪贴板 **Clipboard** **API** 提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。从权限 Permissions API (en-US) 获取权限之后，才能访问剪贴板内容；如果用户没有授予权限，则不允许读取或更改剪贴板内容。

该 API 被设计用来取代使用 `document.execCommand()` 的剪贴板访问方式。

访问剪贴板
-----

除了在实例化中创建一个 `Clipboard` 对象，你还可以使用全局的 `Navigator.clipboard` 来访问系统剪贴板。


```js
navigator.clipboard
  .readText()
  .then(
    (clipText) => (document.querySelector(".editor").innerText += clipText),
  );
```


上述代码提取了剪贴板的文本并将其附在 class 为 `editor` 的第一个元素后面。因为当剪贴板中不是文本时， `readText()` (and `read()` (en-US), for that matter) 会返回一个空字符串，所以这段代码是安全的。

接口
--

`Clipboard` 安全上下文

提供了一个用于读写系统剪贴板上的文本和数据的接口。规范中被称为异步剪贴板 API（Async Clipboard API）。

`ClipboardEvent` 安全上下文

表示提供了有关剪贴板修改的信息的事件，也就是 `cut`、`copy`，和 `paste`。规范中被称为剪贴板事件 API（Clipboard Event API）。

规范
--

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

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

### api.Clipboard

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

### api.ClipboardEvent

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

### api.ClipboardItem

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

参见
--

* 权限 API：Permissions API (en-US)
* 使用权限 API
HTMLTemplateElement
===================

可以使用 **`HTMLTemplateElement`** 接口来访问 HTML `<template>` 元素的内容。

属性
--

*这个接口继承了 `HTMLElement` 的属性。*

`HTMLTemplateElement.content`只读 

`DocumentFragment` 对象，包裹了模板元素 `<template>` 的内容。这个属性是只读的 DOM 树。

方法
--

*这个接口继承了 `HTMLElement` 的方法。*

规范
--

| Specification |
| --- |
| HTML Standard # htmltemplateelement |

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

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

`WindowOrWorkerGlobalScope` 内置的 **`clearTimeout()`** 方法取消了先前通过调用`setTimeout()`建立的定时器。

语法
--
```

scope.clearTimeout(timeoutID)
```

### Parameters

`timeoutID`

你要取消定时器的标识符。该 ID 由相应的`setTimeout()`调用返回。

值得注意的是，`setTimeout()` 和 `setInterval()` 使用共享的 ID 池，意味着在技术上可以混用 `clearTimeout()` 和 `clearInterval()`。但是，为了清楚起见，你应该避免这样做。

示例
--

在一个网页中运行如下脚本，并且点击一次页面。一秒钟后你会看见弹出一条信息。如果你在一秒内不停点击页面，弹出框将不再出现。


```js
var alarm = {
  remind: function (aMessage) {
    alert(aMessage);
    delete this.timeoutID;
  },

  setup: function () {
    this.cancel();
    var self = this;
    this.timeoutID = window.setTimeout(
      function (msg) {
        self.remind(msg);
      },
      1000,
      "Wake up!",
    );
  },

  cancel: function () {
    if (typeof this.timeoutID == "number") {
      window.clearTimeout(this.timeoutID);
      delete this.timeoutID;
    }
  },
};
window.onclick = function () {
  alarm.setup();
};
```

注意
--

传入一个错误的 ID 给 `clearTimeout()`不会有任何影响；也不会抛出异常。

规范
--

| Specification |
| --- |
| HTML Standard # dom-cleartimeout-dev |

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

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

更多
--

* `WindowTimers.setTimeout()` (en-US)
* `WindowTimers.setInterval()` (en-US)
* `WindowTimers.clearInterval()` (en-US)
* `Window.requestAnimationFrame()`
* *Daemons* management
Permissions
===========

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

Permissions API的 Permissions 接口提供核心 PermissionAPI 功能，例如查询和撤消权限的方法。

方法
--

`Permissions.query()` (en-US)

返回给定 API 的用户权限状态。

`Permissions.request()`

请求使用给定 API 的权限，目前此功能尚未在任何浏览器中被支持。

`Permissions.requestAll()`

请求使用一组给定 API 的权限。目前此功能尚未在任何浏览器中被支持。

`Permissions.revoke()` (en-US)

返回撤消当前在给定 API 上设置的权限。

Example
-------


```js
navigator.permissions.query({ name: "geolocation" }).then(function (result) {
  if (result.state === "granted") {
    showLocalNewsWithGeolocation();
  } else if (result.state === "prompt") {
    showButtonToEnableLocalNews();
  }
  // 如果没有此权限则不什么也做
});
```

Specification
-------------

| Specification |
| --- |
| Permissions # permissions-interface |

Browser Support
---------------

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

**`HTMLOptionElement`** 接口表示了 `<option>` 元素并继承`HTMLElement`接口所有的类和方法。

属性
--

*继承自其父类属性，`HTMLElement`.*

| 名称 | 类型 | 描述 |
| --- | --- | --- |
| `defaultSelected` | `Boolean` (en-US) | 包含了`selected` HTML 特性的初始值，指示默认情况下是否选择该选项。 |
| `disabled` | `Boolean` (en-US) | 反映了`disabled` HTML 特性 的值 , 这意味着选项（option）是不可选的。如果一个选项是关闭的`<optgroup>`元素的子元素，那么它也可被关闭。 |
| `form`只读  | `HTMLFormElement` | 如果该选项是`<select>` 元素的后代，则该属性与相应`HTMLSelectElement` (en-US) 对象的`form`属性具有相同的值; 否则为`null`。 |
| `index`只读  | `long` | 该选项在其所属的选项列表中的位置，以树形顺序排列。如果该选项不是选项列表的一部分，例如为 `<datalist>` 元素的一部分时，该值为`0`。 |
| `label` | `DOMString` | 反映`label` HTML 特性的值，该属性为选项提供了一个标签。如果没有特别设置此属性，读取它返回元素的文本内容。 |
| `selected` | `Boolean` (en-US) | 表示当前该 option 是否被选择。 |
| `text` | `DOMString` | 包含元素的文本内容。 |
| `value` | `DOMString` | 反映`value` HTML 特性的值（如果存在）；否则反映`Node.textContent` 特性的值。 |

方法
--

*方法继承自其父类，`HTMLElement`.*

`HTMLOptionElement.Option()`是一个创建`HTMLOptionElement`对象的构造函数。它有四个值：要显示的文本，`文本`，关联的值，`值`，defaultSelected 的值以及`所选`的值。最后三个值是可选的。

规范
--

| Specification |
| --- |
| HTML Standard # htmloptionelement |

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

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

参见
--

* 实现此接口的 HTML 元素 : `<option>`。
MutationRecord
==============

每个 **`MutationRecord`** 都代表一个独立的 DOM 变化，在每次随 DOM 变化调用 `MutationObserver` 的回调函数时，一个相应的 `MutationRecord` 会被作为参数，传递给回调函数。

属性
--

|  |  |  |
| --- | --- | --- |
| 属性 | 类型 | 描述 |
| `MutationRecord.type` (en-US) | `String` | 
 如果是属性变化，则返回 `"attributes"`；如果是
 `characterData` 节点变化，则返回
 `"characterData"`；如果是子节点树
 `childList` 变化，则返回 `"childList"`。
  |
| `MutationRecord.target` (en-US) | `Node` | 
 根据
 `MutationRecord.type` (en-US)，返回变化所影响的节点。对于属性
 `attributes` 变化，返回属性变化的节点。对于
 `characterData` 变化，返回
 `characterData` 节点。对于子节点树
 `childList` 变化，返回子节点变化的节点。
  |
| `MutationRecord.addedNodes` (en-US) | `NodeList` | 
 返回被添加的节点。如果没有节点被添加，则该属性将是一个空的
 `NodeList`。
  |
| `MutationRecord.removedNodes` (en-US) | `NodeList` | 
 返回被移除的节点。如果没有节点被移除，则该属性将是一个空的
 `NodeList`。
  |
| `MutationRecord.previousSibling` (en-US) | `Node` | 返回被添加或移除的节点之前的兄弟节点，或者 `null`。 |
| `MutationRecord.nextSibling` (en-US) | `Node` | 返回被添加或移除的节点之后的兄弟节点，或者 `null`。 |
| `MutationRecord.attributeName` (en-US) | `String` | 返回被修改的属性的属性名，或者 `null`。 |
| `MutationRecord.attributeNamespace` (en-US) | `String` | 返回被修改属性的命名空间，或者 `null`。 |
| `MutationRecord.oldValue` (en-US) | `String` | 
 返回值取决于 `MutationRecord.type` (en-US)。对于属性
 `attributes` 变化，返回变化之前的属性值。对于
 `characterData`
 变化，返回变化之前的数据。对于子节点树
 `childList` 变化，返回 `null`。


 注意，如果要让这个属性起作用，在相应的
 MutationObserverInit
 参数的 `MutationObserver`
observe
 方法中，`attributeOldValue` 或者
 `characterDataOldValue` 必须设置为 `true`。

 |

规范
--

| Specification |
| --- |
| DOM Standard # interface-mutationrecord |

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

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

**`CSSStyleRule`** 表示一条 CSS 样式规则。它实现了 `CSSRule` 接口，类型的值为 `1`（`CSSRule.STYLE_RULE`）。

属性
--

`CSSStyleRule.selectorText`

返回这条规则的、文本格式的选择器，例如 `"h1,h2"`。

`CSSStyleRule.style` 只读 

返回这条规则的 `CSSStyleDeclaration` 对象。

`CSSStyleRule.styleMap` (en-US) 只读 

返回一个 `StylePropertyMap` 对象，which provides access to the rule's property-value pairs.

规范
--

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

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

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

`CSS` 接口涵盖 CSS 相关的实用方法。尚且不存在实现这个接口的对象：它仅仅包含静态的方法，因此也是一个实用性的接口。

属性
--

CSS 接口是一个工具接口，无法创建该类型的对象：其内部只定义了静态属性。

### 静态属性

`CSS.paintWorklet` (en-US) 
实验性
安全上下文

针对所有与绘制相关的类，提供对负责它们的工作集的访问。

方法
--

CSS 接口是一个工具接口，无法创建该类型的对象：其内部只定义了静态方法。

### 静态方法

没有继承的静态方法。

`CSS.registerProperty()` (en-US)

注册 `custom properties`，启用属性类型检查、默认值，以及继承了或者没有继承它们值的属性。

`CSS.supports()`

返回一个 `Boolean` 来表明键值对、条件，或者传入参数是否受支持。

`CSS.escape()`

可以用来转义一个大多用来当作 CSS 选择器一部分的字符串。

`CSS factory functions`

可以用来返回一个 `CSSUnitValue` (en-US)。它的值由传入的数值以及调用的 factory 方法名称组成。
```

CSS.em(3) // CSSUnitValue {value: 3, unit: "em"}
```


规范
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # namespacedef-css |
| CSS Properties and Values API Level 1  |

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

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

参见
--

* Components.utils.importGlobalProperties
FocusEvent
==========

**`FocusEvent`** 接口表示和焦点相关的事件比如 `focus`, `blur`, `focusin` (en-US), 和 `focusout`。

Event

UIEvent

FocusEvent构造器
---

`FocusEvent()` (en-US)

使用给定的参数创建 `FocusEvent` 事件。

属性
--

*此接口从它的父级继承了属性 `UIEvent`, 间接来自于 `Event`*.

`FocusEvent.relatedTarget` (en-US) 只读 

`EventTarget` 这个代表此次事件的次要目标。在一些案例中，例如切换浏览器 tab 标签时，为了安全的原因，这个属性可能会被设置为 `null` 。

方法
--

*此接口没有特殊的方法。它从父级 `UIEvent` 继承方法*, 并间接从 `Event` 继承方法。

规范
--

| Specification |
| --- |
| UI Events # interface-focusevent |

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

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

参见
--

* `Event` 基接口
PerformancePaintTiming
======================

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

Paint Timing API (en-US) 提供的 **`PerformancePaintTiming`** 是一个提供页面在构建过程中的“绘制”（也称“渲染”）时间点信息的接口。“绘制”是指将渲染树转换为页面上像素的过程。

应用可以为名为“`paint`”的`performance entry 类型` 注册一个`PerformanceObserver`，然后观察者可以获取绘制相关的事件发生的时间。以此来帮你找出那些花费太多时间去绘制的区域，而后提升用户体验。

PerformanceEntry

PerformancePaintTiming属性
--

这个接口没有属性，但是（为了"`paint`" `performance entry 类型`）通过一些限制和约束 扩展了以下`PerformanceEntry`属性

`PerformanceEntry.entryType`

返回 "`paint`".

`PerformanceEntry.name`

返回 `"first-paint"` 或`"first-contentful-paint"`.

`PerformanceEntry.startTime` (en-US)

当开始“绘制“时返回 `timestamp`.

`PerformanceEntry.duration` (en-US)

返回 0.

方法
--

这个接口没有方法

例子
--


```js
function showPaintTimings() {
  if (window.performance) {
    let performance = window.performance;
    let performanceEntries = performance.getEntriesByType("paint");
    performanceEntries.forEach((performanceEntry, i, entries) => {
      console.log(
        "The time to " +
          performanceEntry.name +
          " was " +
          performanceEntry.startTime +
          " milliseconds.",
      );
    });
  } else {
    console.log("Performance timing isn't supported.");
  }
}
```


上面例子输出如下
```

The time to first-paint was 2785.915 milliseconds.
The time to first-contentful-paint was 2787.460 milliseconds.
```

规范
--

| Specification |
| --- |
| Paint Timing # sec-PerformancePaintTiming |

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

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

**`DOMTokenList`** 接口表示一组空格分隔的标记（tokens）。如由 `Element.classList`、`HTMLLinkElement.relList` (en-US)、`HTMLAnchorElement.relList` (en-US) 或 `HTMLAreaElement.relList` (en-US) 返回的一组值。它和 JavaScript `Array` 对象一样，索引从 0 开始。`DOMTokenList` 总是区分大小写（case-sensitive）。

属性
--

`DOMTokenList.length` 只读 

一个整数，表示存储在该对象里值的个数。

`DOMTokenList.value` (en-US)

该属性以 `DOMString` 的形式返回 **`DOMTokenList`** 列表的值。

方法
--

`DOMTokenList.item(index)`

根据传入的索引值返回一个值，如果索引值大于等于符号列表的长度（`length`），则返回 `undefined` 或 `null`，在 Gecko 7.0 之前的版本中返回 `null`。

`DOMTokenList.contains(token)`

如果 DOMTokenList 列表中包括相应的字符串 `token`，则返回 `true`，否则返回 `false`。

`DOMTokenList.add(token1[, token2[, ...tokenN]])`

添加一个或多个标记（`token`）到 `DOMTokenList` 列表中。

`DOMTokenList.remove(token1[, token2[, ...tokenN]])`

从 `DOMTokenList` 列表中移除一个或多个标记（`token`）。

`DOMTokenList.replace(oldToken, newToken)`

使用 `newToken` 替换 `token`\_ 。\_

`DOMTokenList.supports(token)`

如果传入的 `token` 是相关属性（attribute）支持的标记，则返回 `true` 。

`DOMTokenList.toggle(token [, force])`

从 DOMTokenList 字符串中移除标记字串（`token`），并返回 `false`。如果传入的字串（`token`）不存在，则将其添加进去，并返回 `true` 。`force` 是一个可选的布尔值，如果传入 `true` ，且传入的 *`token`* 不存在，则将其添加进去并返回 `true` ，若传入的 *`token`* 存在，则直接返回 `true` ；反之，如果传入 `false` ，则移除存在的 `token`，并返回 `false` ，如 `token` 不存在则直接返回 `false` 。

`DOMTokenList.entries()` (en-US)

返回一个迭代器（`iterator`），以遍历这个对象中的所有键值对。

`DOMTokenList.forEach(callback [, thisArg])` (en-US)

为每个 `DOMTokenList` 中的元素都调用一次传入的 `callback` 函数。

`DOMTokenList.keys()`

返回一个迭代器（`iterator`）以遍历这个对象中所有键值对的键。

`DOMTokenList.values()` (en-US)

返回一个迭代器（`iterator`）以遍历这个对象中所有键值对的值。

示例
--

在下面这个简单的例子中，我们使用 `Element.classList` 获取了 `<p>` 元素的 class 列表，也就是一个`DOMTokenList` ，再使用 `DOMTokenList.add()` 添加了一个 class，然后更新 `<p>` 元素的`Node.textContent`以显示这个新的 `DOMTokenList`。

### HTML


```html
<p class="a b c"></p>
```

### JavaScript


```js
let para = document.querySelector("p");
let classes = para.classList;
para.classList.add("d");
para.textContent = `paragraph classList is "${classes}"`;
```


输出类似这样：

去除空格和重复项目
---------

修改 `DOMTokenList` 的方法（例如 `DOMTokenList.add()`）会自动去除多余的空格（Whitespace）和列表中的重复项目。例如：


```html
<span class=" d d e f"></span>
```



```js
let span = document.querySelector("span");
let classes = span.classList;
span.classList.add("x");
span.textContent = `span classList is "${classes}"`;
```


输出类似这样：

规范
--

| Specification |
| --- |
| DOM Standard # interface-domtokenlist |

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

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

参见
--

* `DOMSettableTokenList` (object that extends DOMTokenList with settable *.value* property)
* Firefox bug 501257 - Implement HTML 5's HTMLElement.classList property
SpeechSynthesis
===============

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

网页语音 API 的\*\*`SpeechSynthesis`\*\* 接口是语音服务的控制接口；它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音，或除此之外的其他命令。

属性
--

*`SpeechSynthesis` 也从它的父接口继承属性，`EventTarget`.*

`SpeechSynthesis.paused` 只读 

当`SpeechSynthesis` 处于暂停状态时， `Boolean` (en-US) 值返回 `true` 。

`SpeechSynthesis.pending` (en-US) 只读 

当语音播放队列到目前为止保持没有说完的语音时， `Boolean` (en-US) 值返回 `true` 。

`SpeechSynthesis.speaking` (en-US) 只读 

当语音谈话正在进行的时候，即使`SpeechSynthesis`处于暂停状态， `Boolean` (en-US) 返回 `true` 。

### 事件操作

`SpeechSynthesis.onvoiceschanged` (en-US)

当由`SpeechSynthesis.getVoices()`方法返回的`SpeechSynthesisVoice` (en-US)列表改变时触发。

方法
--

*`SpeechSynthesis` 也从它的父接口继承方法， `EventTarget`.*

`SpeechSynthesis.cancel()` (en-US)

移除所有语音谈话队列中的谈话。

`SpeechSynthesis.getVoices()`

返回当前设备所有可用声音的 `SpeechSynthesisVoice` (en-US)列表。

`SpeechSynthesis.pause()` (en-US)

把 `SpeechSynthesis` 对象置为暂停状态。

`SpeechSynthesis.resume()` (en-US)

把 `SpeechSynthesis` 对象置为一个非暂停状态：如果已经暂停了则继续。

`SpeechSynthesis.speak()` (en-US)

添加一个 `utterance` (en-US) 到语音谈话队列；它将会在其他语音谈话播放完之后播放。

示例
--

在我们基础的 Speech synthesiser 演示中，我们第一次用 `window.speechSynthesis`抓取了关于语音播放控制器的参考。在定义了一些必要的变量后，我们用 `SpeechSynthesis.getVoices()`获取了一列可用的声音并且用它们生成一列可选表单，这样用户能够选择他们想要的声音。

`inputForm.onsubmit` 的内部操作中，我们用preventDefault()阻止了表单的提交，创建了一个从`<input>`文本框获取文本的新`SpeechSynthesisUtterance` (en-US)实例，在`<select>`元素可选的声音设置成语音谈话的 voice 属性，然后通过`SpeechSynthesis.speak()` (en-US)方法开始语音播放。


```js
var synth = window.speechSynthesis;

var inputForm = document.querySelector("form");
var inputTxt = document.querySelector(".txt");
var voiceSelect = document.querySelector("select");

var pitch = document.querySelector("#pitch");
var pitchValue = document.querySelector(".pitch-value");
var rate = document.querySelector("#rate");
var rateValue = document.querySelector(".rate-value");

var voices = [];

function populateVoiceList() {
  voices = synth.getVoices();

  for (i = 0; i < voices.length; i++) {
    var option = document.createElement("option");
    option.textContent = voices[i].name + " (" + voices[i].lang + ")";

    if (voices[i].default) {
      option.textContent += " -- DEFAULT";
    }

    option.setAttribute("data-lang", voices[i].lang);
    option.setAttribute("data-name", voices[i].name);
    voiceSelect.appendChild(option);
  }
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}

inputForm.onsubmit = function (event) {
  event.preventDefault();

  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  var selectedOption = voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  utterThis.pitch = pitch.value;
  utterThis.rate = rate.value;
  synth.speak(utterThis);

  inputTxt.blur();
};
```

规范
--

| Specification |
| --- |
| Web Speech API # tts-section |

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

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

参见
--

* Web Speech API