recursal/MDN huggingface dataset:
Element.querySelectorAll()
==========================

返回一个 non-live 的`NodeList`, 它包含所有元素的非活动节点，该元素来自与其匹配指定的 CSS 选择器组的元素。(基础元素本身不包括，即使它匹配。)

**备注：** 该 API 的定义已被移动到 `ParentNode` 接口。

语法
--


```js
elementList = baseElement.querySelectorAll(selectors);
```


其中

* `elementList`会是一个 non-live 的`NodeList`对象。
* `baseElement 是一个`元素对象。
* `selectors`是一组 CSS 选择器。
示例
--

### dataset selector & attribute selectors


```html
<section class="box" id="sect1">
  <div class="funnel-chart-percent1">10.900%</div>
  <div class="funnel-chart-percent2">3700.00%</div>
  <div class="funnel-chart-percent3">0.00%</div>
</section>
```



```js
// dataset selectors
const refs = [
  ...document.querySelectorAll(`[data-name\*="funnel-chart-percent"]`),
];

// attribute selectors
// const refs = [...document.querySelectorAll(`[class\*="funnel-chart-percent"]`)];
// const refs = [...document.querySelectorAll(`[class^="funnel-chart-percent"]`)];
// const refs = [...document.querySelectorAll(`[class$="funnel-chart-percent"]`)];
// const refs = [...document.querySelectorAll(`[class~="funnel-chart-percent"]`)];
```


下面的例子返回了 HTML 文档中的 `body` 元素的所有 `p` 后代元素：


```js
var matches = document.body.querySelectorAll("p");
```


下面的例子返回了`id`为`'test`'的元素的所有`class 属性`为'`highlighted`'的所有 div 后代元素的`p`子元素：


```js
var el = document.querySelector("#test");
var matches = el.querySelectorAll("div.highlighted > p");
```


下面的例子返回了 el 元素的后代元素中所有拥有`data-src`属性的`iframe`元素：


```js
var matches = el.querySelectorAll("iframe[data-src]");
```

附注
--

如果指定的 CSS 选择器不合法，则会抛出一个`SYNTAX_ERR` 异常。

返回值是一个`NodeList`对象，所以不推荐使用 for...in 去遍历它 (会遍历出其他无关属性)

想要在它身上使用数组方法，必须先把它转换为真正的数组。

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

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

规范
--

* 选择器 API
参见
--

* `Element.querySelector`
* `document.querySelectorAll`
* `document.querySelector`
* Code snippets for `querySelector`
Element：mouseout 事件
===================

**`mouseout`** 事件在定点设备（通常是鼠标）移动至元素或其子元素之外时，会在该元素上触发。

当指针从一个元素移入其子元素时，因为子元素遮盖了父元素的可视区域，所以 `mouseout` 也会被触发。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或者设置事件处理器属性。


```js
addEventListener("mouseout", (event) => {});

onmouseout = (event) => {};
```

事件类型
----

一个 `MouseEvent`。继承自 `Event`。

Event

UIEvent

MouseEvent事件属性
----

*这个接口也继承其父接口 `UIEvent` 和 `Event` 的属性。*

`MouseEvent.altKey` 只读 

当鼠标事件被触发时，如果 `alt` 键已被按下，返回 `true`。

`MouseEvent.button` 只读 

触发鼠标事件时，按下按钮的编号（如果适用）。

`MouseEvent.buttons` 只读 

触发鼠标事件时，按下的按钮（如果存在）。

`MouseEvent.clientX` 只读 

鼠标指针相对于局部 DOM 元素的 X 轴坐标。

`MouseEvent.clientY` 只读 

鼠标指针相对于局部 DOM 元素的 Y 轴坐标。

`MouseEvent.ctrlKey` 只读 

当鼠标事件被触发时，如果 `control` 键已被按下，返回 `true`。

`MouseEvent.layerX` (en-US) 
非标准
 只读 

返回事件相对于当前层的水平坐标。

`MouseEvent.layerY` (en-US) 
非标准
 只读 

返回事件相对于当前层的垂直坐标。

`MouseEvent.metaKey` 只读 

当鼠标事件被触发时，如果 `meta` 键已被按下，返回 `true`。

`MouseEvent.movementX` 只读 

