recursal/MDN huggingface dataset:
EyeDropper
==========

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

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

**`EyeDropper`** 接口表示一个拾色器工具的实例，用户可以打开并使用它从屏幕上选择颜色。

构造函数
----

`EyeDropper()` 
实验性

返回一个新的 `EyeDropper` 实例。

实例方法
----

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

`EyeDropper.open()` 
实验性

返回一个 Promise，该 Promise 会兑现一个可以访问所选颜色的对象。

示例
--

### 打开拾色器工具并进行颜色采样

以下示例演示如何打开拾色器工具，并等待用户选择屏幕上的像素，或按下 `Escape` 键取消拾色器模式。

#### HTML


```html
<button id="start-button">打开拾色器</button> <span id="result"></span>
```


#### JavaScript


```js
document.getElementById("start-button").addEventListener("click", () => {
  const resultElement = document.getElementById("result");

  if (!window.EyeDropper) {
    resultElement.textContent = "你的浏览器不支持 EyeDropper API";
    return;
  }

  const eyeDropper = new EyeDropper();

  eyeDropper
    .open()
    .then((result) => {
      resultElement.textContent = result.sRGBHex;
      resultElement.style.backgroundColor = result.sRGBHex;
    })
    .catch((e) => {
      resultElement.textContent = e;
    });
});
```


#### 结果

### 中止拾色器模式

以下示例演示如何打开拾色器工具，并等待用户选择屏幕上的像素或按下 `Escape` 键来取消拾色器模式。

#### HTML


```html
<button id="start-button">打开拾色器</button> <span id="result"></span>
```


#### JavaScript


```js
document.getElementById("start-button").addEventListener("click", () => {
  const resultElement = document.getElementById("result");

  if (!window.EyeDropper) {
    resultElement.textContent = "你的浏览器不支持 EyeDropper API";
    return;
  }

  const eyeDropper = new EyeDropper();
  const abortController = new AbortController();

  eyeDropper
    .open({ signal: abortController.signal })
    .then((result) => {
      resultElement.textContent = result.sRGBHex;
      resultElement.style.backgroundColor = result.sRGBHex;
    })
    .catch((e) => {
      resultElement.textContent = e;
    });

  setTimeout(() => {
    abortController.abort();
  }, 2000);
});
```


#### 结果

规范
--

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

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

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

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

`DeviceMotionEvent` 为 web 开发者提供了关于设备的位置和方向的改变速度的信息。

**警告：** 目前，Firefox 和 Chrome 处理坐标的方式不同。使用时要多加注意。

构造函数
----

`DeviceMotionEvent.DeviceMotionEvent()` 
非标准

创建一个新的 `DeviceMotionEvent`。

属性
--

`DeviceMotionEvent.acceleration` 只读 

提供了设备在 X,Y,Z 轴方向上加速度的对象。加速度的单位为 m/s2。

`DeviceMotionEvent.accelerationIncludingGravity` 只读 

提供了设备在 X,Y,Z 轴方向上带重力的加速度的对象。加速度的单位为 m/s2

`DeviceMotionEvent.rotationRate` 只读 

提供了设备在 alpha、beta、gamma 轴方向上旋转的速率的对象。旋转速率的单位为度每秒。

`DeviceMotionEvent.interval` 只读 

表示从设备获取数据的间隔时间，单位是毫秒。

示例
--


```js
window.addEventListener("devicemotion", function (event) {
  console.log(event.acceleration.x + " m/s2");
});
```

规范
--

| Specification |
| --- |
| DeviceOrientation Event Specification # devicemotion |

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

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

参见
--

* `deviceorientation`
* `DeviceOrientationEvent`
* `devicemotion`
* Detecting device orientation (en-US)
* Orientation and motion data explained
HTMLHtmlElement
===============

**`HTMLHtmlElement`** 接口是给定 HTML 文档的根节点。它继承了 `HTMLElement` 对象的属性和方法。

