recursal/MDN huggingface dataset:
AbortSignal.throwIfAborted()
============================

如果 signal 已经被中止，则 **`throwIfAborted()`** 方法抛出中止的 `reason`；否则它什么也不做。

需要支持中止的 API 可以接收一个 `AbortSignal` 对象并且使用 `throwIfAborted()` 来测试并且当 `abort` 事件发出信号时抛出。

该方法也可以用来中止代码中特定的操作，而不是传递给接收信号的函数。

语法
--


```js
throwIfAborted()
```

### 参数

无。

### 返回值

无（`undefined`）。

示例
--

以下示例来自规范。

### 中止一个轮询操作

该示例展示了你如何使用 `throwIfAborted()` 去中止一个轮询的操作。

考虑一个异步函数 `waitForCondition()`，在调用时传入另一个异步函数 `func`、目标值 `targetValue` 和 `AbortSignal`。该函数在循环中将 `func` 的结果和 `targetValue` 进行比较，当它们匹配时返回。


```js
async function waitForCondition(func, targetValue, { signal } = {}) {
  while (true) {
    signal?.throwIfAborted();

    const result = await func();
    if (result === targetValue) {
      return;
    }
  }
}
```


在每个循环的迭代中，如果操作已经被中止（否则什么也不做）我们使用 `throwIfAborted()` 来抛出 signal 中止的 `reason`。如果信号被中止，它将导致 `waitForCondition()` promise 被拒绝。

### 实现可中止的 API

需要支持中止的 API 可以接收一个 `AbortSignal` 对象，并在其需要时使用其状态去触发中止 signal 的操作。

一个基于 `Promise` 的 API 应该通过使用 `AbortSignal` abort `reason` 拒绝任何未敲定的 promise 来响应中止信号。例如，考虑以下 `myCoolPromiseAPI`，它接收一个信号并且返回一个 promise。如果 signal 已经中止或者检测到中止事件，则 promise 将被立刻拒绝。否则它将正常返回并且兑现。


```js
function myCoolPromiseAPI(/\* … ,\*/ { signal }) {
  return new Promise((resolve, reject) => {
    // If the signal is already aborted, immediately throw in order to reject the promise.
    if (signal.aborted) {
      reject(signal.reason);
    }

    // Perform the main purpose of the API
    // Call resolve(result) when done.

    // Watch for 'abort' signals
    signal.addEventListener("abort", () => {
      // Stop the main operation
      // Reject the promise wth the abort reason.
      reject(signal.reason);
    });
  });
}
```


然后使用 API，如下所示。请注意，调用 `AbortController.abort()` 以中止操作。


```js
const controller = new AbortController();
const signal = controller.signal;

startSpinner();

myCoolPromiseAPI({ /\* … ,\*/ signal })
  .then((result) => {})
  .catch((err) => {
    if (err.name === "AbortError") return;
    showUserErrorMessage();
  })
  .then(() => stopSpinner());

controller.abort();
```


不返回 promise 的 API 可能会以类似的方式做出反应。在某些情况下，保留信号可能是有意义的。

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortsignal-throwifaborted① |

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

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

参见
--

* Fetch API
RTCTrackEvent()
===============

**`RTCTrackEvent()`** 构造函数创建并返回一个新的 `RTCTrackEvent` (en-US) 对象，用于描述已经被添加到 `RTCPeerConnection` 的轨道。

通常，你不需要使用这个构造函数，例如 `RTCTrackEvent` 这样的对象会由 WebRTC 创建，并根据需要传递到 `RTCPeerConnector` 的 `ontrack` 事件处理器上。

语法
--
```

new RTCTrackEvent(type, options)
```

### 参数

`type`

一个表示事件名称的字符串。大小写敏感，且浏览器始终将其设置为 `track`。

`options`

一个对象，*除了 `Event()` 中定义的对象*，还可以使用以下属性：

`receiver`

一个 `RTCRtpReceiver` (en-US)，用于接收轨道的媒体。

`streams` 可选

 一个 `MediaStream` 对象的数组，表示构成事件对应的轨道的流。它默认为一个空数组。
 It defaults to an empty array.


`track`

一个与事件关联的 `MediaStreamTrack`。

`transceiver`

一个与事件关联的 `RTCRtpTransceiver` (en-US)。


### 返回值

一个新的 `RTCTrackEvent` (en-US)，用于描述已经被添加到 `RTCPeerConnection` 的轨道。

