recursal/MDN huggingface dataset:
FileReader
==========

**`FileReader`** 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 `File` 或 `Blob` 对象指定要读取的文件或数据。

其中 File 对象可以是来自用户在一个`<input>`元素上选择文件后返回的`FileList`对象，也可以来自拖放操作生成的 `DataTransfer`对象，还可以是来自在一个`HTMLCanvasElement`上执行`mozGetAsFile()`方法后返回结果。

重要提示：FileReader 仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。要在 JavaScript 中按路径名读取文件，应使用标准 Ajax 解决方案进行服务器端文件读取，如果读取跨域，则使用 CORS 权限。

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

构造函数
----

`FileReader()`

返回一个新构造的`FileReader`。

有关详细信息和示例，请参阅如何在 web 应用程序中使用文件。

属性
--

`FileReader.error` 只读 

一个`DOMException`，表示在读取文件时发生的错误。

`FileReader.readyState` 只读 

表示`FileReader`状态的数字。取值如下：

| 常量名 | 值 | 描述 |
| --- | --- | --- |
| `EMPTY` | `0` | 还没有加载任何数据。 |
| `LOADING` | `1` | 数据正在被加载。 |
| `DONE` | `2` | 已完成全部的读取请求。 |

`FileReader.result` 只读 

文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

### 事件处理

`FileReader.onabort`

处理`abort`事件。该事件在读取操作被中断时触发。

`FileReader.onerror` (en-US)

处理`error`事件。该事件在读取操作发生错误时触发。

`FileReader.onload`

处理`load`事件。该事件在读取操作完成时触发。

`FileReader.onloadstart`

处理`loadstart`事件。该事件在读取操作开始时触发。

`FileReader.onloadend`

处理`loadend`事件。该事件在读取操作结束时（要么成功，要么失败）触发。

`FileReader.onprogress`

处理`progress`事件。该事件在读取`Blob`时触发。


**备注：** 因为 `FileReader` 继承自`EventTarget`，所以所有这些事件也可以通过`addEventListener`方法使用。

方法
--

`FileReader.abort()`

中止读取操作。在返回时，`readyState`属性为`DONE`。

`FileReader.readAsArrayBuffer()`

开始读取指定的 `Blob`中的内容，一旦完成，result 属性中保存的将是被读取文件的 `ArrayBuffer` 数据对象。

`FileReader.readAsBinaryString()` 
非标准

开始读取指定的`Blob`中的内容。一旦完成，`result`属性中将包含所读取文件的原始二进制数据。

`FileReader.readAsDataURL()`

开始读取指定的`Blob`中的内容。一旦完成，`result`属性中将包含一个`data:` URL 格式的 Base64 字符串以表示所读取文件的内容。

`FileReader.readAsText()`

开始读取指定的`Blob`中的内容。一旦完成，`result`属性中将包含一个字符串以表示所读取的文件内容。

规范
--

| Specification |
| --- |
| File API # APIASynch |

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

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

参见
--

* 如何在 web 应用程序中使用文件
* `File`
* `Blob`
* `FileReaderSync`
网络信息 API
========

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

网络信息 API（Network Information API）提供关于系统连接的一般连接类型的信息（如“wifi”、“cellular”等）。应用程序可以根据此信息为用户展现不同清晰度的内容。

该接口由一个 `NetworkInformation` 对象组成，其实例由 `Navigator.connection` 属性返回。

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

接口
--

`NetworkInformation`

提供设备用来与网络通信的连接信息，并在连接类型发生变化时为脚本提供通知的方式。`NetworkInformation` 接口不能被实例化。它可以通过 `Navigator` 接口访问。

示例
--

### 侦测连接状态变化

下面是一个侦测用户设备连接状态变化的例子。


```js
let type = navigator.connection.effectiveType;

function updateConnectionStatus() {
  console.log(
    `设备的网络连接从 ${type} 变为了 ${navigator.connection.effectiveType}`,
  );
  type = navigator.connection.effectiveType;
}

connection.addEventListener("change", updateConnectionStatus);
```

### 预加载大型资源

