recursal/MDN huggingface dataset:
DOMError
========

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

**`DOMError`** 接口描述一个错误对象，该对象包含一个错误的名字。

属性
--

`DOMError.name` 只读 

返回一个代表一个错误类型名称的 `DOMString` (见下文).

`DOMError.message` 只读 

返回一个代表与给定错误类型名称有关的信息或描述`DOMString`

Error 类型
--------

| Type | Description |
| --- | --- |
| `IndexSizeError` | The index is not in the allowed range (e.g. thrown in a `range` object). 索引不在允许的范围内 |
| `HierarchyRequestError` | The node tree hierarchy is not correct. 节点树层次结构是不正确的。 |
| `WrongDocumentError` | The object is in the wrong `document`. 对象是错误的 |
| `InvalidCharacterError` | The string contains invalid characters. 字符串包含无效字符。 |
| `NoModificationAllowedError` | The object can not be modified. 对象不能被修改。 |
| `NotFoundError` | The object can not be found here. 对象不能在这里被找到。 |
| `NotSupportedError` | The operation is not supported 不支持的操作 |
| `InvalidStateError` | The object is in an invalid state. 对象是一个无效的状态。 |
| `SyntaxError` | The string did not match the expected pattern. 字符串不匹配预期的模式 |
| `InvalidModificationError` | The object can not be modified in this way. 对象不能以这种方式被修改 |
| `NamespaceError` | The operation is not allowed by Namespaces in XML 操作在 XML 命名空间内是不被允许的 |
| `InvalidAccessError` | The object does not support the operation or argument. 对象不支持这种操作或参数。 |
| `TypeMismatchError` | The type of the object does not match the expected type. 对象的类型不匹配预期的类型。 |
| `SecurityError` | The operation is insecure. 此操作是不安全的。 |
| `NetworkError` | A network error occurred. 发生网络错误 |
| `AbortError` | The operation was aborted. 操作被中止 |
| `URLMismatchError` | The given URL does not match another URL. 给定的 URL 不匹配另一个 URL。 |
| `QuotaExceededError` | The quota has been exceeded. 已经超过给定配额。 |
| `TimeoutError` | The operation timed out. 操作超时。 |
| `InvalidNodeTypeError` | The node is incorrect or has an incorrect ancestor for this operation. 这个操作的 节点或节点祖先 是不正确的 |
| `DataCloneError` | The object can not be cloned. 对象不能克隆。 |

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

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

参见
--

* `DOMException`
Resize Observer API
===================

Resize Observer API 提供了一种高性能的机制，通过该机制，代码可以监视元素的大小更改，并且每次大小更改时都会向观察者传递通知。

概念和使用
-----

存在大量的响应式设计（以及其他相关）技术，它们可以响应元素大小的变化，但是以前，它们的实现常常很笨拙或者说生硬。

举个例子，当视口更改大小时，媒体查询 / `window.matchMedia` 非常适合在特定点更新布局，但是如果要响应于特定元素的大小更改而更改布局，该元素又不是外部容器时，该怎么办？

为此，一种有限的解决方案是监听对适当事件的更改，该事件会提示你对更改大小感兴趣的元素（例如 window resize 事件），然后找出该元素之后新的尺寸或其他功能，例如，使用`Element.getBoundingClientRect` 或者`Window.getComputedStyle`，来调整大小。

这样的解决方案仅适用于有限的场景，对性能不利（不断调用上述方法会导致性能严重下降），并且在不更改浏览器窗口大小的情况下通常不起作用。

Resize Observer API 提供了一种解决此类问题的解决方案，此外，它还使你能够轻松观察和响应元素内容或边框的大小变化，并以高效的方式做出响应。它为 Web 平台中经常讨论的，缺乏元素查询提供了 JavaScript 解决方案。

用法很简单，并且与其他观察者（例如 Performance Observer 或者 Intersection Observer）几乎相同——你可以使用 `ResizeObserver()` 构造函数创建一个新的 `ResizeObserver`，然后使用 `ResizeObserver.observe()` 使其寻找特定元素大小的更改。每次更改大小时，构造函数中设置的回调函数便会运行，从而提供对新尺寸的访问，并允许你根据需要执行任何操作。