规范
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtctrackevent-constructor |

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

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

概要
--

**`PerformanceTiming.responseStart`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为浏览器从服务器、缓存或者本地资源接收到响应的第一个字节之时的 Unix 毫秒时间戳。

语法
--
```

time = performanceTiming.responseStart;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `PerformanceTiming` 接口。
PerformanceTiming.domainLookupStart
===================================

概要
--

**`PerformanceTiming.domainLookupStart`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为域名开始解析之时的 Unix 毫秒时间戳。如果一个持久连接被使用，或者该信息已经被本地资源或者缓存存储，则该值等同于 `PerformanceTiming.fetchStart`。

语法
--
```

time = performanceTiming.domainLookupStart;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `PerformanceTiming` 接口。
PerformanceTiming.loadEventStart
================================

概要
--

**`PerformanceTiming.loadEventStart`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为 `load` 事件被现在的文档触发之时的 Unix 时间戳。如果这个事件没有被触发，则他返回 `0`。

语法
--
```

time = performanceTiming.loadEventStart;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `PerformanceTiming` 接口。
PerformanceTiming.loadEventEnd
==============================

概要
--

**`PerformanceTiming.loadEventEnd`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为 `load` 事件处理程序被终止，加载事件已经完成之时的 Unix 毫秒时间戳。如果这个事件没有被触发，或者没能完成，则该值将会返回 `0`。

语法
--
```

time = performanceTiming.loadEventEnd;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `PerformanceTiming` 接口。
PerformanceTiming.domLoading
============================

概要
--

**`PerformanceTiming.domLoading`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为解析器开始工作，即 `Document.readyState` 改变为 `'loading'` 并且 `readystatechange` 事件被触发之时的 Unix 毫秒时间戳。

语法
--
```

time = performanceTiming.domLoading;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `PerformanceTiming` 接口。
PerformanceTiming.navigationStart
=================================

概要
--

**`PerformanceTiming.navigationStart`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为紧接着在相同的浏览环境下卸载前一个文档结束之时的 Unix 毫秒时间戳。如果没有上一个文档，则它的值相当于 `PerformanceTiming.fetchStart`。

语法
--
```

time = performanceTiming.navigationStart;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `PerformanceTiming` 接口。
PerformanceTiming.domContentLoadedEventEnd
==========================================

**`PerformanceTiming.domContentLoadedEventEnd`** 为只读属性，返回一个无符号长整型数值（`unsigned long），以 UNIX 时间戳的形式表示一个时刻，这个时刻为所有需要尽早执行的脚本不管是否按顺序，都已经执行完毕。（译注：即 DOM Ready）`

Syntax
------
```

time = performanceTiming.domContentLoadedEventEnd;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

See also
--------

* 所属的 `PerformanceTiming` 接口
PerformanceTiming.connectStart
==============================

概要
--

**`PerformanceTiming.connectStart`** 是一个返回代表一个时刻的 `unsigned long long 型只读属性，`请求连接被发送到网络之时的 Unix 毫秒时间戳。如果传输层报告错误并且连接的建立重新开始，则把最后建立连接的开始时间作为该值。如果一个持久连接被使用，则该值与 `PerformanceTiming.fetchStart` 相同。

语法
--
```

time = performanceTiming.connectStart;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `PerformanceTiming` 接口。
PerformanceTiming.requestStart
==============================

概要
--

**`PerformanceTiming.requestStart`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为浏览器发送从服务器或者缓存获取实际文档的请求之时的 Unix 毫秒时间戳。如果传输层在请求开始之后发生错误并且连接被重新打开，则该属性将会被设定为新的请求的相应的值。

语法
--
```

time = performanceTiming.requestStart;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `PerformanceTiming` 接口。
PerformanceTiming.domainLookupEnd
=================================

概要
--

**`PerformanceTiming.domainLookupEnd`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为解析域名结束时的 Unix 毫秒时间戳。如果一个持久连接被使用，或者该信息已经被本地资源或者缓存存储，则该值等同于 `PerformanceTiming.fetchStart`。

语法
--
```

time = performanceTiming.domainLookupEnd;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参加
--

* 它属于 `PerformanceTiming` 接口。
PerformanceTiming.redirectStart
===============================

概要
--

**`PerformanceTiming.redirectStart`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为第一个 HTTP 的重定向开始的时刻的 Unix 毫秒时间戳。如果重定向没有发生，或者其中一个重定向非同源，则该值返回 `0`。