连接对象对于决定是否预装占用大量带宽或内存的资源很有用。这个示例将在页面加载后不久被调用，以检查预加载视频可能不可取的连接类型。如果发现有蜂窝网络连接，那么 `preloadVideo` 标志被设置为 `false`。为了简单明了，这个例子只测试了一种连接类型。真实世界的用例可能会使用 switch 语句或其他方法来检查 `NetworkInformation.type` (en-US) 的所有可能值。无论 `type` 值如何，你都可以通过 `NetworkInformation.effectiveType` (en-US) 属性获得对连接速度的估计。


```js
let preloadVideo = true;
const connection = navigator.connection;
if (connection) {
  if (connection.effectiveType === "slow-2g") {
    preloadVideo = false;
  }
}
```

规范
--

| Specification |
| --- |
| Network Information API # networkinformation-interface |
| Network Information API # connection-attribute |

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

### api.NetworkInformation

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

### api.Navigator.connection

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

参见
--

* 在线（online）和离线（offline）事件 (en-US)
Performance API
===============

Performance API 是一组用于衡量 web 应用性能的标准。

概念和用法
-----

衡量和分析各种性能指标对于确保 web 应用的速度非常重要。Performance API 提供了重要的内置指标，并能够将你自己的测量结果添加到浏览器的性能时间线（performance timeline）中。性能时间线使用高精度的时间戳，且可以在开发者工具中显示。你还可以将相关数据发送到用于分析的端点，以根据时间记录性能指标。

每一个性能指标都使用一个性能条目（`PerformanceEntry`）表示。性能条目有名称（`name`）、持续时间（`duration`）、开始时间（`startTime`）和类型（`type`）。每一个性能指标都继承了 `PerformanceEntry` 接口，并对其进行限定。

大部分性能条目都在不需要任何额外操作的情况下进行记录，并可以通过 `Performance.getEntries()` 或（最好）通过 `PerformanceObserver` 访问。例如，`PerformanceEventTiming` (en-US) 条目用于记录花费的时间超过设定阈值的事件。而 Performance API 也允许你使用 `PerformanceMark` (en-US) 和 `PerformanceMeasure` (en-US) 接口定义和记录自定义事件。

`Performance` 主接口在全局作用域下可通过 `self.performance` 访问，并允许你增加自定义性能条目、清除性能条目，以及查询性能条目。

`PerformanceObserver` 接口允许你监听记录的不同类型的性能条目。

![Performance API 的 UML 图](/zh-CN/docs/Web/API/Performance_API/diagram.svg)

接口
--

`EventCounts` (en-US)

由 `performance.eventCounts` (en-US) 返回的只读映射，其中包含每个事件类型被分派的事件数量。

`LargestContentfulPaint` (en-US)

测量视口范围内可见的图像和文本块的最大渲染时间，从页面开始加载时开始记录。

`Performance`

用于性能测量的主接口。可在 window 和 worker 上下文中通过 `self.performance` 来访问。

`PerformanceElementTiming` (en-US)

测量特定元素的渲染时间戳。

`PerformanceEntry`

封装了单个性能指标的性能时间线条目。所有性能指标都继承自该接口。

`PerformanceEventTiming` (en-US)

测量事件的延迟和首次输入延迟（FID）。

`PerformanceLongTaskTiming`

检测占用渲染并阻止其他任务执行的长任务。

`PerformanceMark` (en-US)

在性能时间线上标记自定义条目。

`PerformanceMeasure` (en-US)

自定义使用两个性能条目表示的时间测量。

`PerformanceNavigationTiming`

测量文档导航事件，例如加载文档所需的时间。

`PerformanceObserver`

监听记录到性能时间线中的新的性能条目。

`PerformanceObserverEntryList` (en-US)

性能观察器（PerformanceObserver）中监测的条目的列表。

`PerformancePaintTiming`

测量网页构建期间的渲染操作。

`PerformanceResourceTiming`

测量网络负载指标，例如重定向开始和结束时间、（fetch）请求开始、DNS 查询开始和结束时间，以及图像、脚本、fetch 调用，等资源的响应开始和结束时间。

`PerformanceServerTiming` (en-US)