鼠标指针相对于最后一次 `mousemove` 事件位置的 X 轴坐标。

`MouseEvent.movementY` 只读 

鼠标指针相对于最后一次 `mousemove` 事件位置的 Y 轴坐标。

`MouseEvent.offsetX` 只读 

鼠标指针相对于目标节点的内填充边的 X 轴坐标。

`MouseEvent.offsetY` 只读 

鼠标指针相对于目标节点的内填充边的 Y 轴坐标。

`MouseEvent.pageX` 只读 

鼠标指针相对于整个文档的 X 轴坐标。

`MouseEvent.pageY` 只读 

鼠标指针相对于整个文档的 Y 轴坐标。

`MouseEvent.relatedTarget` 只读 

事件的次要目标（如果存在）。

`MouseEvent.screenX` 只读 

鼠标指针相对于屏幕的 X 轴坐标。

`MouseEvent.screenY` 只读 

鼠标指针相对于屏幕的 Y 轴坐标。

`MouseEvent.shiftKey` 只读 

当鼠标事件被触发时，如果 `shift` 键已被按下，返回 `true`。

`MouseEvent.mozInputSource` 
非标准
 只读 

生成事件的设备类型（`MOZ_SOURCE_*` 常量之一）。例如，这允许你决定鼠标事件是否由实际的鼠标还是触摸事件生成（这可能会在一定程度影响你对事件相关坐标判断的准确性）。

`MouseEvent.webkitForce` (en-US) 
非标准
 只读 

单击时施加的压力大小。

`MouseEvent.x` 只读 

`MouseEvent.clientX` 的别名。

`MouseEvent.y` 只读 

`MouseEvent.clientY` 的别名。

示例
--

以下示例将说明如何使用 `mouseout` 事件。

### mouseout 和 mouseleave

以下示例说明了 `mouseout` 和 `mouseleave` 事件的区别。为 `<ul>` 添加 `mouseleave` 事件，以在鼠标离开 `<ul>` 元素时将列表变成紫色。添加 `mouseout` 事件，以在鼠标移出目标元素时将目标元素变成橙色。

当你尝试的时候，你会发现 `mouseout` 被添加到单个列表项目上，而 `mouseleave` 则应用于整个列表，这取决于列表项目的层次关系，而列表项目遮盖了底层的 `<ul>`。

#### HTML


```html
<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
```


#### JavaScript


```js
const test = document.getElementById("test");

// 当鼠标移出 <ul> 元素时，短暂地将列表变成紫色
test.addEventListener(
  "mouseleave",
  (event) => {
    // 高亮 mouseleave 的目标
    event.target.style.color = "purple";

    // 延迟一秒后重置颜色
    setTimeout(() => {
      event.target.style.color = "";
    }, 1000);
  },
  false,
);

// 当鼠标离开 <li> 元素时，短暂地将其变成橙色
test.addEventListener(
  "mouseout",
  (event) => {
    // 高亮 mouseout 的目标
    event.target.style.color = "orange";

    // 延迟 500ms 后重置颜色
    setTimeout(() => {
      event.target.style.color = "";
    }, 500);
  },
  false,
);
```


#### 结果

规范
--

| Specification |
| --- |
| UI Events # event-type-mouseout |
| HTML Standard # handler-onmouseout |

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

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

参见
--

* 事件介绍
* `mousedown`
* `mouseup`
* `mousemove`
* `click`
* `dblclick`
* `mouseover`
* `mouseenter`
* `mouseleave`
* `contextmenu`
Element.clientWidth
===================

只读属性 **`Element.clientWidth`** 对于内联元素以及没有 CSS 样式的元素为 0；否则，它是元素内部的宽度（以像素为单位）。该属性包括内边距（padding），但不包括边框（border）、外边距（margin）和垂直滚动条（如果存在）。

在根元素（`<html>` 元素）或怪异模式下的 `<body>` 元素上使用 `clientWidth` 时，该属性将返回视口宽度（不包含任何滚动条）。这是一个 `clientWidth` 的特例。

**备注：** 该属性值会被四舍五入为一个整数。如果你需要一个小数值，可使用 `element.getBoundingClientRect()`。

值
-

一个数字。

示例
--