语法
--
```

time = performanceTiming.redirectStart;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `PerformanceTiming` 接口。
PerformanceTiming.responseEnd
=============================

概要
--

**`PerformanceTiming.responseEnd`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为浏览器从服务器、缓存或者本地资源接收响应的最后一个字节或者连接被关闭之时的 Unix 毫秒时间戳。

语法
--
```

time = performanceTiming.responseEnd;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `PerformanceTiming` 接口。
PerformanceTiming.unloadEventEnd
================================

概要
--

**`PerformanceTiming.unloadEventEnd`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为`unload` 事件处理程序结束之时的 Unix 毫秒时间戳。如果没有上一个的文档，或者上一个文档或需要被跳转的页面的其中之一不同源，则该值返回 `0`。

语法
--
```

time = performanceTiming.unloadEventEnd;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `PerformanceTiming` 接口。
PerformanceTiming.domContentLoadedEventStart
============================================

**`PerformanceTiming.domContentLoadedEventStart`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为解析器发出 `DOMContentLoaded` 事件之前，即所有的需要被运行的脚本已经被解析之时的 Unix 毫秒时间戳。

值
-

一个 `unsigned long long` 值。

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `PerformanceTiming` 接口。
PerformanceTiming.domComplete
=============================

概要
--

**`PerformanceTiming.domComplete`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为主文档的解析器结束工作，`Document.readyState` 变为 `'complete'且相当于` `readystatechange` 事件被触发时的 Unix 毫秒时间戳。

语法
--
```

time = performanceTiming.domComplete;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `PerformanceTiming` 接口。
PerformanceTiming.redirectEnd
=============================

概要
--

**`PerformanceTiming.redirectEnd`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为最后一次的 HTTP 重定向被完成且 HTTP 响应的最后一个字节被接收之时的 Unix 毫秒时间戳。如果没有发生重定向，或者其中一个重定向不同源，则该值返回 `0`。

语法
--
```

time = performanceTiming.redirectEnd;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `Performance` 接口。
PerformanceTiming.unloadEventStart
==================================

概要
--

**`PerformanceTiming.unloadEventStart`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为 `unload` 事件被触发之时的 Unix 毫秒时间戳。如果没有上一个文档，或者上一个文档或需要重定向的页面之一不同源，则该值返回 `0`。

语法
--


```js
time = performanceTiming.unloadEventStart;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `PerformanceTiming` 接口。
PerformanceTiming.fetchStart
============================

概要
--

**`PerformanceTiming.fetchStart`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为浏览器已经准备好去使用 HTTP 请求抓取文档之时的 Unix 毫秒时间戳。这一时刻在检查应用的缓存之前。

语法
--
```

time = performanceTiming.fetchStart;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `PerformanceTiming` 接口。
PerformanceTiming.connectEnd
============================

**`PerformanceTiming.connectEnd`** 这个只读属性返回一个无符号长整型，它以毫秒为单位，代表了网络链接建立的时间节点。如果传输层报告了错误或者链接又被重新建立，则采用最后一次链接建立的时间。如果链接是长久的，那么这个值等同于`PerformanceTiming.fetchStart`。链接被认为打开以所有的链接握手，SOCKS 认证结束为标志。

Syntax
------
```

time = performanceTiming.connectEnd;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

See also
--------

* 参见 `PerformanceTiming` 接口。
PerformanceTiming.secureConnectionStart
=======================================

概要
--

**`PerformanceTiming.secureConnectionStart`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为安全连接握手开始的时刻的 Unix 毫秒时间戳。如果只要你过的连接没有被请求，则它返回 0。

语法
--
```

time = performanceTiming.secureConnectionStart;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `PerformanceTiming` 接口。
PerformanceTiming.domInteractive
================================

概要
--

**`PerformanceTiming.domInteractive`** 是一个返回代表一个时刻的 `unsigned long long` 型只读属性，为在主文档的解析器结束工作，即 `Document.readyState` 改变为 `'interactive'` 并且相当于 `readystatechange` 事件被触发之时的 Unix 毫秒时间戳。

这个属性被用于测量用户感受的加载网页的速度。然而，如果脚本被屏蔽发生，而不是被异步加载或者使用了自定义的 Web 字体，这里有一些警告可能会发生。在使用这个值作为网页加载用户体验的媒介时，请务必检查一下你是否处于以上的情况。

语法
--
```