表示服务器的相关指标，在响应请求时与 `Server-Timing` HTTP 标头一起发送。

`TaskAttributionTiming` (en-US)

标识任务类型，及用于长任务测量的容器。

教程和指南
-----

* 使用 Performance API
* User Timing（概览）
* Navigation Timing（概览）
* Resource Timing（概览）
规范
--

| Specification |
| --- |
| Element Timing API  |
| Event Timing API  |
| High Resolution Time  |
| Largest Contentful Paint  |
| Layout Instability  |
| Long Tasks API  |
| Navigation Timing Level 2  |
| Paint Timing  |
| Performance Timeline  |
| Resource Timing  |
| Server Timing  |
| User Timing  |

参见
--

* Web 性能
* 学习：Web 性能
WebGLShader
===========

WebGL API 的 **WebGLShader** 可以是一个顶点着色器（vertex shader）或片元着色器（fragment shader）。每个 `WebGLProgram` 都需要这两种类型的着色器。

描述
--

要创建一个 **WebGLShader** 需要使用 `WebGLRenderingContext.createShader`，通过 `WebGLRenderingContext.shaderSource()` 然后挂接 GLSL 源代码 , 最后调用 `WebGLRenderingContext.compileShader()` 完成着色器（shader）的编译。此时 **WebGLShader** 仍不是可用的形式，他需要被添加到一个 `WebGLProgram`里。


```js
function createShader(gl, sourceCode, type) {
  // Compiles either a shader of type gl.VERTEX\_SHADER or gl.FRAGMENT\_SHADER
  var shader = gl.createShader(type);
  gl.shaderSource(shader, sourceCode);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE\_STATUS)) {
    var info = gl.getShaderInfoLog(shader);
    throw "Could not compile WebGL program. \n\n" + info;
  }
  return shader;
}
```


参看 `WebGLProgram` 关于添加着色器的信息。

范例
--

### 创建一个顶点着色器（vertex shader）

注意，有很多其他方式编译和访问着色器（shader）源代码字符串。这些示例仅用于例证说明。


```js
var vertexShaderSource =
  "attribute vec4 position;\n" +
  "void main() {\n" +
  " gl\_Position = position;\n" +
  "}\n";

//从上面例子使用 createShader 函数。
var vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX\_SHADER);
```

### 创建一个片元着色器（fragment shader）


```js
var fragmentShaderSource =
  "void main() {\n" + " gl\_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" + "}\n";

//从上面例子使用 createShader 函数。
var fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT\_SHADER);
```

规范
--

| Specification |
| --- |
| WebGL Specification # 5.8 |

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

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

参阅
--

* `WebGLProgram`
* `WebGLRenderingContext.attachShader()`
* `WebGLRenderingContext.bindAttribLocation()`
* `WebGLRenderingContext.compileShader()`
* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.deleteProgram()`
* `WebGLRenderingContext.deleteShader()`
* `WebGLRenderingContext.detachShader()`
* `WebGLRenderingContext.getAttachedShaders()` (en-US)
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()`
* `WebGLRenderingContext.getShaderParameter()`
* `WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)
* `WebGLRenderingContext.getShaderInfoLog()` (en-US)
* `WebGLRenderingContext.getShaderSource()`
* `WebGLRenderingContext.isProgram()`
* `WebGLRenderingContext.isShader()`
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.shaderSource()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()`
DecompressionStream
===================

Compression Streams API 的 **`DecompressionStream`** 接口是一个用于解压缩数据流的 API。

构造函数
----

`DecompressionStream()`

创建一个新 `DecompressionStream`。

实例属性
----

`DecompressionStream.readable`

返回由此对象控制的 `ReadableStream` 实例。

`DecompressionStream.writable`

返回由此对象控制的 `WritableStream` 实例。

示例
--

在此示例中，使用 gzip 对 blob 进行解压缩。


```js
const ds = new DecompressionStream("gzip");
const decompressedStream = blob.stream().pipeThrough(ds);
```

规范
--

| Specification |
| --- |
| Compression Streams # decompression-stream |

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

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