![](/zh-CN/docs/Web/API/Element/clientWidth/dimensions-client.png)

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-element-clientwidth |

### 备注

`clientWidth` 首次出现于微软 IE 浏览器的 DHTML 对象模型中。

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

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

参见
--

* `HTMLElement.offsetWidth`
* `Element.scrollWidth`
* 确定元素的宽高
Element.clientLeft
==================

表示一个元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。`clientLeft` 不包括左外边距和左内边距。`clientLeft` 是只读的。

从 Gecko 1.9（Firefox 3 Firefox bug 111207）开始，基于 Gecko 的应用支持 `clientLeft` 属性。该属性在 Firefox 2 及更早的版本中不被支持。

当 *layout.scrollbar.side* preference （译注：这个属性好像是只在火狐浏览器中才有）被设为 1 或 3，且文本方向被设为从右到左（RTL），则垂直滚动条位于左边，这会影响到 `clientLeft` 属性值的计算。

语法
--
```

var left = element.clientLeft;
```

示例
--

padding-top

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

padding-bottom

**Left** **Top** **Right** **Bottom** *margin-top* *margin-bottom* *border-top* *border-bottom*

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

| Specification |
| --- |
| CSSOM View Module # dom-element-clientleft |

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

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

备注
--

`clientLeft` 首次出现于 MS IE DHTML 对象模型中。

元素的文本方向被设为从右到左后，其垂直滚动条的位置取决于 *layout.scrollbar.side* preference

当元素设置 `display: inline` 后，无论是否有边框，`clientLeft` 始终返回 `0` 。
Element.replaceWith()
=====================

**`ChildNode.replaceWith()`** 的方法用一套 `Node` 对象或者字符串对象，替换了该节点父节点下的子节点。字符串对象被当做等效的 `Text` (en-US) 节点插入。

语法
--


```js
replaceWith(param1)
replaceWith(param1, param2)
replaceWith(param1, param2, /\* …, \*/ paramN)
```

### 参数

`param1`、…、`paramN`

一系列用来替换的 `Node` 对象或者字符串对象。

### 异常

`HierarchyRequestError` `DOMException`

无法在层次结构中的指定节点处插入节点时抛出。

示例
--

### 使用 `replaceWith()`


```js
const div = document.createElement("div");
const p = document.createElement("p");
div.appendChild(p);
const span = document.createElement("span");

p.replaceWith(span);

console.log(div.outerHTML);
// "<div><span></span></div>"
```

### `replaceWith()` 是非作用域方法

`replaceWith()` 方法不能作用于 with 语句。参考 `Symbol.unscopables` 获取更多信息。


```js
with (node) {
  replaceWith("foo");
}
// ReferenceError: replaceWith is not defined
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-replacewith① |

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

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

参见
--

* `Node.replaceChild()`
* `NodeList`
GlobalEventHandlers.onpointerleave
==================================

就像在`Element`或`Window`中点击类似，在某目标区域内，发生触点（鼠标指针，触摸等）行为时会触发源于 `pointerleave` 事件global event handler行为。这个事件本身属于 Pointer Events API 的一部分。

语法
--
```

var leaveHandler = EventTarget.onpointerleave;

EventTarget.onpointerleave = leaveHandler;
```

### 返回值

`leaveHandler`

`pointerleave` 事件会执行`EventListener` 监听器会委托执行用以发送给目标。

样例
--

这个样例展示了两种使用 `onpointerleave` 来设置元素 `pointerleave` 事件处理器的方式。


```js
<html>
<script>
function leaveHandler(ev) {
 // 执行 pointerleave event 事件
}
function init() {
 var el=document.getElementById("target1");
 el.onpointerleave = leaveHandler;
}
</script>
<body onload="init();">
<div id="target1"> Touch me ... </div>
<div id="target2" onpointerleave="leaveHandler(event)"> Touch me ... </div>
</body>
</html>
```


查看 Using Pointer Events (en-US) 以了解更多详情。

规格
--

| Specification |
| --- |
| Pointer Events # the-pointerleave-event |
| Pointer Events # dom-globaleventhandlers-onpointerleave |

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

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

参考
--

* 相关事件
    + `gotpointercapture`
    + `lostpointercapture`
    + `pointerover`
    + `pointerenter`
    + `pointerdown`
    + `pointermove`
    + `pointerup`
    + `pointercancel`
    + `pointerout`
WEBGL\_lose\_context.loseContext()
==================================

\*\*WEBGL\_lose\_context.loseContext()\*\*属于 WebGL API，一般用来模拟 `WebGLRenderingContext` 的上下文丢失。

这个方法会触发 WebGL 规范中上下文丢失的相关事件。通过这个方法丢失的上下文可以通过 `WEBGL_lose_context.restoreContext()` 恢复。

语法
--
```