time = performanceTiming.domInteractive;
```

规范
--

因为 Navigation Timing 规范已被弃用，此特性不再有望成为标准。请使用 `PerformanceNavigationTiming` 接口代替。

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

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

参见
--

* 它属于 `PerformanceTiming` 接口。
* 文章 "domInteractive: is it? really?" 解释了什么时候你可以使用这个属性作为加载网页的用户体验的代理。
FontFaceSet.check()
===================

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

`FontFaceSet` 的`check()`方法会返回是否在给定的字体列表中的所有字体已经被加载并可用。

句法
--
```

bool = aFontFaceSet .check(font);
bool = aFontFaceSet .check(font，text);
```

### 返回

如果字体列表可用，则`Boolean`为 true

### 参数

* `font`：使用CSS 值语法的字体规范，例如“italic bold 16px Roboto”
* `text`：将字体面限制为 Unicode 范围至少包含文本中的一个字符。这不检查单个字形覆盖。
例子
--


```js
document.fonts.check("12px courier"); //如果字体快递可用在 12px，则返回 true

document.fonts.check("12px MyFont"，"ß"); 如果字体“MyFont”具有ß字符，则返回 true。
```

规范
--

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfaceset-check |

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

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

`MutationObserver` 的 **`disconnect()`** 方法告诉观察者停止观察变动。可以通过调用其 `observe()` 方法来重用观察者。

语法
--
```

mutationObserver.disconnect()
```

### 参数

无。

### 返回值

`undefined`。

**备注：** 所有已经检测到但是尚未向观察者报告的变动都会被丢弃。

使用说明
----

如果被观察的元素被从 DOM 中移除，然后被浏览器的垃圾回收机制释放，此 `MutationObserver` 将同样被删除。

示例
--

下面的示例创建了一个观察者，接着与之断开连接，让它可以重复使用。


```js
var targetNode = document.querySelector("#someElement");
var observerOptions = {
  childList: true,
  attributes: true,
};

var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

/\* some time later... \*/

observer.disconnect();
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-mutationobserver-disconnect① |

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

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

`MutationObserver` 的 **`takeRecords()`** 方法返回已检测到但尚未由观察者的回调函数处理的所有匹配 DOM 更改的列表，使变更队列保持为空。此方法最常见的使用场景是在断开观察者之前立即获取所有未处理的更改记录，以便在停止观察者时可以处理任何未处理的更改。

语法
--
```

mutationRecords = mutationObserver.takeRecords()
```

### 参数

无。

### 返回值

返回一个`MutationRecord` 对象列表，每个对象都描述了应用于 DOM 树某部分的一次改动。

**备注：** 调用 `takeRecords()` 后，已发生但未传递给回调的变更队列将保留为空。

示例
--

下面的示例展示了在断开观察者之前如何通过调用 `takeRecords()` 来处理任何未传递的 `MutationRecord`。


```js
var targetNode = document.querySelector("#someElement");
var observerOptions = {
  childList: true,
  attributes: true,
};

var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

/\* ...later, when it's time to stop observing... \*/

/\* handle any still-pending mutations \*/

var mutations = observer.takeRecords();

if (mutations) {
  callback(mutations);
}

observer.disconnect();
```


代码中第 12-17 行抓取了所有未处理的变更记录，然后调用回调，并将变更记录列表传递给回调，以保证所有变更记录都被处理。这是在调用 `disconnect()` 之前完成的，以便停止观察 DOM。

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-mutationobserver-takerecords① |

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

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

DOM 规范中的 `MutationObserver()` 构造函数——是 `MutationObserver` 接口内容的一部分——创建并返回一个新的观察器，它会在触发指定 DOM 事件时，调用指定的回调函数。MutationObserver 对 DOM 的观察不会立即启动；而必须先调用 `observe()` 方法来确定，要监听哪一部分的 DOM 以及要响应哪些更改。

语法
--
```

var observer = new MutationObserver(callback);
```

### 参数

`callback`

一个回调函数，每当被指定的节点或子树以及配置项有 DOM 变动时会被调用。回调函数拥有两个参数：一个是描述所有被触发改动的 `MutationRecord` 对象数组，另一个是调用该函数的 `MutationObserver` 对象。参见下方的示例了解更多细节

### 返回值

一个新的、包含监听 DOM 变化回调函数的 `MutationObserver` 对象。

示例
--