**`DOMStringMap`** 接口用于 `HTMLElement.dataset` / `SVGElement.dataset` 属性，表示添加到元素的自定义属性的数据。

规范
--

| Specification |
| --- |
| HTML Standard # embedding-custom-non-visible-data-with-the-data-\*-attributes:domstringmap-3 |

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

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

参见
--

* `HTMLElement.dataset` / `SVGElement.dataset`
* 全局属性——`data-*`
TextEncoder
===========

**`TextEncoder`** 接受码位流作为输入，并提供 UTF-8 字节流作为输出。

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

构造函数
----

`TextEncoder()`

返回一个新构造的 `TextEncoder`，它默认使用 UTF-8 编码将码位流转换成字节流。

属性
--

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

`TextEncoder.prototype.encoding` 只读 

总是返回 `utf-8`。

方法
--

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

`TextEncoder.encode()`

接受一个字符串作为输入，返回一个包含 UTF-8 编码的文本的 `Uint8Array`。

`TextEncoder.encodeInto()`

接受一个字符串（编码的对象）和一个目标 `Uint8Array`（用于放入生成的 UTF-8 编码的文本）作为输入，并且返回一个指示编码进度的对象。此方法的性能可能会比更早出现的 `encode()` 方法好一些。

示例
--


```js
const encoder = new TextEncoder();
const view = encoder.encode("€");
console.log(view); // Uint8Array(3) [226, 130, 172]
```

规范
--

| Specification |
| --- |
| Encoding Standard # interface-textencoder |

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

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

参见
--

* `TextDecoder` 接口描述了逆操作。
* Node.js 从 v11.0.0 开始支持全局导出
Range
=====

**`Range`** 接口表示一个包含节点与文本节点的一部分的文档片段。

可以使用 `Document.createRange` 方法创建 Range。也可以用 `Selection` 对象的 `getRangeAt()` 方法或者 `Document` 对象的 `caretRangeFromPoint()` 方法获取 Range 对象。

还可以用 `Range()` 构造函数。

属性
--

*没有继承的属性。*

`Range.collapsed` 只读 

返回一个表示 `Range` 的起始位置和终止位置是否相同的`布尔值` (en-US)。

`Range.commonAncestorContainer` 只读 

返回完整包含 `startContainer` 和 `endContainer` 的、最深一级的`节点`。

`Range.endContainer` 只读 

返回包含 `Range` 终点的`节点`。

`Range.endOffset` 只读 

返回一个表示 `Range` 终点在 `endContainer` 中的位置的数字。

`Range.startContainer` 只读 

返回包含 `Range` 开始的`节点`。

`Range.startOffset` 只读 

返回一个数字，表示 `Range` 在 `startContainer` 中的起始位置。

构造函数
----

`Range()`

返回一个以全局（global）`Document` 作为起点与终点的 `Range` 对象。

方法
--

*该接口没有继承的方法。*

`Range.collapse()`

将 `Range` 折叠到其边界的端点。

`Range.compareBoundaryPoints()` (en-US)

将该 `Range` 的边界与另一个 `Range` 的边界进行比较

`Range.compareNode()` (en-US) 
已弃用

非标准

返回一个常量，表示`节点`是否在 `Range` 的前、后、中、外。

`Range.comparePoint()` (en-US)

返回 -1、0 或 1，分别表示端点在 `Range` 之前、内部还是之后。

`Range.cloneContents()`

返回一个复制 `Range` 中所有节点的`文档片段`。

`Range.cloneRange()`

返回一个拥有和原 `Range` 对象相同端点的克隆的 `Range` 对象。

`Range.createContextualFragment()`

返回从给定的代码字符串创建的`文档片段`。

`Range.deleteContents()`

从 `Document` 中移除 `Range` 内容。

`Range.detach()` (en-US)

将 `Range` 从使用状态释放，提高性能。

`Range.extractContents()`

将 `Range` 的内容从文档树移动到一个`文档片段`。

`Range.getBoundingClientRect()`

返回一个 `DOMRect` 对象，其绑定了 `Range` 的整个内容；这将是通过 `range.getClientRects()` 返回所有边界矩形集合的其中之一。