gl.getExtension('WEBGL_lose_context').loseContext();
```

示例
--

你可以用这个方法模拟 `webglcontextlost` 事件：


```js
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");

canvas.addEventListener(
  "webglcontextlost",
  function (e) {
    console.log(e);
  },
  false,
);

gl.getExtension("WEBGL\_lose\_context").loseContext();

// webglcontextlost 事件被触发。
```

规范
--

| Specification |
| --- |
| WebGL WEBGL\_lose\_context Khronos Ratified Extension Specification  |

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

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

相关链接
----

* `WebGLRenderingContext.isContextLost()`
* 事件： `webglcontextlost`, `webglcontextrestored` (en-US), `webglcontextcreationerror` (en-US)
WEBGL\_lose\_context.restoreContext()
=====================================

**WEBGL\_lose\_context.restoreContext()** 属于 WebGL API，一般用来模拟 `WebGLRenderingContext` 的上下文恢复。

语法
--
```

gl.getExtension('WEBGL_lose_context').restoreContext();
```

### 抛出错误

* `INVALID_OPERATION` 上下文尚未丢失
示例
--

你可以用这个方法模拟 `webglcontextrestored` (en-US) 事件：


```js
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");

canvas.addEventListener(
  "webglcontextrestored",
  function (e) {
    console.log(e);
  },
  false,
);

gl.getExtension("WEBGL\_lose\_context").restoreContext();
```

规范
--

| Specification |
| --- |
| WebGL WEBGL\_lose\_context Khronos Ratified Extension Specification  |

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

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

相关链接
----

* `WebGLRenderingContext.isContextLost()`
* 事件： `webglcontextlost`, `webglcontextrestored` (en-US), `webglcontextcreationerror` (en-US)
GPU：getPreferredCanvasFormat() 方法
=================================

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

`GPU` 接口的 **`getPreferredCanvasFormat()`** 方法返回用于当前系统上显示 8 位色深、标准动态范围（SDR）内容的最佳 canvas 纹理格式。

这通常用于为当前系统提供 `GPUCanvasContext.configure()` 调用的最佳 `format` 值。这是推荐的——如果你没有在配置 canvas 上下文时使用最佳的格式，可能会产生开销，例如根据平台而异的额外纹理的复制。

语法
--


```js
getPreferredCanvasFormat()
```

### 参数

无。

### 返回值

一个字符串，表示 canvas 的纹理格式。该值可以是 `rgba8unorm` 或 `bgra8unorm`。

### 异常

无。

示例
--


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

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

规范
--

| Specification |
| --- |
| WebGPU # dom-gpu-getpreferredcanvasformat |

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

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

参见
--

* WebGPU API
GPU：requestAdapter() 方法
=======================

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

`GPU` 接口的 **`requestAdapter()`** 方法返回一个 `Promise`，该 promise 会使用 `GPUAdapter` 对象实例兑现。这时，你可以请求 `GPUDevice`、适配器信息、特性以及配置。

注意，用户代理会选择是否返回一个适配器。如果可以，它会根据提供的 options 进行选择。如果没有提供 options，设备将提供对默认适配器的访问，这通常足够满足大多数的目的。

语法
--


```js
requestAdapter()
requestAdapter(options)
```

### 参数

`options` 可选

一个包含以下属性的对象：

`powerPreference` 可选

一个枚举值，可用于为用户代理提供提示，指示应从系统可用的适配器中选择哪类适配器。可用值为：

* `undefined`（或者未指定），不提供提示。
* `"low-power"`，为优先考虑节能而不是性能提供一个提示。如果你的应用程序在此设置下运行正常，建议使用它，因为它可以显著提高便携式设备的电池寿命。如果没有提供 options，这通常是默认值。
* `"high-performance"`，为优先考虑性能而不是功耗提供了一个提示。我们支持你在十分必要时才使用这个值，因为该值会显著地缩短便携式设备的寿命。它也可能导致 `GPUDevice` 损失增加——系统有时会切换到一个低功耗适配去去保存电力。

该提示的主要目的是为了影响在多 GPU 系统中影响哪个 GPU。例如，一些笔记本有低功耗集成 GPU 和高性能独立 GPU。不同的因素可能会影响返回的适配器，包括电池状态、连接的显示器或可更换的 GPU。


### 备用适配器

用户代理提供的适配器可能是**备用适配器**，如果它确定这是可用的最合适选项。备用适配器通常在性能上有着显著的限制，为了换取更广泛的兼容性、更可预测的行为或者更好的隐私保护。例如，一些浏览器可能通过备用的适配器提供一个基于软件的 API 实现。并非每个系统上的备用适配器都可用。

如果你希望阻止你的应用程序运行在备用的适配器，你应该在请求 `GPUDevice` 之前检查 `GPUAdapter.isFallbackAdapter` (en-US) 属性。

**备注：** 该规范包含 `requestAdapter()` 的 `forceFallbackAdapter` 选项。这是一个布尔值，如果设置为 `true`，则强制用户代理返回备用适配器（如果可用）。然而，任何浏览器仍没有支持这一点。

### 返回值

一个 `Promise`，如果请求成功，会兑现一个 `GPUAdapter` 对象实例。

如果未能获取合适的适配器，`requestAdapter()` 将决议为 `null`。

### 异常

无。

示例
--


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

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

  const device = await adapter.requestDevice();

  //...
}
```