这个例子简单地创建了一个新的 `MutationObserver`，监视一个节点及其全部子节点树的添加、移除元素，以及任何属性变化的事件。

### 回调函数


```js
function callback(mutationList, observer) {
  mutationList.forEach((mutation) => {
    switch (mutation.type) {
      case "childList":
        /\* 从树上添加或移除一个或更多的子节点；参见 mutation.addedNodes 与
 mutation.removedNodes \*/
        break;
      case "attributes":
        /\* mutation.target 中某节点的一个属性值被更改；该属性名称在 mutation.attributeName 中，
 该属性之前的值为 mutation.oldValue \*/
        break;
    }
  });
}
```


调用 `observe()` 即可开始观察 DOM。当观察者 observer 发现匹配观察请求中指定的配置项的更改时，`callback()` 方法便会被调用。

使用 `mutation.type` (en-US) 获取发生的变动类别（无论是子节点的变动，还是节点属性的变动）。

### 创建并使用 observer

使用以下代码设置一个观察进程。


```js
var targetNode = document.querySelector("#someElement");
var observerOptions = {
  childList: true, // 观察目标子节点的变化，是否有添加或者删除
  attributes: true, // 观察属性变动
  subtree: true, // 观察后代节点，默认为 false
};

var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);
```


使用 ID `someElement` 来获取目标节点树。`observerOptions` 中设定了观察者的选项，通过设定 `childList` 和 `attributes` 为 `true` 来获取所需信息。

当 observer 实例化时，指定 `callback()` 函数。之后指定目标节点与记录选项，我们开始观察使用 `observe()` 指定的 DOM 节点。

从现在开始直到调用 `disconnect()` ，每次以 `targetNode` 为根节点的 DOM 树添加或移除元素时，以及这些元素的任意属性改变时，*`callback()` 都会被调用。*

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-mutationobserver-mutationobserver① |

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

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

`MutationObserver` 的 **`observe()`** 方法配置了 `MutationObserver` 对象的回调方法以开始接收与给定选项匹配的 DOM 变化的通知。根据配置，观察者会观察 DOM 树中的单个 `Node`，也可能会观察被指定节点的部分或者所有的子孙节点。

要停止 `MutationObserver`（以便不再触发它的回调方法），需要调用 `MutationObserver.disconnect()` 方法。

语法
--
```

mutationObserver.observe(target[, options])
```

### 参数

`target`

DOM 树中的一个要观察变化的 DOM `Node` (可能是一个 `Element`)，或者是被观察的子节点树的根节点。

`options`

此对象的配置项描述了 DOM 的哪些变化应该报告给 `MutationObserver` 的 `callback`。当调用 `observe()` 时，`childList`、`attributes` 和 `characterData` 中，必须有一个参数为 `true`。否则会抛出 `TypeError` 异常。

`options` 的属性如下：

`subtree` 可选

当为 `true` 时，将会监听以 `target` 为根节点的整个子树。包括子树中所有节点的属性，而不仅仅是针对 `target`。默认值为 `false`。

`childList` 可选

当为 `true` 时，监听 `target` 节点中发生的节点的新增与删除（同时，如果 `subtree` 为 `true`，会针对整个子树生效）。默认值为 `false`。

`attributes` 可选

当为 `true` 时观察所有监听的节点属性值的变化。默认值为 `true`，当声明了 `attributeFilter` 或 `attributeOldValue`，默认值则为 `false`。

`attributeFilter` 可选

一个用于声明哪些属性名会被监听的数组。如果不声明该属性，所有属性的变化都将触发通知。

`attributeOldValue` 可选

当为 `true` 时，记录上一次被监听的节点的属性变化；可查阅监听属性值了解关于观察属性变化和属性值记录的详情。默认值为 `false`。

`characterData` 可选

当为 `true` 时，监听声明的 `target` 节点上所有字符的变化。默认值为 `true`，如果声明了 `characterDataOldValue`，默认值则为 `false`

`characterDataOldValue` 可选

当为 `true` 时，记录前一个被监听的节点中发生的文本变化。默认值为 `false`


### 返回值

`undefined`。

### 异常

`TypeError`

以下任一情况都会抛出异常：