你可以通过读取 `document.documentElement` 属性的值来获取文档的 `HTMLHtmlElement` 对象。

属性
--

*继承 `HTMLElement`的属性。*

`HTMLHtmlElement.version` 
已弃用

这是一个用于表示管理此文档的\*\*HTML 文档类型定义（DTD）\*\*版本的 `DOMString`。但此属性不应再使用，因为它不符合要求。请仅忽略它。

方法
--

*没有明确的方法；可从父项继承——`HTMLElement`。*

规范
--

| Specification |
| --- |
| HTML Standard # htmlhtmlelement |

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

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

还可以看看
-----

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

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

在 文件系统 API 中， `FileSystemSync` 对象表示文件系统。它有两个属性。

关于这个文档
------

这个文档最后更新与 2012 年 3 月 2 日，并且遵循 W3C 规范（工作草案），起草于 2011 年 4 月 19 日。

规范目前已废弃，没有得到大量的关注。

基本概念
----

`FileSystemSync` 对象是整个 API 的必经之路，你会大量使用它。所以一旦你获得了引用，将对象缓存在全局变量或类属性中。

属性
--

| Attribute | Type | Description |
| --- | --- | --- |
| `name` | `只读` `DOMString` | 文件系统的名称。名称在开放的文件系统列表中必须是唯一的。 |
| `root` | `只读 DirectoryEntry` | 文件系统的根目录。 |

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

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

另见
--

规范：File API: Directories and System Specification

参考： 文件系统 API

简介：文件系统 API 的基本概念
XMLDocument
===========

The **XMLDocument** interface represents an XML document. It inherits from the generic `Document` and does not add any specific methods or properties to it: nevertheless, several algorithms behave differently with the two types of documents.

EventTarget

Node

Document

XMLDocument属性
--

*Also inherits properties from: `Document`.*

方法
--

*Also inherits methods from: `Document`.*

规范
--

| Specification |
| --- |
| DOM Standard # xmldocument |

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

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

参见
--

* DOM 接口索引
OfflineAudioContext
===================

`OfflineAudioContext` 接口是一个 `AudioContext` 的接口，代表由多个 `AudioNode` 连接在一起构成的音频处理图。与 `AudioContext` 标准相反的是， `OfflineAudioContext` 不在硬件设备渲染音频；相反，它尽可能快地生成音频，输出一个 `AudioBuffer` 作为结果。

构造函数
----

`OfflineAudioContext.OfflineAudioContext()`

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

属性
--

*从父级 `AudioContext` 获取属性。*

`OfflineAudioContext.length` 只读 

代表采样帧缓冲区大小的整数。

### 事件处理程序

`OfflineAudioContext.oncomplete` (en-US)

当进程完成时，基于事件版本的`OfflineAudioContext.startRendering()` (en-US) 被使用之后，事件处理器将会被调用，`complete` 事件类型为 `OfflineAudioCompletionEvent` (en-US)）被触发。

方法
--

*从父级 `AudioContext` 和 `EventTarget` 获取方法的实现。*

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

恢复一个被暂停的音频的时间进程。

`OfflineAudioContext.suspend()`

在指定的时间安排音频暂停时间进程，并且通过 Promise 返回。

`OfflineAudioContext.startRendering()` (en-US)

开始渲染音频，考虑当前连接和当前计划的修改。这个页面涵盖基于事件的和基于 Promise 的版本。

示例
--

这个简单的例子中，我们声明了 `AudioContext` 和 `OfflineAudioContext` 对象。我们使用 `AudioContext` 去加载一个 XHR（`AudioContext.decodeAudioData`）获取的音轨，然后使用 `OfflineAudioContext` 去渲染音频并得到一个 into an `AudioBufferSourceNode`，并播放这个音轨。在离线音频处理图建立后，你需要去使用 `OfflineAudioContext.startRendering` (en-US) 来渲染它成为 `AudioBuffer`。