规范
--

| Specification |
| --- |
| WebGPU # dom-gpu-requestadapter |

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

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

参见
--

* WebGPU API
Window：requestAnimationFrame() 方法
=================================

**`window.requestAnimationFrame()`** 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

**备注：** 若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用 `requestAnimationFrame()`。`requestAnimationFrame()` 是一次性的。

当你准备更新在屏动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数（即你的回调函数）。回调函数执行次数通常是每秒 60 次，但在大多数遵循 W3C 建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命，在大多数浏览器里，当 `requestAnimationFrame()` 运行在后台标签页或者隐藏的 `<iframe>` 里时，`requestAnimationFrame()` 会被暂停调用以提升性能和电池寿命。

`DOMHighResTimeStamp` 参数会传入回调方法中，它指示当前被 `requestAnimationFrame()` 排序的回调函数被触发的时间。在同一个帧中的多个回调函数，它们每一个都会接受到一个相同的时间戳，即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数，单位为毫秒，最小精度为 1ms（1000μs）。

**警告：** 请确保总是使用第一个参数（或其他一些获取当前时间的方法）来计算动画在一帧中的进度，**否则动画在高刷新率的屏幕中会运行得更快**。请参考下面示例的做法。

语法
--


```js
requestAnimationFrame(callback)
```

### 参数

`callback`

当你的动画需要更新时，为下一次重绘所调用的函数。该回调函数会传入 `DOMHighResTimeStamp` 参数，该参数与 `performance.now()` 的返回值相同，它表示 `requestAnimationFrame()` 开始执行回调函数的时刻。

### 返回值

一个 `long` 整数，请求 ID，是回调列表中唯一的标识。是个非零值，没有别的意义。你可以传这个值给 `window.cancelAnimationFrame()` 以取消回调函数请求。

示例
--

 在这个例子中，一个元素的动画时间是 2 秒（2000 毫秒）。该元素以 0.1px/ms 的速度向右移动，所以它的相对位置（以 CSS 像素为单位）可以通过动画开始后所经过的时间（以
 毫秒）的函数来计算 `0.1 * elapsed`。该元素的最终位置是在其初始位置的右边 200px（`0.1 * 2000`）。