* 配置选项使得实际上不会监视任何内容（例如，如果 `MutationObserverInit.childList`，`MutationObserverInit.attributes` (en-US) 和 `MutationObserverInit.characterData` (en-US) 都为 `false`）。
* `attributes` 选项为 `false`（表示不监视属性更改）但是`attributeOldValue` 为 `true` 并且/或者 `attributeFilter` 配置存在。
* `characterDataOldValue` 选项为 `true` 但是 `MutationObserverInit.characterData` (en-US) 为 `false`（表示不跟踪字符更改）。

使用说明
----

### 复用 MutationObserver

你可以多次调用同一个 `MutationObserver` 对象的 `observe()` 方法，来观察 DOM 树中不同部分的变化，和/或不同类型的变化。有一些需要注意的注意事项：

* 如果在已经被同一 `MutationObserver` 观察的节点上调用 `observe()` 方法，则在激活新观察者之前，所有现有观察者将自动从所有正在观察的目标中移除。
* 如果同一个 `MutationObserver` 还没有作用在 target 上，则保留现有观察者并添加新观察者。
### 当节点断开连接时继续观察节点

`MutationObserver` 旨在让你能够随着时间的推移观察所需的节点集，即使这些节点之间的直接连接被切断。如果你开始观察节点的子树，并且该子树的一部分被分离并移动到 DOM 中的其他位置，你将继续观察分离的节点段，接收与节点从原始子树分离之前相同的回调。

换句话说，在你收到有关节点从被观察子树中拆分的通知之前，你将收到有关该拆分子树及其节点的更改的通知。这可以防止你丢失在切断连接之后以及在你有机会专门开始观察已移动的节点或子树之前发生的变化。

这意味着理论上如果你跟踪描述发生的变化的 `MutationRecord` 对象，你就可以“撤销”这些改动，将 DOM 恢复到初始状态。

示例
--

在此例子中，将为你演示如何在实例 `MutationObserver` 中调用 **`observe()`** 方法，一旦设置后，会传给他一个目标元素和一个 `MutationObserverInit` 配置对象。


```js
// 得到要观察的元素
var elementToObserve = document.querySelector("#targetElementId");

// 创建一个叫 `observer` 的新 `MutationObserver` 实例，
// 并将回调函数传给它
var observer = new MutationObserver(function () {
  console.log("callback that runs when observer is triggered");
});

// 在 MutationObserver 实例上调用 `observe` 方法，
// 并将要观察的元素与选项传给此方法
observer.observe(elementToObserve, { subtree: true, childList: true });
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-mutationobserver-observe② |

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

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

`IDBCursor` 的方向属性是一个 `DOMString` ，表示游标遍历的方向， (比如可以通过 `IDBObjectStore.openCursor` 设置). 查看下文中取值章节获取可取值。

语法
--


```js
cursor.direction;
```

### 取值

用一个字符串 (defined by the `IDBCursorDirection` enum) 表示游标的遍历方向。相关取值如下表所示：

| Value | Description |
| --- | --- |
| `next` | 从数据源开始位置遍历 |
| `nextunique` | 从数据源开始遍历；当取值有重复时，只获取一次。 |
| `prev` | 从数据源的最后位置位置开取值 |
| `prevunique` | 从数据源的最后位置开始取值，只获取一次。 |

例子
--

在这个简单的例子中，我们首先创建一个事物对象，返回一个对象仓库 (store), 然后使用邮编遍历整个数据仓库。在每次迭代中我们记录了游标的方向，例如 prev（倒序遍历）


```html
prev
```


**备注：** 我们不能改变游标的取值，因为这是个只读属性；应该在`IDBObjectStore.openCursor`方法调用的第二个参数指定游标遍历的方向；

使用游标遍历数据时，可以不需要我们指定在特定字段选择数据；我们可以直接获取所有数据，同时在每次循环迭代过程当中，我们可以通过 cursor.value.foo 获取数据，如下是一个完整的游标遍历数据的例子； IDBCursor example (view example live).


```js
function backwards() {
  list.innerHTML = "";
  var transaction = db.transaction(["rushAlbumList"], "readonly");
  var objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor(null, "prev").onsuccess = function (event) {
    var cursor = event.target.result;
    if (cursor) {
      var listItem = document.createElement("li");
      listItem.innerHTML =
        "<strong>" +
        cursor.value.albumTitle +
        "</strong>, " +
        cursor.value.year;
      list.appendChild(listItem);

      console.log(cursor.direction);
      cursor.continue();
    } else {
      console.log("Entries displayed backwards.");
    }
  };
}
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursor-direction① |

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

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

参考资料
----

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (view example live.)