`Range.getClientRects()`

返回一个 `DOMRect` 列表对象，该列表汇总了 `Range` 中所有元素的 `Element.getClientRects()` 返回结果。

`Range.isPointInRange()` (en-US)

返回一个 `boolean`，表示给点端点是否在 `Range` 中。

`Range.insertNode()`

在 `Range` 开头插入一个`节点`。

`Range.intersectsNode()`

返回一个 `boolean`，表示给定的节点是否与 `Range` 相交。

`Range.selectNode()`

设置 `Range` 包含某个`节点`及其他的内容。

`Range.selectNodeContents()`

设置 `Range` 包含某个`节点`的内容。

`Range.setEnd()`

设置 `Range` 的终点。

`Range.setStart()`

设置 `Range` 的起点。

`Range.setEndAfter()` (en-US)

以另一个`节点`为基准，设置 `Range` 的终点位置。

`Range.setEndBefore()` (en-US)

以另一个`节点`为基准，设置 `Range` 的终点位置。

`Range.setStartAfter()` (en-US)

以另一个`节点`为基准，设置 `Range` 的起点位置。

`Range.setStartBefore()`

以另一个`节点`为基准，设置 `Range` 的起点位置。

`Range.surroundContents()`

将 `Range` 中的内容移动到一个新的`节点`。

`Range.toString()` (en-US)

返回 `Range` 中的文本

规范
--

| Specification |
| --- |
| DOM Standard # interface-range |
| DOM Parsing and Serialization # extensions-to-the-range-interface |
| CSSOM View Module # extensions-to-the-range-interface |

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

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

参见
--

* DOM 接口索引
Response
========

Fetch API 的 `Response` 接口呈现了对一次请求的响应数据。

你可以使用 `Response.Response()` 构造函数来创建一个 `Response` 对象，但通常更可能遇到的情况是，其他的 API 操作返回了一个 Response 对象。例如一个 service worker 的 `Fetchevent.respondWith`，或者一个简单的 `GlobalFetch.fetch()`。

构造函数
----

`Response()`

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

属性
--

`Response.headers` 只读 

包含此 Response 所关联的 `Headers` 对象。

`Response.ok` 只读 

包含了一个布尔值，标示该 Response 成功（HTTP 状态码的范围在 200-299）。

`Response.redirected` 只读 

表示该 Response 是否来自一个重定向，如果是的话，它的 URL 列表将会有多个条目。

`Response.status` 只读 

包含 Response 的状态码（例如 `200` 表示成功）。

`Response.statusText` (en-US) 只读 

包含了与该 Response 状态码一致的状态信息（例如，OK 对应 `200`）。

`Response.type` 只读 

包含 Response 的类型（例如，`basic`、`cors`）。

`Response.url` 只读 

包含 Response 的 URL。

`Response.useFinalURL`

包含了一个布尔值，来标示这是否是该 Response 的最终 URL。

`Response` 实现了 `Body` 接口，所以以下属性亦可用：

`Response.body` 只读 

一个简单的 getter，用于暴露一个 `ReadableStream` 类型的 body 内容。

`Response.bodyUsed` 只读 

包含了一个`布尔值` (en-US)来标示该 Response 是否读取过 `Body`。

方法
--

`Response.clone()`

创建一个 `Response` 对象的克隆。

`Response.error()`

返回一个绑定了网络错误的新的 `Response` 对象。

`Response.redirect()`

用另一个 URL 创建一个新的 `Response`。

`Response` 实现了 `Body` 接口，所以以下方法同样可用：

`Body.arrayBuffer()` (en-US)

读取 `Response` 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 `ArrayBuffer` 格式的 Promise 对象。

`Body.blob()` (en-US)

读取 `Response` 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 `Blob` 格式的 Promise 对象。

`Body.formData()` (en-US)

读取`Response` 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 `FormData` 格式的 Promise 对象。

`Body.json()` (en-US)

读取 `Response` 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 `JSON` 格式的 Promise 对象。

`Body.text()` (en-US)

读取 `Response` 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 `USVString` 格式的 Promise 对象。

示例
--