```js
const element = document.getElementById("some-element-you-want-to-animate");
let start, previousTimeStamp;
let done = false;

function step(timestamp) {
  if (start === undefined) {
    start = timestamp;
  }
  const elapsed = timestamp - start;

  if (previousTimeStamp !== timestamp) {
    // 这里使用 Math.min() 确保元素在恰好位于 200px 时停止运动
    const count = Math.min(0.1 \* elapsed, 200);
    element.style.transform = `translateX(${count}px)`;
    if (count === 200) done = true;
  }

  if (elapsed < 2000) {
    // 2 秒之后停止动画
    previousTimeStamp = timestamp;
    if (!done) {
      window.requestAnimationFrame(step);
    }
  }
}

window.requestAnimationFrame(step);
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-animationframeprovider-requestanimationframe |

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

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

参见
--

* `Window.cancelAnimationFrame()`
* mozRequestAnimationFrame——博文
* requestAnimationFrame 用于智能动画制作——博文
* 用 JavaScript 做动画：从 setInterval 到 requestAnimationFrame——博文
* TestUFO：测试你的网络浏览器 requestAnimationFrame() 的时间偏差
* Paul Irish：requestAnimationFrame API：现在具有亚毫秒级的精度
* 一个 polyfill
Window.getDefaultComputedStyle()
================================

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

`getDefaultComputedStyle()` 给出元素的所有 CSS 属性的默认计算值 (computed values )，忽略作者样式。也就是说，只考虑用户代理和用户风格。

语法及参数说明
-------
```

let style = window.getDefaultComputedStyle(element[, pseudoElt]);
```


element

获取计算样式的元素

pseudoElt 可选

指定匹配的伪类。通常情况下可以为空。

返回的样式是一个 `CSSStyleDeclaration` 对象。

例子
--


```js
var elem1 = document.getElementById("elemId");
var style = window.getDefaultComputedStyle(elem1);
```



```js
<style>
#elem-container {
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;
 }
</style>

<div id="elem-container">dummy</div>
<div id="output"></div>

<script>
    var elem = document.getElementById("elem-container");
    var theCSSprop = window.getDefaultComputedStyle(elem).position;
    document.getElementById("output").innerHTML = theCSSprop; // 将会输出 "static"
</script>
```

Description
-----------

The returned object is of the same type as the object returned by `getComputedStyle`, but only takes into account user-agent and user rules.

使用伪元素
-----

`getDefaultComputedStyle` 同样可以从伪元素中获取属性 (比如，`::after`, `::before`).


```html
<style>
 h3:after {
 content: " rocks!";
 }
</style>

<h3>generated content</h3>

<script>
 var h3 = document.querySelector("h3"),
 result = getDefaultComputedStyle(h3, ":after").content;

 console.log("the generated content is: ", result); // 返回 'none'
</script>
```

备注
--

The returned value is, in certain known cases, expressly incorrect by deliberate intent. In particular, to avoid the so called CSS History Leak security issue, browsers may expressly "lie" about the used value for a link and always return values as if a user has never visited the linked site, and/or limit the styles that can be applied using the `:visited` pseudo-selector. See http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/ and http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ for details of the examples of how this is implemented.

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

Proposed to the CSS working group.

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

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

`AnalyserNode` 接口的 **`smoothingTimeConstant`** 属性是一个双精度浮点型 (double) 的值，表示最后一个分析帧的平均常数。它基本上是当前缓冲区和 AnalyserNode 处理的最后一个缓冲区之间的平均值，并导致在值变化时随着时间推移得到一个更平滑的集合。

`smoothingTimeConstant` 属性的默认值为 `0.8`; 值的范围必须在 `0` ~ `1` 之间。如果设置为 0，则不进行平均，而值为 1 意味着 "在计算值时重叠上一个缓冲区和当前缓冲区相当多", 它基本上平滑了 `AnalyserNode.getFloatFrequencyData`/`AnalyserNode.getByteFrequencyData` 调用的变化。

在技术术语中，我们应用一个 布莱克曼窗 并随着时间推移去平滑值。大部分情况下，默认值是较好的。

**备注：** 如果设置了 0~1 范围外的值，将会抛出异常`INDEX_SIZE_ERR`.

语法
--


```js
var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();
analyser.smoothingTimeConstant = 1;
```

### 值类型

双精度浮点型 (double).

例子
--

下面的例子展示了 `AudioContext` 创建一个 `AnalyserNode`, 然后用 `requestAnimationFrame` 和 `<canvas>` 去反复收集当前音频的频率数据，并绘制为一个柱状风格的输出 (频谱).

更多的例子/信息，查看 Voice-change-O-matic 演示 (相关代码在 app.js 的 128 行~205 行).

`如果你对 smoothingTimeConstant()` 的效果好奇，可以尝试克隆上面的例子并设置 "`analyser.smoothingTimeConstant = 0;"` 代替。你会发现值的变化更加快速。