当 `startRendering()` 的 `Promise` 解决后，渲染也完成了，在 `Promise` 内可以获得输出的 `AudioBuffer`。

在此刻，我们创建了一个另外的音频上下文，在它里面创建了一个 `AudioBufferSourceNode`，并且设置它的 buffer 为之前生成的 Promise 中的 `AudioBuffer。这样它就可以作为简单标准音频图来播放了`。

**备注：** 为了获取可以运行的例子，请看我们在 Github 的仓库 offline-audio-context-promise （也可以看到 源代码。）


```js
// 定义一个在线或者离线的音频上下文

var audioCtx = new AudioContext();
var offlineCtx = new OfflineAudioContext(2, 44100 \* 40, 44100);

source = offlineCtx.createBufferSource();

// 使用 XHR 去加载一个音轨，
// 使用 decodeAudioData 去解码，
// 使用 OfflineAudioContext 去渲染它

function getData() {
  request = new XMLHttpRequest();

  request.open("GET", "viper.ogg", true);

  request.responseType = "arraybuffer";

  request.onload = function () {
    var audioData = request.response;

    audioCtx.decodeAudioData(audioData, function (buffer) {
      myBuffer = buffer;
      source.buffer = myBuffer;
      source.connect(offlineCtx.destination);
      source.start();
      //source.loop = true;
      offlineCtx
        .startRendering()
        .then(function (renderedBuffer) {
          console.log("渲染完全成功");
          var audioCtx = new (window.AudioContext ||
            window.webkitAudioContext)();
          var song = audioCtx.createBufferSource();
          song.buffer = renderedBuffer;

          song.connect(audioCtx.destination);

          play.onclick = function () {
            song.start();
          };
        })
        .catch(function (err) {
          console.log("渲染失败：" + err);
          // 注意：当 OfflineAudioContext 上 startRendering 被立刻调用，Promise 应该被 reject
        });
    });
  };

  request.send();
}

// 运行 getData 去开始这个进程

getData();
```

规范
--

| Specification |
| --- |
| Web Audio API # OfflineAudioContext |

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

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

参见
--

* Web Audio API 的运用
Screen
======

`Screen` 接口表示一个屏幕窗口，往往指的是当前正在被渲染的 window 对象，可以使用 `window.screen` 获取它。

请注意：由浏览器决定提供屏幕对象，此对象一般通过当前浏览器窗口活动状态动态检测来得到。

属性
--

`Screen.availTop`

Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.

`Screen.availLeft`

返回屏幕左边边界的第一个像素点

`Screen.availHeight`

Specifies the height of the screen, in pixels, minus permanent or semipermanent user interface features displayed by the operating system, such as the Taskbar on Windows.

`Screen.availWidth`

返回窗口中水平方向可用空间的像素值。

`Screen.colorDepth`

返回屏幕的色彩深度。

`Screen.height`

以像素为单位返回屏幕的高度。

`Screen.left` (en-US)

返回从最左边界到当前屏幕的像素值。

`Screen.orientation`

返回当前屏幕的转向。

`Screen.pixelDepth`

获取屏幕的像素点

`Screen.top` (en-US)

返回最上边界到当前屏幕的像素值。

`Screen.width`

返回屏幕的宽度。

`Screen.mozEnabled` (en-US)

布尔值。如果设置为 false 将关闭设备的屏幕。

`Screen.mozBrightness` (en-US)

控制设备屏幕的亮度。期望参数是 0-1.0 之间的浮点数。

### Events handler

`Screen.onorientationchange` (en-US)

对`orientationchange` 事件的时间处理器。

方法
--

*方法继承自其父接口 `EventTarget`。*

`Screen.lockOrientation` 
已弃用

锁定屏幕转向（仅在全屏或者已安装的 APP 中生效）

`Screen.unlockOrientation` (en-US) 
已弃用

解锁屏幕转向（仅在全屏或者已安装的 APP 中生效）

示例
--