接口
--

`ResizeObserver`

提供注册新观察者以及启动和停止观察元素的能力。

`ResizeObserverEntry`

描述已调整大小的单个元素，标识该元素及其新大小。

示例
--

你可以在我们的 GitHub 存储库中找到几个简单的示例：

* resize-observer-border-radius.html（源码）：一个带有绿色框的简单示例，其大小为视口大小的百分比。更改视口大小时，框的圆角将根据框的大小成比例地变化。我们可以通过 `border-radius` 的百分比来实现，但这很快就会导致丑陋的椭圆形角，而上述解决方案为你提供了随盒子大小缩放的漂亮的圆角。
* resize-observer-text.html (源码): 这里我们使用 resize observer 来改变 `font-size`，标题和段落的值随着滑块值的改变而改变，导致包含的<div>改变宽度。这表明你可以响应元素大小的变化，即使它们与视口无关。

代码通常将遵循这种模式（取自 resize-observer-border-radius.html）：


```js
const resizeObserver = new ResizeObserver((entries) => {
  const calcBorderRadius = (size1, size2) =>
    `${Math.min(100, size1 / 10 + size2 / 10)}px`;

  for (const entry of entries) {
    if (entry.borderBoxSize) {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.borderBoxSize[0].inlineSize,
        entry.borderBoxSize[0].blockSize,
      );
    } else {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.contentRect.width,
        entry.contentRect.height,
      );
    }
  }
});

resizeObserver.observe(document.querySelector("div"));
```

规范
--

| Specification |
| --- |
| Resize Observer # resize-observer-interface |

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

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

参见
--

* ResizeObserver: It’s Like document.onresize for Elements
WebGLSampler
============

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

WebGL 2 API 的 **`WebGLSampler`** 接口存储一系列采样参数，供 `WebGLTexture` 在着色器中访问。

当使用 `WebGLSampler` 对象时，有以下 `WebGL2RenderingContext` 相关方法：

* `WebGL2RenderingContext.createSampler()`
* `WebGL2RenderingContext.deleteSampler()` (en-US)
* `WebGL2RenderingContext.isSampler()` (en-US)
* `WebGL2RenderingContext.bindSampler()` (en-US)
* `WebGL2RenderingContext.getSamplerParameter()` (en-US)
示例
--

### 创建 `WebGLSampler` 对象

在本例中，`gl` 必须是一个 `WebGL2RenderingContext` 对象。因为 `WebGLSampler` 在 WebGL 1 中是不可用的。


```js
var sampler = gl.createSampler();
```

规范
--

| Specification |
| --- |
| WebGL 2.0 Specification # 3.3 |

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

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

该 **`CSSSupportsRule`** 接口描述了代表一个 CSS 对象`@supports` at-rule. 它实现了 `CSSConditionRule` 接口，因此 `CSSRule 指定规则` 和`CSSGroupingRule` 用一个类型值接口 `12` (`CSSRule.SUPPORTS_RULE`).

句法
--

该语法使用所描述的WebIDL 格式。
```

接口 CSSSupportsRule : CSSConditionRule {
}
```

性能
--

作为`CSSConditionRule` 因此一个 `CSSRule 指定规则` and 和一`CSSGroupingRule`, `CSSSupportsRule` 还实现了，这些接口的属性。它没有特定的属性

方法
--

作为`CSSConditionRule` 因此一个 `CSSRule 指定规则`和`CSSGroupingRule`, `CSSSupportsRule` 也实现了这个接口的方法。他没有具体属性的方法

规范
--

| Specification |
| --- |
| CSS Conditional Rules Module Level 3 # the-csssupportsrule-interface |

游览器兼容性
------

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

See also
--------

* `@supports`
Position
========

**`Position`** 接口表示在给定的时间的相关设备的位置。这个位置，用一个`Coordinates`对象表示，包括设备在地球上的二维位置，但也可以包括设备的海拔和速度。

属性
--

*`Position`接口没有继承任何属性。*

`Position.coords` 只读 

返回一个定义了当前位置的`Coordinates` 对象。