在我们的基础实例 (点击运行) 中，我们使用了一个简单的函数调用，调用了 `fetch()` 函数来获取一张图片并将其显示在 HTML 的 IMG 标签中，`fetch()` 函数返回了一个 Promise，它使用与资源获取操作相关联的 Response 对象进行解析。你会注意到，由于我们正在请求一张图片，我们需要运行 `Body.blob` (en-US)（`Response` 实现了），以为响应提供正确的 MIME 类型。


```js
const image = document.querySelector(".my-image");
fetch("flowers.jpg")
  .then(function (response) {
    return response.blob();
  })
  .then(function (blob) {
    const objectURL = URL.createObjectURL(blob);
    image.src = objectURL;
  });
```


你也可以使用 `Response.Response()` 这样的构造方法，来创建自定义的 `Response` 对象：


```js
const response = new Response();
```

规范
--

| Specification |
| --- |
| Fetch Standard # response-class |

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

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

参见
--

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

**`HTMLButtonElement`** 接口提供操作 button 元素（除了 `<button>` 对象，这个接口对继承了该对象的元素也有效）的属性和方法。

属性
--

*从父对象`HTMLElement`继承的属性。*

| 名字 | 类型 | 描述 |
| --- | --- | --- |
| `accessKey` | `DOMString` | 一个键盘字符构成的字符串，表明用哪个键盘字符能够访问这个按钮。 |
| `autofocus` | `Boolean` (en-US) | 这个控件是否可以在页面加载时自动得到焦点。但用户选择了其他焦点除外。只有和表单关联的按钮该特性才有效。 |
| `disabled` | `Boolean` (en-US) | 这个控件是否被禁用。被禁用的控件不接受任何输入和点击。 |
| `form` 只读  | `HTMLFormElement` | 
 这个按钮所关联的表单元素。如果这个按钮是一个表单元素的后代元素，那么这个属性的值就是那个表单元素。如果这个按钮不是一个表单元素的后代元素，那么这个数学可以是任意同文档中的表单元素，或者是
 `null` 表明它没有关联任何表单。
  |
| `formAction` | `DOMString` | 
 一个处理提交信息的 URI 资源地址。如果指定该属性，会覆盖拥有该元素的 `<form>`
 元素的 `action` 属性。
  |
| `formEncType` | `DOMString` | 
 表单要提交给服务器处理的内容的类型。如果指定该属性，会覆盖拥有该元素的 `<form>`
 元素的 `enctype` 属性。
  |
| `formMethod` | `DOMString` | 
 浏览器提交表单内容的 HTTP 方法。如果指定该属性，会覆盖拥有该元素的 `<form>`
 元素的 `method` 属性。
  |
| `formNoValidate` | `Boolean` (en-US) | 
 表明这个表单提交时是否需要验证。如果指定该属性，会覆盖拥有该元素的 `<form>`
 元素的 `novalidate` 属性。
  |
| `formTarget` | `DOMString` | 
 一个名字或关键字，用于表明显示服务器响应的页面。如果指定该属性，会覆盖拥有该元素的 `<form>`
 元素的 `target` 属性。
  |
| `labels` 只读  | `NodeList` | 
 一个 `<label>`
 元素表，说明哪些标签是归属这个按钮的。
  |
| `menu` 
实验性
 | `HTMLMenuElement` (en-US) | 如果该按钮 `type="menu"`，被点击的时候应该显示的菜单。 |
| `name` | `DOMString` | 提交到服务器时表单描述该对象的 name。如果指定该属性，不能使用空字符串。 |
| `tabIndex` | long | 用于表示该元素在 tab 按钮跳动过程中的序号的一个数字。 |
| `type` | `DOMString` | 表明按钮的行为。这个属性是枚举类型，可以是以下的值：
 * `"submit"`：这个按钮会提交表单。如果不指定该属性，这是默认值。可以动态改为空值或者无效值。
* `"reset"`：用于重置（清空）表单。
* `"button"`：什么都不做的按钮。通常通过 Javascript 挂载事件。
* `"menu"`：显示菜单的按钮

实验性
。
 |