```js
if (screen.pixelDepth < 8) {
  // use low-color version of page
} else {
  // use regular, colorful page
}
```

规范
--

| Specification |
| --- |
| CSSOM View Module # the-screen-interface |

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

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

Console API 提供了允许开发人员执行调试任务的功能，例如在代码中的某个位置记录消息或变量值，或者计算任务完成所需的时间。

概念和用法
-----

Console API 最初是一个专有的 API，不同的浏览器以自己的实现方式来实现它。Console API 规范统一了这个 API 的行为，并且所有现代浏览器最终都决定实现这种行为 — 尽管一些实现仍然有自己的附加专有功能。了解这些请查看：

* Google Chrome DevTools implementation
* Safari DevTools implementation

用法非常简单 — `console` 对象 — 可以通过`window.console`获取到，在 workers 里面使用`WorkerGlobalScope.console` (en-US)获取，`console` — 包含许多方法，你可以调用它们来执行基本的调试任务，通常专注于将各种值记录到浏览器中 WEB 控制台.

到目前为止，最常用的方法是 console.log，它用于记录特定变量中包含的当前值。

接口
--

`console`

提供基本的调试功能，包括日志记录，堆栈跟踪，计时器和计数器。

示例
--


```js
let myString = "Hello world";

// Output "Hello world" to the console
console.log(myString);
```


到Console reference page查看更多示例

规范
--

| Specification |
| --- |
| Console Standard # console-namespace |

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

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

参见
--

* Tools
* Web Console — how the Web Console in Firefox handles console API calls
* Remote debugging — how to see console output when the debugging target is a mobile device
MessageEvent
============

**`MessageEvent`** 是接口代表一段被目标对象接收的消息。

用来代表下列情况的消息

* Server-sent events (参见`EventSource.onmessage` (en-US)).
* Web sockets (参见 WebSocket 接口的 `onmessage` 属性).
* Cross-document messaging (参见 `Window.postMessage()` 和 `Window.onmessage`).
* Channel messaging (参见 `MessagePort.postMessage()` (en-US) 和`MessagePort.onmessage`).
* Cross-worker/document messaging (参见上面两个入口，还有 `Worker.postMessage()`, `Worker.onmessage`, `ServiceWorkerGlobalScope.onmessage` (en-US), 等等.)
* Broadcast channels (参见 `Broadcastchannel.postMessage()`) 和 `BroadcastChannel.onmessage`).
* WebRTC data channels (参见 `RTCDataChannel.onmessage` (en-US)).

通过这个事件触发的动作被定义为一个函数，该函数作为相关`message`事件 (例如使用前文所列的`onmessage` 处理器) 的事件处理器。

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

构造函数
----

`MessageEvent()`

创建一个新的 **消息事件** 。

属性
--

*继承其父类 `Event` 的属性。*

`MessageEvent.data` (en-US) 只读 

返回 `DOMString`, `Blob` 或者 `ArrayBuffer`，包含来自发送者的数据。

`MessageEvent.origin` (en-US)

返回一个表示消息发送者来源的`USVString`

`MessageEvent.lastEventId` (en-US) 只读 

`DOMString` representing a unique ID for the event.

`MessageEvent.source` (en-US)

`MessageEventSource` (可以是 `WindowProxy`, `MessagePort`, 或 `ServiceWorker` 对象) 代表消息发送者。

`MessageEvent.ports` (en-US)

`MessagePort`对象数组，表示消息正通过特定通道（数据通道）发送的相关端口（适用于通道消息传输或者向一个共享线程（shared work）发送消息时）。

方法
--

*继承父类 `Event` 的方法。*

`MessageEvent.initMessageEvent()` 
已弃用

**不要再使用**: 使用 `MessageEvent()`。

示例
--

在我们的基础共享线程示例 Basic shared worker example (run shared worker) 中，我们有两个 HTML 页，每一页都用简单的 js 代码去执行简单的计算。不同的脚本使用同一个 worker 文件去执行计算 — 它们都可以访问那个 worker 文件，即使它们（scripts）运行在不同的窗口。