`Position.timestamp` (en-US) 只读 

返回一个时间戳`DOMTimeStamp`，这个时间戳表示获取到的位置的时间。

方法
--

**`Position` 接口没有实现也没有*继承任何方法。***

规范
--

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

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

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

参阅
--

* 使用地理位置定位
* 使用它的`Geolocation`接口。
PerformanceEntry
================

**`PerformanceEntry`** 对象代表了 performance 时间列表中的单个 metric 数据。每一个 *performance entry 都可以在应用运行过程中通过手动构建* *`mark` (en-US)* 或者 *`measure` (en-US)* (例如调用 `mark()` 方法) 生成。此外，Performance entries 在资源加载的时候，也会被动生成（例如图片、script、css 等资源加载）

Note: Performance 对象暴露给了 `Window` 和 `Worker`. 同时该对象扩展了几个其他对象的属性，包括 `PerformanceMark` (en-US), `PerformanceMeasure` (en-US), `PerformanceFrameTiming`, `PerformanceNavigationTiming` 以及 `PerformanceResourceTiming`.

Properties
----------

`PerformanceEntry.name` 只读 

`DOMString` 该 performance entry 的名字

`PerformanceEntry.entryType` 只读 

`DOMString` 代表所上报的 performance metric 的 entryType 类型，例如 "mark". 可以通过 `entryType` 查阅完整的 entryType type 类型。

`PerformanceEntry.startTime` (en-US) 只读 

`DOMHighResTimeStamp` 此为 metric 上报时的时间

`PerformanceEntry.duration` (en-US) 只读 

`DOMHighResTimeStamp` 该事件的耗时

Methods
-------

`PerformanceEntry.toJSON()` (en-US)

返回 `PerformanceEntry` 对象的 JSON 格式数据

Example
-------

以下例子检查了当前浏览器所支持的所有 `PerformanceEntry` 属性，每个属性的检查结果都会通过 console 打印出来


```js
function print\_PerformanceEntries() {
  // Use getEntries() to get a list of all performance entries
  var p = performance.getEntries();
  for (var i = 0; i < p.length; i++) {
    console.log("PerformanceEntry[" + i + "]");
    print\_PerformanceEntry(p[i]);
  }
}
function print\_PerformanceEntry(perfEntry) {
  var properties = ["name", "entryType", "startTime", "duration"];

  for (var i = 0; i < properties.length; i++) {
    // check each property
    var supported = properties[i] in perfEntry;
    if (supported) {
      var value = perfEntry[properties[i]];
      console.log("... " + properties[i] + " = " + value);
    } else {
      console.log("... " + properties[i] + " = NOT supported");
    }
  }
}
```

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

| Specification |
| --- |
| Performance Timeline # dom-performanceentry |

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

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

作为 service worker 生命周期的一部分，**`ExtendableEvent`** 接口延长了在全局范围上 `install` (en-US) 和 `activate` (en-US) 事件的生命周期。这样可以确保在升级数据库架构并删除过时的 caches 之前，不会调度任何函数事件（如`FetchEvent`）。如果在`ExtendableEvent`处理程序之外调用`waitUntil()`，浏览器应该抛出一个`InvalidStateError`；还要注意，多个调用将堆积起来，结果 promises 将添加到extend lifetime promises.

**备注：** 上述段落中描述的行为在 firefox 43 中得到了修复（参见 Firefox bug 1180274）。

此接口继承自`Event`接口。

**备注：** 只有当全局范围是 `ServiceWorkerGlobalScope` 时，此接口才可用。当它是一个 `Window` 或其他类型 worker 的作用域时，它不可用。

构造函数
----

`ExtendableEvent()` (en-US)

创建新的`ExtendableEvent`对象。

特性
--

不实现任何特定属性，但从其父级事件继承属，*`Event`*。

方法
--

*从他的父辈继承，`Event`。*

`ExtendableEvent.waitUntil()`

延长事件的生存期。它将在 service worker 的 `install` (en-US) 和 `activate` (en-US) 事件中被调用。

实例
--