| `validationMessage` 只读  | `DOMString` | 报告该控件不满足验证要求的，提示给用户的看的信息。如果这个控件没有验证约束（`willValidate` 值为 `false`），或者满足验证的要求，那么这个属性为空字符串。 |
| `validity` 只读  | `ValidityState` | 这个控件当前的验证状态。 |
| `value` | `DOMString` | 这个控件当前的表单值。 |
| `willValidate` | `Boolean` (en-US) | 
 表明这个按钮是否需要在提交前进行验证。如果不需要，这个属性值为`false`
 。
  |

方法
--

*从父对象`HTMLElement`继承的方法。*

| 名字 | 返回类型 | 描述 |
| --- | --- | --- |
| `checkValidity()` | `Boolean` (en-US) | 对按钮元素不支持。 |
| `setCustomValidity(in DOMString error)` | `void` | 对按钮元素不支持。 |

在基于 Gecko 的浏览器中，在表单验证时会使用 `:-moz-submit-invalid` (en-US) 伪类修饰提交按钮。

规范
--

| Specification |
| --- |
| HTML Standard # htmlbuttonelement |

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

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

参见
--

* 实现该接口的 HTML 元素：`<button>`
PictureInPictureWindow
======================

\*\*`PictureInPictureWindow`\*\*接口是一个对象，它可以通过编程的方式获得浮动视频窗口的宽度和高度，并调整浮动视频窗口的大小。

使用`HTMLVideoElement.requestPictureInPicture()`返回一个具有此接口的 promise 值

属性
--

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

`PictureInPictureWindow.width` (en-US) 只读 

获取浮动视频窗宽度。

`PictureInPictureWindow.height` (en-US) 只读 

获取浮动视频窗高度。

Methods
-------

*The `PictureInPictureWindow` interface doesn't inherit any methods.*

Events
------

**The `PictureInPictureWindow` interface doesn't inherit any events.**

`PictureInPictureWindow.resize` (en-US)

Sent to a `PictureInPictureWindow` when the floating video window is resized. The associated event handler is `PictureInPictureWindow.onresize` (en-US).

Examples
--------

Given a `<button>` and a `<video>`, clicking the button will make the video enter the picture-in-picture mode; we then attach an event to print the floating video window dimensions to the console.


```js
const button = document.querySelector("button");
const video = document.querySelector("video");

function printPipWindowDimensions(evt) {
  const pipWindow = evt.target;
  console.log(
    `The floating window dimensions are: ${pipWindow.width}x${pipWindow.height}px`,
  );
  // will print:
  // The floating window dimensions are: 640x360px
}

button.onclick = function () {
  video.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.onresize = printPipWindowDimensions;
  });
};
```

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

| Specification |
| --- |
| Picture-in-Picture # interface-picture-in-picture-window |

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

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

See also
--------

* `Picture-in-Picture_API`
Stream API
==========

Stream API 允许 JavaScript 以编程方式访问从网络接收的数据流，并且允许开发人员根据需要处理它们。

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

概念和用法
-----

流会将你想要从网络接受的资源分成一个个小的分块，然后按位处理它。这正是浏览器在接收用于显示 web 页面的资源时做的事情——视频缓冲区和更多的内容可以逐渐播放，有时候随着内容的加载，你可以看到图像逐渐地显示。

但曾经这些对于 JavaScript 是不可用的。以前，如果我们想要处理某种资源（如视频、文本文件等），我们必须下载完整的文件，等待它反序列化成适当的格式，然后在完整地接收到所有的内容后再进行处理。

随着流在 JavaScript 中的使用，一切发生了改变——只要原始数据在客户端可用，你就可以使用 JavaScript 按位处理它，而不再需要缓冲区、字符串或 blob。

![](/zh-CN/docs/Web/API/Streams_API/concept.png)

还有更多的优点——你可以检测流何时开始或结束，将流链接在一起，根据需要处理错误和取消流，并对流的读取速度做出反应。

流的基础应用围绕着使响应可以被流处理展开。例如，一个成功的 fetch 请求返回的响应体可以暴露为 `ReadableStream`，之后你可以使用 `ReadableStream.getReader()` 创建一个 reader 读取它，使用 `ReadableStream.cancel()` 取消它等等。