下面的代码片段展示了使用`SharedWorker()`构造器创建一个 `SharedWorker`对象。


```js
var myWorker = new SharedWorker("worker.js");
```


接下来两份脚本通过一个`SharedWorker.port` (en-US)方法创建的`MessagePort`对象访问 worker。如果 onmessage 事件通过 addEventListener 被绑定，端口可以用`start()`方法手动开启：


```js
myWorker.port.start();
```


当端口被打开，两份脚本各自都可用 `port.postMessage()` 向 worker 传消息并用 `port.onmessage`处理它（worker）传来的消息：


```js
first.onchange = function () {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

second.onchange = function () {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

myWorker.port.onmessage = function (e) {
  result1.textContent = e.data;
  console.log("Message received from worker");
};
```


在 worker 内部我们使用 `SharedWorkerGlobalScope.onconnect` (en-US) 处理器来连接前文说到相同端口。与 worker 相关联的端口可以在 `connect` (en-US) 事件的 `ports` 属性中访问到——接着我们使用 `MessagePort` `start()` 方法打开端口，`onmessage` 处理器来处理主线程传来的消息。


```js
onconnect = function (e) {
  var port = e.ports[0];

  port.addEventListener("message", function (e) {
    var workerResult = "Result: " + e.data[0] \* e.data[1];
    port.postMessage(workerResult);
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};
```

规范
--

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

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

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

**`DocumentFragment`**，文档片段接口，表示一个没有父对象的最小文档对象。

它被作为一个轻量版的 `Document` 使用，就像标准的 document 一样，存储由节点（nodes）组成的文档结构。与 document 相比，最大的区别是它不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会对性能产生影响。

EventTarget

Node

DocumentFragment构造函数
----

`DocumentFragment()`

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

属性
--

*该接口没有特殊的属性，其属性都继承自 `Node`。*

`DocumentFragment.childElementCount` (en-US) 只读 

返回所有属于 `DocumentFragment` 的 `Element` 类型的子对象。

`DocumentFragment.children` (en-US) 只读 

返回一个实时的 `HTMLCollection`，其中包含了所有属于 `DocumentFragment` 的 `Element` 类型的子对象。

`ParentNode.firstElementChild` (en-US) 只读 

返回 `DocumentFragment` 的第一个 `Element` 类型的子对象，如果没有则返回 `null`。

`ParentNode.lastElementChild` (en-US) 只读 

返回 `DocumentFragment` 的最后一个 `Element` 类型的子对象，如果没有则返回 `null`。

方法
--

*该接口继承 `Node` 的全部方法。*

`DocumentFragment.append()` (en-US)

在文档片段的最后一个子对象后插入一组 `Node` 或字符串对象。

`DocumentFragment.prepend()` (en-US)

在文档片段的第一个元素前插入一组 `Node` 或字符串对象。

`DocumentFragment.querySelector()`

返回在 `DocumentFragment` 中以文档顺序排列的第一个符合指定选择器的 `Element` 节点。

`DocumentFragment.querySelectorAll()`

返回在 `DocumentFragment` 中所有的符合指定选择器的 `Element` 节点组成的 `NodeList` 数组。

`DocumentFragment.getElementById()` (en-US)

返回在 `DocumentFragment` 中以文档顺序排列的第一个符合指定 ID 选择器的 `Element` 节点。与 `Document.getElementById()` 作用相同。

使用说明
----

最常用的方法是使用 `DocumentFragment` 创建并组成一个 DOM 子树，然后使用 `Node` 接口方法（如：`appendChild()` 或 `insertBefore()`）将其插入到 DOM 中。这种情况下会插入片段的所有子节点，并留下一个空的 `DocumentFragment`。因为所有的节点会被一次插入到文档中，所以仅会发生一个重渲染的操作，而不是每个节点分别被插入到文档中从而发生多次重渲染的操作。