代码片段来自service worker prefetch sample (查看 prefetch example live.)。代码在`ServiceWorkerGlobalScope.oninstall`中调用`ExtendableEvent.waitUntil()`，延迟将`ServiceWorkerRegistration.installing` (en-US) Worker 视为已安装，直到传递的 promise resolve(在所有资源都已被提取和缓存的情况，或者发生任何异常时的问题.)

代码段还显示了对 service worker 使用的缓存进行版本控制的最佳实践。虽然在这个例子中只有一个缓存，但是相同的方法可以用于多个缓存。它将缓存的速记标识符映射到特定的、版本化的缓存名称。

**备注：** 在 chrome 中，日志记录语句通过 chrome://service worker internals 访问的相关服务工作者的“inspect”接口可见。


```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);
      }),
  );
});
```


**备注：** 在获取资源时，如果有可能资源是由不支持 CORS 的服务器提供的，那么使用 `{mode: 'no-cors'}` 非常重要。在本例中， www.chromium.org 不支持 CORS。

规范
--

| Specification |
| --- |
| Service Workers # extendableevent-interface |

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

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

参见
--

* 使用 Service Worker
* Service worker 基本代码示例
* 使用 web worker
CSSConditionRule
================

**CSSConditionRule** 对象表示单个条件 CSS 规则，由条件和语句块组成。继承至 `CSSGroupingRule`.

从它派生的两个对象 : `CSSMediaRule` and `CSSSupportsRule`.

Syntax
------

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

interface CSSConditionRule : CSSGroupingRule {
    attribute DOMString conditionText;
}
```

Properties
----------

The `CSSConditionRule` derives from `CSSRule`, `CSSGroupingRule` and inherits all properties of these classes. It has one specific property:

`CSSConditionRule.conditionText` (en-US)

Represents the text of the condition of the rule.

Methods
-------

The `CSSConditionRule` derives from `CSSRule`, `CSSGroupingRule` and inherits all methods of these classes. It has no specific property of its own.

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

| Specification |
| --- |
| CSS Conditional Rules Module Level 3 # the-cssconditionrule-interface |

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

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

See also
--------

* Using dynamic styling information
FileSystemHandle
================

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

`File System Access API` 的 **`FileSystemHandle`** 接口是代表一个文件或一个目录的对象。多个句柄可以代表同一个条目。在大多数情况下，你不会直接使用 `FileSystemHandle`，而是会用到它的 `FileSystemFileHandle` 和 `FileSystemDirectoryHandle` 子接口。

基于 FileSystemHandle 的接口
-----------------------

以下是基于 FileSystemHandle 的接口的列表。

`FileSystemFileHandle`

提供一个指向文件条目的句柄。

`FileSystemDirectoryHandle`

提供一个指向目录条目的句柄。

实例属性
----

`kind` 只读 

返回条目的类型。如果关联的条目是一个文件，则此值为 `'file'`，否则为 `'directory'`。

`name` 只读 

返回关联的条目的名称。

实例方法
----

`isSameEntry()`

比对两个句柄以查看两者关联的条目（文件或目录）是否相符。

`queryPermission()` 
实验性

查询当前句柄目前的权限状态。

`remove()` 
实验性

非标准

向底层文件系统请求移除句柄所代表的的条目。

`requestPermission()` 
实验性

为文件句柄请求读取或读写权限。

示例
--

### 检查类型

下面的代码允许用户在文件选择器选择一个文件，然后测试返回的句柄是一个文件还是一个目录。


```js
// 存放对文件句柄的引用
let fileHandle;

async function getFile() {
  // 打开文件选择器
  [fileHandle] = await window.showOpenFilePicker();

  if (fileHandle.kind === "file") {
    // 运行针对文件的代码
  } else if (fileHandle.kind === "directory") {
    // 运行针对目录的代码
  }
}
```

### 查询与请求权限

以下异步函数会在用户对文件句柄授予了只读或读写权限时返回 `true`，若无权限则请求权限。


```js
// fileHandle 是一个 FileSystemFileHandle
// withWrite 是一个布尔值，如果要求写入则需传入 true