更复杂的应用包括使用 `ReadableStream()` 构造函数创建你自己的流，例如进入 service worker 去处理流。

你也可以使用 `WritableStream` 将数据写入流。

**备注：** 你可以在这些文章中找到关于流理论的更多细节和实践——Stream API 概念、使用可读流、使用可读字节流 (en-US)，以及使用可写流 (en-US)。

Stream 接口
---------

### 可读流

`ReadableStream`

表示数据的可读流。用于处理 Fetch API 返回的响应，或者开发者自定义的流（例如通过 `ReadableStream()` 构造的流）。

`ReadableStreamDefaultReader`

表示默认 reader，用于读取来自网络的数据流（例如 fetch 请求）。

`ReadableStreamDefaultController`

表示一个 controller，用于控制 `ReadableStream` 的状态及内部队列。默认的 controller 用于处理非字节流。

### 可写流

`WritableStream`

为将流写入目的地（称为接收器）的过程，提供了一个标准抽象。内置了背压和队列机制。

`WritableStreamDefaultWriter`

表示默认 writer，用于将分块的数据写入可写流中。

`WritableStreamDefaultController`

表示一个 controller，用于控制 `WritableStream` 的状态。当创建一个 `WritableStream` 时，对应的 `WritableStreamDefaultController` 实例会被提供给底层的接收器供其操作。

### 转换流

`TransformStream`

表示一组可转化的数据。

`TransformStreamDefaultController`

提供操作和转换流关联的 `ReadableStream` 和 `WritableStream` 的方法。

### 流相关的 API 和操作

`ByteLengthQueuingStrategy`

当构建流时，提供建立流时所需的内置字节队列策略。

`CountQueuingStrategy`

当构建流时，提供建立流时所需的块计数队列策略。

### 其他 API 扩展

`Request`

当构造一个新的 `Request` 对象后，你可以给它的 `RequestInit` 中的 `body` 属性传入一个 `ReadableStream`。这个 `Request` 对象就可以被传入 `fetch()` 中，开始接收流。

`Response.body`

一个成功的 fetch request 响应体会默认暴露为 `ReadableStream`，从而可以采用相应的 reader 来处理等。

### 字节流相关的接口

`ReadableStreamBYOBReader` (en-US)

表示一个 BYOB（“带你自己的缓冲区”）reader，它可以用于读取由开发人员提供的流数据（例如一个自定义的 `ReadableStream()`）。

`ReadableByteStreamController` (en-US)

表示一个 controller，用于控制 `ReadableStream` 的状态及内部队列。字节流 controller 用于处理字节流。

`ReadableStreamBYOBRequest` (en-US)

表示 `ReadableByteStreamController` (en-US) 中的 BYOB 拉取请求。

示例
--

我们创建了流的示例目录，以配合 Stream API 文档——参见 mdn/dom-examples/streams。示例如下：

* 简单的流 pump：此示例展示了如何消费流并且传递它的数据进入另一个。
* 转换一个 PNG 到灰度：这个示例展示了如何使用可读流将 PNG 转换到灰度。
* 简单随机流：这个示例展示了如何使用一个自定义流去生成随机字符串，并将将它们排入分块，然后重新读取它们。
* 简单拷贝示例：这个示例由简单随机流扩展，展示了一个流如何被拷贝为两个并且生成的流可以被独立的读取。
* 简单 writer：这个示例展示了如何写入可写流，然后解码流并将流内容写入 UI。
* 解压 PNG 分块：此示例展示了如何使用 `pipeThrough()` 通过将 PNG 文件的数据转换为 PNG 分块流来将 ReadableStream 转换为其他数据类型的流。

来自其他开发人员的示例：

* Stream、Service Worker 以及 Fetch 进度指标.
规范
--

| Specification |
| --- |
| Streams Standard # rs-class |
| Streams Standard # ws-class |

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

### api.ReadableStream

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

### api.WritableStream

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

参见
--

* Stream API 概念
* 使用可读流
* 使用可读字节流 (en-US)
* 使用可写流 (en-US)