该接口在 Web 组件（Web components）中也非常有用：`<template>` 元素在其 `HTMLTemplateElement.content` 属性中包含了一个 `DocumentFragment`。

可以使用 `document.createDocumentFragment` 方法或者构造函数来创建一个空的 `DocumentFragment`。

示例
--

### HTML


```html
<ul id="list"></ul>
```

### JavaScript


```js
const list = document.querySelector("#list");
const fruits = ["Apple", "Orange", "Banana", "Melon"];

const fragment = new DocumentFragment();

fruits.forEach((fruit) => {
  const li = document.createElement("li");
  li.textContent = fruit;
  fragment.appendChild(li);
});

list.appendChild(fragment);
```

### 结果

规范
--

| Specification |
| --- |
| DOM Standard # interface-documentfragment |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WEBGL\_lose\_context
====================

**WEBGL\_lose\_context** 是属于 WebGL API 的一个扩展 API，它提供一组方法用来模拟一个 `WebGLRenderingContext` 上下文的丢失和恢复。

WebGL 扩展可以通过 `WebGLRenderingContext.getExtension()` 方法来使用。更多信息可参阅 WebGL 教程 中的 使用 WebGL 扩展 。

**备注：** 该扩展在 WebGL1 和 WebGL2 上下文中都是可用的。

方法
--

`WEBGL_lose_context.loseContext()`

模拟上下文丢失。

`WEBGL_lose_context.restoreContext()`

模拟上下文恢复。

示例
--

使用这个扩展，你可以模拟 `webglcontextlost` 和 `webglcontextrestored` (en-US) 事件：


```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" 类型的 WebGLContextEvent 事件。
```

规范
--

| 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)
CSSStyleDeclaration
===================

**`CSSStyleDeclaration`** 接口表示一个对象，它是一个 CSS 声明块，CSS 属性键值对的集合。它暴露了样式信息和各种与样式相关的方法和属性。

`CSSStyleDeclaration` 对象可被暴露于三种不同的 API 下：

* `HTMLElement.style`，用于操作单个元素的样式（`<elem style="...">`）。
* `CSSStyleSheet` API，举个例子，`document.styleSheets[0].cssRules[0].style` 会返回文档中第一个样式表中的第一条 CSS 规则。
* `Window.getComputedStyle()`，将 `CSSStyleDeclaration` 对象作为一个**只读**的接口。
属性
--

`CSSStyleDeclaration.cssText` (en-US)

当前声明块的文本内容。设置此属性会改变样式。

`CSSStyleDeclaration.length`

属性的数量。参照下面的 `item()` 方法。

`CSSStyleDeclaration.parentRule` (en-US)

包含当前声明块的 `CssRule`。

方法
--

`CSSStyleDeclaration.getPropertyPriority()`

返回可选的优先级，"important"。

`CSSStyleDeclaration.getPropertyValue()`

返回给定属性的值。

`CSSStyleDeclaration.item()`

 返回用 index 标记的属性名，当 index 越界时返回空字符串。
 另一个可选方案：使用 nodeList[*i*]（在 i 越界时返回 undefined）获取。通常在非 JavaScript Dom 实现方案是很有用。


`CSSStyleDeclaration.removeProperty()`

从 CSS 声明块中删除属性。

`CSSStyleDeclaration.setProperty()`

在 CSS 声明块中修改现有属性或设置新属性。

`CSSStyleDeclaration.getPropertyCSSValue()` 
已弃用

**仅在火狐浏览器中支持 getComputedStyle.** 返回 `CSSPrimitiveValue` (en-US) or `null` for shorthand properties.

范例
--


```js
var styleObj = document.styleSheets[0].cssRules[0].style;
console.log(styleObj.cssText);

for (var i = styleObj.length; i--; ) {
  var nameString = styleObj[i];
  styleObj.removeProperty(nameString);
}

console.log(styleObj.cssText);
```