async function verifyPermission(fileHandle, withWrite) {
  const opts = {};
  if (withWrite) {
    opts.mode = "readwrite";
  }

  // 检查是否已经拥有相应权限，如果是，返回 true。
  if ((await fileHandle.queryPermission(opts)) === "granted") {
    return true;
  }

  // 为文件请求权限，如果用户授予了权限，返回 true。
  if ((await fileHandle.requestPermission(opts)) === "granted") {
    return true;
  }

  // 用户没有授权，返回 false。
  return false;
}
```

### 比对条目

以下函数将单个条目与条目数组进行比对，返回包含不相符条目的新数组。


```js
function removeMatches(fileEntry, entriesArr) {
  const newArr = entriesArr.filter((entry) => !fileEntry.isSameEntry(entry));

  return newArr;
}
```

规范
--

| Specification |
| --- |
| File System Standard # api-filesystemhandle |

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

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

参见
--

* 文件系统 API
* 文件系统访问 API：简化本地文件访问
History
=======

**`History`** 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。

属性
--

*`History` 接口不继承于任何属性。*

`length` 只读 

返回一个整数（`Integer`），该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回 `1`。

`scrollRestoration`

允许 Web 应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（`auto`）或者手动的（`manual`）。

`state` 只读 

返回一个表示历史堆栈顶部的状态的任意（`any`）值。这是一种不必等待 `popstate` 事件而查看状态的方式。

方法
--

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

`back()`

此异步方法转到浏览器会话历史的上一页，与用户单击浏览器的 `Back` 按钮的行为相同。等价于 `history.go(-1)`。

调用此方法回到会话历史的第一页之前没有效果并且不会引发异常。

`forward()`

此异步方法转到浏览器会话历史的下一页，与用户单击浏览器的 `Forward` 按钮的行为相同。等价于 `history.go(1)`。

调用此方法超越浏览器历史记录中最新的页面没有效果并且不会引发异常。

`go()`

通过当前页面的相对位置从浏览器历史记录（会话记录）异步加载页面。比如：参数为 -1 的时候为上一页，参数为 1 的时候为下一页。当你指定了一个越界值（例如：当会话历史记录中没有之前访问的页面时，则传参的值为 -1，那么这个方法没有任何效果也不会报错。调用没有参数的 `go()` 方法或者参数值为 0 时，重新载入当前页面。Internet Explorer 允许你指定一个字符串，而不是整数，以转到历史记录列表中的特定 URL。

`pushState()`

按指定的名称和 URL（如果提供该参数）将数据 push 进会话历史栈，数据被 DOM 进行不透明处理；你可以指定任何可以被序列化的 javascript 对象。请注意，除了 Safari 所有浏览器现在都忽略了 title 参数。更多的信息，请看使用 History API。

`replaceState()`

按指定的数据、名称和 URL（如果提供该参数），更新 history 栈上最新的条目。这个数据被 DOM 进行了不透明处理。你可以指定任何可以被序列化的 javascript 对象。请注意，除了 Safari 所有浏览器现在都忽略了 title 参数。更多的信息，请看使用 History API。

规范
--

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

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

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

参见
--

* `Window.history` 返回当前会话的 history 状态
ViewTransition
==============

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

View Transitions API 的 **`ViewTransition`** 接口表示视图过渡，并提供了在过渡到达不同状态时运行代码的功能（例如，准备运行动画，或动画完成），或跳过视图过渡。

此对象类型由 `document.startViewTransition()` 方法返回。当调用 `startViewTransition()` 时，将按照视图过渡过程中所述的步骤序列进行。这也解释了不同的 Promise 何时兑现。

实例属性
----

`ViewTransition.finished` 
实验性

一个在过渡动画完成后兑现的 `Promise`，新的页面视图对用户可见且可交互。

`ViewTransition.ready` 
实验性

一个在伪元素树创建且过渡动画即将开始时兑现的 `Promise`。

`ViewTransition.updateCallbackDone` 
实验性

当 `document.startViewTransition()` 的回调返回的 `Promise` 兑现时，该 `Promise` 也会兑现。

实例方法
----

`skipTransition()` 
实验性

跳过视图过渡的动画部分，但不会跳过运行 `document.startViewTransition()` 的回调，该回调会更新 DOM。

示例
--

在下面的示例中，`ViewTransition.ready` 用于触发从用户点击位置开始的自定义圆形揭示视图过渡，动画由 Web Animations API 提供。


```js
// 保存最后一次点击事件
let lastClick;
addEventListener("click", (event) => (lastClick = event));