```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
analyser.smoothingTimeConstant = 0.85;

  ...

analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  var barWidth = (WIDTH / bufferLength) \* 2.5;
  var barHeight;
  var x = 0;

  for(var i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);

    x += barWidth + 1;
  }
};

draw();
```

规范
--

| Specification |
| --- |
| Web Audio API # dom-analysernode-smoothingtimeconstant |

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

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

相关内容
----

* Using the Web Audio API (en-US)
AnalyserNode.getByteTimeDomainData()
====================================

`AnalyserNode` 接口的 **`getByteTimeDomainData()`** 方法复制当前波形或时域数据到传递给它的 `Uint8Array` (en-US) (无符号字节数组) 中。

如果该数组的元素少于 `AnalyserNode.fftSize`, 多余的元素会被丢弃。如果它有多于所需的元素，则忽略多余的元素。

语法
--


```js
var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();
var dataArray = new Uint8Array(analyser.fftSize); // Uint8Array should be the same length as the fftSize
analyser.getByteTimeDomainData(dataArray); // fill the Uint8Array with data returned from getByteTimeDomainData()
```

### 参数

`array`

 时域数据将被复制到的 `Uint8Array` (en-US) 。
 如果数组中的元素少于 `AnalyserNode.frequencyBinCount`, 则会删除多余的元素。如果它包含的元素多于需要的元素，则忽略多余的元素。


### 返回值

**`void`** | None

例子
--

以下的例子展示了 `AudioContext` 生成一个 `AnalyserNode` 基础用法，然后通过 `requestAnimationFrame` 和 `<canvas>` 重复的收集和绘制一个当前音频输入的“示波器样式”输出。有关更完整的应用实例/信息，请查看我们的 Voice-change-O-matic demo (有关代码请参阅 app.js lines 128–205)。


```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();

  ...

analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// draw an oscilloscope of the current audio source

function draw() {

      drawVisual = requestAnimationFrame(draw);
      analyser.getByteTimeDomainData(dataArray);

      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

      canvasCtx.lineWidth = 2;
      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';

      var sliceWidth = WIDTH \* 1.0 / bufferLength;
      var x = 0;

      ctx.beginPath();
      for(var i = 0; i < bufferLength; i++) {
        let v = dataArray[i]/128.0,
            y = v \* HEIGHT/2;

        if(i === 0)
          canvasCtx.moveTo(x, y);
        else
          canvasCtx.lineTo(x, y);

        x += sliceWidth;
      }

      canvasCtx.lineTo(canvas.width, canvas.height/2);
      canvasCtx.stroke();
    };

    draw();
```

规格
--

| Specification |
| --- |
| Web Audio API # dom-analysernode-getbytetimedomaindata |

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

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

See also
--------

* Using the Web Audio API (en-US)
AnalyserNode.AnalyserNode()
===========================

The **`AnalyserNode`** constructor of the Web Audio API creates a new `AnalyserNode` object instance.

Syntax
------
```

var analyserNode = new AnalyserNode(context, options)
```

### 参数

*继承参数自 `AudioNodeOptions` 字典*.

*context*

`AudioContext` 的引用。

*options* 可选

Options are as follows:

* `fftSize`: 用于频域分析的 FFT 初始尺寸。默认值是 2048。
* `maxDecibels`: 用于 FFT 分析的初始最大功率（dB）。默认值是 -30。
* `minDecibels`: 用于 FFT 分析的初始最小功率（dB）。默认值是 -100。
* `smoothingTimeConstant`: 用于 FFT 分析的初始平滑常数。默认值是 0.8。

### 返回值

A new `AnalyserNode` object instance.

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

| Specification |
| --- |
| Web Audio API # dom-analysernode-analysernode |

Browser Compatibility
---------------------

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