规范
--

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

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

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

参见
--

* DOM CSS Properties
SVGEvent
========

`SVGEvent` 是一种与 SVG 相关事件所对应的事件对象接口。

Properties
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` 只读  | `EventTarget` | 事件目标（DOM 树的最顶端） |
| `type` 只读  | `DOMString` | 事件类型 |
| `bubbles` 只读  | `Boolean` | 事件是否冒泡 |
| `cancelable` 只读  | `Boolean` | 事件是否可取消 |
ScriptProcessorNode
===================

**备注：** 这个特性在 2014 年 8 月 29 日发布的 Web Audio API 规范中已经标记为不推荐，将很快会被Audio Workers代替。

`ScriptProcessorNode` 接口允许使用 JavaScript 生成、处理、分析音频。它是一个 `AudioNode`，连接着两个缓冲区音频处理模块，其中一个缓冲区包含输入音频数据，另外一个包含处理后的输出音频数据。实现了 `AudioProcessingEvent` (en-US) 接口的一个事件，每当输入缓冲区有新的数据时，事件将被发送到该对象，并且事件将在数据填充到输出缓冲区后结束。

![The ScriptProcessorNode stores the input in a buffer, send the audioprocess event. The EventHandler takes the input buffer and fill the output buffer which is sent to the output by the ScriptProcessorNode.](/zh-CN/docs/Web/API/ScriptProcessorNode/webaudioscriptprocessingnode.png)

输入和输出缓冲区大小在创建时定义，当 `AudioContext.createScriptProcessor()` 方法被调用时 (都是由 `AudioContext.createScriptProcessor()`的 `bufferSize` 参数定义). 缓冲区大小必须是在 `256` 到 `16384` 之间的 2 的次幂，为 `256`, `512`, `1024`, `2048`, `4096`, `8192` 或者 `16384`. Small numbers lower the *latency*, but large number may be necessary to avoid audio breakup and glitches.

If the buffer size is not defined, which is recommended, the browser will pick one that its heuristic deems appropriate.

|  |  |
| --- | --- |
| Number of inputs | `1` |
| Number of outputs | `1` |
| Channel count mode | `"max"` |
| Channel count | `2` (not used in the default count mode) |
| Channel interpretation | `"speakers"` |

属性
--

*从上一级继承属性，`AudioNode`。*

`ScriptProcessorNode.bufferSize` (en-US) 只读 

返回一个表示输入和输出缓冲区大小的整数。它的值可以是在`256`–`16384` 之间的 2 的次幂。

### 事件句柄

`ScriptProcessorNode.onaudioprocess` (en-US)

Represents the event handler to be called.

方法
--

*No specific methods; inherits methods from its parent, `AudioNode`*.

示例
--

参见 `BaseAudioContext.createScriptProcessor()` 以获取示例代码。

规范
--

自 2014 年 8 月 29 日 Web Audio API 规范发布以来，此特性已被弃用。它不再有望成为标准。

它已被 AudioWorklet (en-US) 和 `AudioWorkletNode` 接口所取代。

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

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

参见
--

* 使用 Web Audio API
CSS 计数器样式
=========

CSS 计数器样式模块允许自定义计数器样式，可以用于 CSS 列表标记与生成内容计数器。

接口
--

`CSSCounterStyleRule` (en-US)

表示一个 `@counter-style` 规则。

规范
--

| Specification |
| --- |
| CSS Counter Styles Level 3 # the-csscounterstylerule-interface |

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

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

参见
--

* 使用 CSS 计数器
CryptoKey
=========

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

Web Crypto API 的 **`CryptoKey`** 接口表示从特定 `SubtleCrypto` 方法（`generateKey()`、`deriveKey()`、`importKey()` 或 `unwrapKey()`）导出的密钥。

出于安全考虑，`CryptoKey` 接口仅在安全上下文中可用。

实例属性
----

`CryptoKey.type`

返回一个表示密钥类型的字符串，可使用以下值：

* `"secret"`：为密钥（secret key），用于对称加密算法 (en-US)。
* `"private"`：为非对称加密算法 (en-US)的 `CryptoKeyPair` (en-US) 的密钥（private key）部分。
* `"public"`：为非对称加密算法 (en-US)的 `CryptoKeyPair` (en-US) 的公钥（public key）部分。

`CryptoKey.extractable`

一个布尔值，表示原始信息是否能使用 `SubtleCrypto.exportKey()` 或 `SubtleCrypto.wrapKey()` 导出。

* `true`：密钥可以导出。
* `false`：密钥不能导出。使用 `exportKey()` 或 `wrapKey()` 方法来导出此密钥将会抛出异常。

`CryptoKey.algorithm`

一个描述可使用此密钥的算法及任何关联的额外参数的对象。

* `AesKeyGenParams` (en-US) 如果算法是任意高级加密标准（AES）的变体。
* `RsaHashedKeyGenParams` (en-US) 如果算法是任意 RSA 的变体。
* `EcKeyGenParams` (en-US) 如果算法是任意椭圆曲线加密算法（EC）的变体。
* `HmacKeyGenParams` (en-US) 如果算法是任意密钥散列消息认证码（HMAC）的变体。

`CryptoKey.usages`

一个字符串的数组，指明密钥的用途。数组元素可能的值有：

* `"encrypt"`：密钥可用于加密消息。
* `"decrypt"`：密钥可用于解密消息。
* `"sign"`：密钥可用于对消息进行签名。
* `"verify"`：密钥可用于验证签名。
* `"deriveKey"`：密钥可用于派生新的密钥。
* `"deriveBits"`：密钥可用于派生比特序列。
* `"wrapKey"`：密钥可被包装。
* `"unwrapKey"`：密钥可被解包装。

示例
--

`SubtleCrypto` 方法的示例大多使用了 `CryptoKey` 对象。例如：

* `SubtleCrypto.generateKey()`
* `SubtleCrypto.deriveKey()`
* `SubtleCrypto.importKey()`
* `SubtleCrypto.exportKey()`
* `SubtleCrypto.wrapKey()`
* `SubtleCrypto.unwrapKey()`
* `SubtleCrypto.encrypt()`
* `SubtleCrypto.decrypt()`
* `SubtleCrypto.sign()`
* `SubtleCrypto.verify()`
规范
--

| Specification |
| --- |
| Web Cryptography API # cryptokey-interface |

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

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

参见
--

* Web Crypto API
* Web 安全
* 隐私、权限和信息安全 (en-US)
* `Crypto` 和 `Crypto.subtle`。
isSecureContext 全局属性
====================

全局只读属性 **`isSecureContext`** 返回一个布尔值，指示当前上下文是安全的（`true`）还是不安全的（`false`）。

值
-

一个布尔值，`true` 或 `false`。

规范
--

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

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

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

参见
--

* 安全上下文
MathMLElement
=============

**`MathMLElement`** 接口表示任意 MathML 元素。

属性
--

*This interface has no properties, but inherits properties from: `DocumentAndElementEventHandlers`, `Element`, `ElementCSSInlineStyle` (en-US), `GlobalEventHandlers`, `HTMLOrForeignElement`.*

方法
--

*This interface has no methods, but inherits methods from: `DocumentAndElementEventHandlers`, `Element`, `ElementCSSInlineStyle` (en-US), `GlobalEventHandlers`, `HTMLOrForeignElement`.*

示例
--

### MathML


```html
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <msqrt>
    <mi>x</mi>
  </msqrt>
</math>
```

### JavaScript


```js
document.querySelector("msqrt").constructor.name; // MathMLElement
```

规范
--

| Specification |
| --- |
| MathML Core # dom-mathmlelement |

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

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

参见
--

* `Element`
* `HTMLElement`
* `SVGElement`