function spaNavigate(data) {
  // 为不支持此 API 的浏览器提供回退方案：
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // 获取点击位置，或者回退到屏幕中间
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // 获取到最远角的距离
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  );

  // 开始一次视图过渡：
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // 等待伪元素创建完成：
  transition.ready.then(() => {
    // 新视图的根元素动画
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: "ease-in",
        // 指定要附加动画的伪元素
        pseudoElement: "::view-transition-new(root)",
      },
    );
  });
}
```


该动画还需要以下 CSS，以关闭默认的 CSS 动画并防止新旧视图状态以任何方式混合（新状态从旧状态上方“擦除”，而不是过渡）：


```css
::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}
```

规范
--

| Specification |
| --- |
| CSS View Transitions Module Level 1 # viewtransition |

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

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

参见
--

* 使用 View Transitions API 实现平滑、简单的过渡
HTMLAudioElement
================

**`HTMLAudioElement`** 接口提供对 `<audio>` 元素的属性访问及一系列操控它的方法，它基于并从 `HTMLMediaElement` 接口继承属性和方法。

构造函数
----

`Audio()`

创建并返回一个新的 `HTMLAudioElement` 对象，如果提供音频文件 URL，则开始加载音频文件。

属性
--

*没有具体的属性；从父类 `HTMLMediaElement` 和 `HTMLElement` 继承属性。*

方法
--

*从父类 `HTMLMediaElement` 和 `HTMLElement` 继承方法，自身不提供方法。*

### 废弃的且仅适用于 Mozilla 的方法

*以下方法是未标准化的，请勿使用.*

`mozCurrentSampleOffset()` 
非标准

已弃用

Returns the number of samples form the beginning of the stream that have been written so far into the audio stream created by calling `mozWriteAudio()`.

`mozSetup()` 
非标准

已弃用

Sets up the audio stream to allow writing, given the number of audio channels (1 or 2) and the sample rate in kHz.

`mozWriteAudio()` 
非标准

已弃用

Writes a batch of audio frames to the stream at the current offset, returning the number of bytes actually written to the stream.

示例
--

### 基本用法

你可以完全使用 JavaScript 的 `Audio()` 构造函数来创建一个 `HTMLAudioElement` ：


```js
var audioElement = new Audio("car\_horn.wav");
```


然后你可以在这个元素上调用 `play()` 方法


```js
audioElement.play();
```


**备注：** 一个常见的需求是在页面加载后马上去播放音频，现代浏览器的默认自动播放策略会阻止这一行为，参见 firefox 和 chrome 寻找最佳实践和解决方案。

一些经常被使用的属性，包括 `src`、`currentTime`、`duration`、`paused`、`muted` 和 `volume`。以下这段代码赋值音频文件的播放时长给一个变量：


```js
var audioElement = new Audio("car\_horn.wav");
audioElement.addEventListener("loadeddata", () => {
  let duration = audioElement.duration;
  // duration 变量现在存放音频的播放时长（单位秒）
});
```

事件
--

*从父类 `HTMLMediaElement` 和祖先 `HTMLElement` 继承方法。使用* `addEventListener()` *监听事件或者赋值一个事件监听器给这个接口的* `oneventname` 属性。

规范
--

| Specification |
| --- |
| HTML Standard # htmlaudioelement |

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

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

参见
--

* Web media technologies
* Using audio and video in HTML (en-US)
* HTML element implementing this interface: `<audio>`.
MediaStreamAudioSourceNode
==========================

`MediaStreamAudioSourceNode` 接口代表一个音频接口，是WebRTC (en-US) `MediaStream` (比如一个摄像头或者麦克风) 的一部分。是个表现为音频源的`AudioNode`。

`MediaElementSourceNode 没有输入，并且只有一个输出。创建之后使用` `AudioContext.createMediaStreamSource`方法。输出通道的数量和`AudioMediaStreamTrack`的通道数量相同。如果没有有效的媒体流，输出通道就变成一个静音的通道。

|  |  |
| --- | --- |
| Number of inputs | `0` |
| Number of outputs | `1` |
| Channel count | 
 由`AudioMediaStreamTrack`定义，传递给
 `AudioContext.createMediaStreamSource`
 ，并由此创建。
  |

构造器
---

`MediaStreamAudioSourceNode.MediaStreamAudioSourceNode()`

创建一个新的`MediaStreamAudioSourceNode`实例。

属性
--

*从 `AudioNode` 上继承。*

方法
--

*从 `AudioNode` 上继承。*

示例
--

参见 `AudioContext.createMediaStreamSource()` 以获取有关该对象用法的示例代码。

规范
--

| Specification |
| --- |
| Web Audio API # MediaStreamAudioSourceNode |

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

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

参见
--

* 使用 Web Audio API
Client
======

`Client` 接口表示一个可执行的上下文，如 `Worker` 或 `SharedWorker`。`Window` 客户端由更具体的 `WindowClient` (en-US) 表示。你可以从 `Clients.matchAll()` 和 `Clients.get()` 等方法获取 `Client`/`WindowClient` 对象。

实例方法
----

`Client.postMessage()`

向客户端发送一条消息。

实例属性
----

`Client.id` 只读 

一个字符串，表示客户端的通用唯一标识。

`Client.type` (en-US) 只读 

表示客户端类型的字符串。可能是 `"window"`、`"worker"` 或 `"sharedworker"`。

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

表示客户端 URL 的字符串。

规范
--

| Specification |
| --- |
| Service Workers # client-interface |

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

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

参见
--

* 使用 Service Worker (en-US)
* 是否支持 ServiceWorker？
* Promise
MouseScrollEvent
================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

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

`MouseScrollEvent` 事件对象代表了当用户在滚动鼠标滚轮或操作其他类似的输入设备时触发的事件。

要优先使用标准化过的 WheelEvent 来代替该陈旧的事件对象。

方法概述
----
```

void initMouseScrollEvent(
  in DOMString typeArg,
  in boolean canBubbleArg,
  in boolean cancelableArg,
  in nsIDOMAbstractView viewArg,
  in long detailArg,
  in long screenXArg,
  in long screenYArg,
  in long clientXArg,
  in long clientYArg,
  in boolean ctrlKeyArg,
  in boolean altKeyArg,
  in boolean shiftKeyArg,
  in boolean metaKeyArg,
  in unsigned short buttonArg,
  in nsIDOMEventTarget relatedTargetArg,
  in long axis);
```

属性
--

| 名称 | 类型 | 描述 |
| --- | --- | --- |
| `axis` | `long` | 表明鼠标滚轮滚动的方向（**只读**） |

常量
--

### Delta 模式

| 名称 | 值 | 描述 |
| --- | --- | --- |
| `HORIZONTAL_AXIS` | `0x01` | 该事件是由鼠标滚轮的横向滚动触发的 |
| `VERTICAL_AXIS` | `0x02` | 该事件是由鼠标滚轮的纵向滚动触发的 |

方法
--

### initMouseScrollEvent()

查看 nsIDOMMouseScrollEvent::initMouseScrollEvent()。

滚轮相关事件对比
--------

| 事件类型 | 事件对象 | 是否标准 | 兼容性 |
| --- | --- | --- | --- |
| mousewheel (en-US) | MouseWheelEvent | 非标准 | 只有 Firefox 不支持 |
| DOMMouseScroll (en-US) | MouseScrollEvent | 非标准 | 只有 Firefox 支持 |
| wheel (en-US) | WheelEvent | DOM Level 3 | Firefox 17+ ie9+ |

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

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

相关链接
----

* `DOMMouseScroll`
* `MozMousePixelScroll`
* 非 Gecko 浏览器中的非标准的鼠标滚轮事件对象：`MouseWheelEvent`
* 被标准化的鼠标滚轮事件对象：`WheelEvent`