recursal/MDN huggingface dataset:
CountQueuingStrategy
====================

Streams API 的 **`CountQueuingStrategy`** 接口提供了一个内置的、用于对分块进行计数的队列策略，可以在构造流的时候使用。

构造函数
----

`CountQueuingStrategy()`

创建一个新的 `CountQueuingStrategy` 对象实例。

实例属性
----

`CountQueuingStrategy.highWaterMark` 只读 

在应用背压之前，内部队列可以包含的分块总数。

实例方法
----

`CountQueuingStrategy.size()`

返回 `1`。

示例
--


```js
const queueingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });

const writableStream = new WritableStream(
  {
    // Implement the sink
    write(chunk) {
      // …
    },
    close() {
      // …
    },
    abort(err) {
      console.log("Sink error:", err);
    },
  },
  queueingStrategy,
);

const size = queueingStrategy.size();
```

规范
--

| Specification |
| --- |
| Streams Standard # cqs-class |

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

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

参见
--

* Stream API
* `CountQueuingStrategy()` 构造函数
* 内置队列和队列策略
ResizeObserver
==============

**`ResizeObserver`** 接口监视 `Element` 内容盒或边框盒或者 `SVGElement` 边界尺寸的变化。

**备注：** 内容盒是盒模型放置内容的部分，这意味着边框盒减去内边距和边框的宽度就是内容盒。边框盒包含内容、内边距和边框。有关进一步阐述，参见盒模型。

`ResizeObserver` 避免了通过回调函数调整大小时，通常创建的无限回调循环和循环依赖项。它只能通过在后续的帧中处理 DOM 中更深层次的元素来做到这一点。如果它的实现遵循规范，则应在绘制前和布局后调用 resize 事件。

构造函数
----

`ResizeObserver()`

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

属性
--

无。

方法
--

`ResizeObserver.disconnect()`

取消特定观察者目标上所有对 `Element` 的监听。

`ResizeObserver.observe()`

开始对指定 `Element` 的监听。

`ResizeObserver.unobserve()`

结束对指定 `Element` 的监听。

示例
--

在 resize-observer-text.html（见源码）示例中，我们使用 resize observer 去更改头和段落的 `font-size`，随着 slider 的值被改变，也引起了包含的 `<div>` 的宽度改变。这展示了你可以响应元素大小的变化，即使它们与视口无关。

我们也提供了一个 checkbox 来关闭和打开 observer。如果它是关闭的，文本将不会随着 `<div>` 的宽度改变而改变。

JavaScript 看起来像这样：


```js
const h1Elem = document.querySelector("h1");
const pElem = document.querySelector("p");
const divElem = document.querySelector("body > div");
const slider = document.querySelector('input[type="range"]');
const checkbox = document.querySelector('input[type="checkbox"]');

divElem.style.width = "600px";

slider.addEventListener("input", () => {
  divElem.style.width = `${slider.value}px`;
});

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      // Firefox implements `contentBoxSize` as a single content rect, rather than an array
      const contentBoxSize = Array.isArray(entry.contentBoxSize)
        ? entry.contentBoxSize[0]
        : entry.contentBoxSize;

      h1Elem.style.fontSize = `${Math.max(
 1.5,
 contentBoxSize.inlineSize / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(
 1,
 contentBoxSize.inlineSize / 600,
 )}rem`;
    } else {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentRect.width / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }

  console.log("Size changed");
});

resizeObserver.observe(divElem);

checkbox.addEventListener("change", () => {
  if (checkbox.checked) {
    resizeObserver.observe(divElem);
  } else {
    resizeObserver.unobserve(divElem);
  }
});
```

规范
--

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

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

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

参见
--

* 盒模型
* `PerformanceObserver`
* `IntersectionObserver`（Intersection Observer API 的一部分）
WheelEvent
==========

**`WheelEvent`** 接口表示用户滚动鼠标滚轮或类似的输入设备时触发的事件。

**备注：** 该事件为标准规定的滚轮事件接口。早期的浏览器实现过 `MouseWheelEvent` 和 `MouseScrollEvent` 两种滚轮事件接口，但这两种接口皆非标准，加之各浏览器间对其兼容性极差。因而开发者应使用该标准事件接口取代这两个非标准接口。

**备注：** 不要混淆 `wheel` 事件和 `scroll` 事件。`wheel` 事件的默认动作取决于浏览器实现。因此 `wheel` 事件不一定会触发 `scroll` 事件。即便 `wheel` 事件引发了文档内容的滚动行为，也不表示 `wheel` 事件中的 `delta*` 值恰好反映文档内容的滚动方向。因此，不要依赖 `delta*` 属性获知文档内容的滚动方向。而应该在 `scroll` 事件中监听目标的 `scrollLeft` 和 `scrollTop` 的变化以推断滚动方向。

Event

UIEvent

MouseEvent

WheelEvent构造函数
----

`WheelEvent()` (en-US)

创建一个 `WheelEvent` 对象。

属性
--

*该接口继承了父接口 `MouseEvent`、`UIEvent` 和 `Event` 的属性。*

`WheelEvent.deltaX` 只读 

返回一个 `double` 值，该值表示滚轮的横向滚动量。

`WheelEvent.deltaY` 只读 

返回一个 `double` 值，该值表示滚轮的纵向滚动量。

`WheelEvent.deltaZ` 只读 

返回一个 `double` 值，该值表示滚轮的 z 轴方向上的滚动量。

`WheelEvent.deltaMode` 只读 

返回一个 `unsigned long` 值，该值表示上述各 `delta*` 的值的单位。允许的值如下：

| 常量 | 值 | 描述 |
| --- | --- | --- |
| `WheelEvent.DOM_DELTA_PIXEL` | `0x00` | `delta*` 的单位为像素。 |
| `WheelEvent.DOM_DELTA_LINE` | `0x01` | `delta*` 单位为行。每一次点击鼠标都会滚动一行内容，行高的计算取决于浏览器。 |
| `WheelEvent.DOM_DELTA_PAGE` | `0x02` | `delta*` 单位为页。每一次点击鼠标都会滚动一页内容。 |

`WheelEvent.wheelDelta` 只读  
已弃用

返回一个整数（32 位），表示以像素为单位的距离。

`WheelEvent.wheelDeltaX` 只读  
已弃用

返回一个整数，表示水平滚动量。

`WheelEvent.wheelDeltaY` 只读  
已弃用

返回一个整数，表示垂直滚动量。


**备注：** 元素：mousewheel 事件有关于已弃用的属性（`wheelDelta`、`wheelDeltaX` 和 `wheelDeltaY`）的额外说明。

方法
--

*该接口本身未定义方法，但继承了父接口 `MouseEvent`、`UIEvent`、`Event` 的方法。*

规范
--

| Specification |
| --- |
| UI Events # interface-wheelevent |

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

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

参见
--

* `wheel` 事件
* 该接口取代的过时接口：
    + `MouseScrollEvent`（Gecko 内核浏览器）
HTMLHeadElement
===============

**`HTMLHeadElement`** 接口包含一个文档的描述信息（或者称作元信息）这类对象继承了`HTMLElement`接口的全部属性和方法。

属性
--

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

`HTMLHeadElement.profile` 
已弃用

空格隔开的一个或多个用于表示元信息 URI 的`DOMString`。

方法
--

*没有特殊的方法；继承了父对象 `HTMLElement` 的方法。*

规范
--

| Specification |
| --- |
| HTML Standard # htmlheadelement |

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

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

另见
--

* 对应的 HTML 元素是根据 `<head>`实现。
StorageEvent
============

当前页面使用的 storage 被其他页面修改时会触发 StorageEvent 事件。

[译者：事件在同一个域下的不同页面之间触发，即在 A 页面注册了 storge 的监听处理，只有在跟 A 同域名下的 B 页面操作 storage 对象，A 页面才会被触发 storage 事件]

Event

StorageEvent

**备注：** 尽管这个事件已经早在 Gecko 2.0 时就已存在，但是并不符合规范。老的事件模型直到 `nsIDOMStorageEventObsolete` 确定才被表现出来。

方法描述
----
```

void initStorageEvent(
  in DOMString typeArg,
  in boolean canBubbleArg,
  in boolean cancelableArg,
  in DOMString keyArg,
  in DOMString oldValueArg,
  in DOMString newValueArg,
  in DOMString urlArg,
  in nsIDOMStorage storageAreaArg
);
```

属性
--

*除了下面列出的属性以外，`StorageEvent` 还继承了父接口 `Event` 的属性。*

`key` (en-US) 只读 

被修改的键名。当被 `clear()` 方法清除后该属性值为 `null`。

`newValue` (en-US) 只读 

修改后的新值。当被 `clear()` 方法清除或者从存储中移除该键值对时，`newValue` 的值为 `null` 。

`oldValue` (en-US) 只读 

该键（`key`）在修改前的旧值。在添加新键值对时由于没有原始值，该属性值为 `null`。

`storageArea` (en-US) 只读 

被操作的 `Storage` 对象。

`url` (en-US) 只读 

`key` 发生改变的对象所在文档的 URL 地址。

方法
--

### initStorageEvent()

类似 DOM 中的初始化事件，即初始化新创建的 Storage 对象的属性。
```

void initStorageEvent(
  in DOMString typeArg,
  in boolean canBubbleArg,
  in boolean cancelableArg,
  in DOMString keyArg,
  in DOMString oldValueArg,
  in DOMString newValueArg,
  in DOMString urlArg,
  in nsIDOMStorage storageAreaArg
);
```


参数：

`typeArg`

事件名

`canBubbleArg`

布尔值，代表是否可以通过 dom 冒泡

`cancelableArg`

布尔值，代表是否可以注销事件

`keyArg`

事件结果时被改变的值对应的属性名称

`oldValueArg`

旧值

`newValueArg`

新值

`urlArg`

事件初始化时页面的 url

`storageAreaArg`

发生在哪个 storage 对象上

规范
--

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

参阅
--

* Specification
btoa()
======

**`btoa()`** 方法可以将一个*二进制字符串*（例如，将字符串中的每一个字节都视为一个二进制数据字节）编码为 Base64 编码的 ASCII 字符串。

你可以使用这个方法来对可能遇到通信问题的数据进行编码，然后使用 `atob()` 方法来对数据进行解码。例如，你可以对 ASCII 中的控制字符（值为 0 到 31 的字符）进行编码。

语法
--


```js
btoa(stringToEncode)
```

### 参数

`stringToEncode`

一个需要编码的*二进制字符串*。

### 返回值

一个包含 `stringToEncode` 的 Base64 表示的 ASCII 字符串。

### 异常

`InvalidCharacterError` `DOMException`

该字符串包含非单字节的字符。参见下方的“Unicode 字符串”。

示例
--


```js
const encodedData = btoa("Hello, world"); // 编码字符串
const decodedData = atob(encodedData); // 解码字符串
```

Unicode 字符串
-----------

`btoa()` 函数将一个 JavaScript 字符串作为其参数。而 JavaScript 字符串使用 UTF-16 字符编码表示：在这种编码中，字符串使用一串 16 比特（2 字节）的单元来表示。每一个 ASCII 字符会被填充到每个单元的第一个字节中，而很多其他的字符则不然。

根据设计，Base64 仅将二进制数据作为其输入。而在 JavaScript 字符串中，这意味着每个字符只能使用一个字节表示。所以，如果你将一个字符串传递给 `btoa()`，而其中包含了需要使用超过一个字节才能表示的字符，你就会得到一个错误，因为这个字符串不能被看作是二进制数据：


```js
const ok = "a";
console.log(ok.codePointAt(0).toString(16)); // 61：占用 < 1 byte

const notOK = "✓";
console.log(notOK.codePointAt(0).toString(16)); // 2713：占用 > 1 byte

console.log(btoa(ok)); // YQ==
console.log(btoa(notOK)); // error
```


如果你需要使用 `btoa()` 将 Unicode 文本编码为 ASCII，一种选择是将字符串中的每一个 16 比特的单元都转换为使用一个字节的单元。例如：


```js
// convert a Unicode string to a string in which
// each 16-bit unit occupies only one byte
function toBinary(string) {
  const codeUnits = new Uint16Array(string.length);
  for (let i = 0; i < codeUnits.length; i++) {
    codeUnits[i] = string.charCodeAt(i);
  }
  const charCodes = new Uint8Array(codeUnits.buffer);
  let result = "";
  for (let i = 0; i < charCodes.byteLength; i++) {
    result += String.fromCharCode(charCodes[i]);
  }
  return result;
}

// a string that contains characters occupying > 1 byte
const myString = "☸☹☺☻☼☾☿";

const converted = toBinary(myString);
const encoded = btoa(converted);
console.log(encoded); // OCY5JjomOyY8Jj4mPyY=
```


如果你按上述的方法进行了编码，你当然需要一种方法来进行解码：


```js
function fromBinary(binary) {
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < bytes.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }
  const charCodes = new Uint16Array(bytes.buffer);
  let result = "";
  for (let i = 0; i < charCodes.length; i++) {
    result += String.fromCharCode(charCodes[i]);
  }
  return result;
}

const decoded = atob(encoded);
const original = fromBinary(decoded);
console.log(original); // ☸☹☺☻☼☾☿
```


参见 Base64 术语的 Solution #1 – escaping the string before encoding it 示例中的 `utf8_to_b64` 和 `b64_to_utf8` 函数。

规范
--

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

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

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

参见
--

* `core-js` 中有对 `btoa` 的 polyfill
* `data` URL
* `atob()`
* Base64
ErrorEvent
==========

**`ErrorEvent`** 事件对象在脚本发生错误时产生，它可以提供发生错误的脚本文件的文件名，以及发生错误时所在的行号等信息。

属性
--

除了从 `Event` 接口继承来的属性外，还有下面这些自身属性。

`ErrorEvent.prototype.message` 只读 

一个`字符串`，包含了所发生错误的描述信息。

`ErrorEvent.prototype.filename` 只读 

一个 `字符串`，包含了发生错误的脚本文件的文件名。

`ErrorEvent.prototype.lineno` 只读 

一个数字，包含了错误发生时所在的行号。

`ErrorEvent.prototype.colno` 只读 

一个数字，包含了错误发生时所在的列号。

`ErrorEvent.prototype.error` 只读  
实验性

发生错误时所抛出的 `Error` 对象。

构造函数
----

`ErrorEvent()`

根据传入的参数构造 `ErrorEvent` 实例。

方法
--

除了从 `Event` 接口继承来的方法外，没有其他方法。

规范
--

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

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

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

参见
--

* 使用 web worker，最有可能引发此事件的对象
Gamepad
=======

Gamepad API 的 `Gamepad` 接口，定义了一个独立的游戏手柄或其他控制器，允许访问控制器的信息，譬如按钮按下的状态、坐标输入的位置。游戏手柄或其他控制器，允许访问如按钮按下，和 ID 等信息。

Gamepad 对象有两种方式返回值：通过 `gamepadconnected` 和 `gamepaddisconnected` (en-US) 事件的 `gamepad` 属性，或者在任意位置抓取 `Navigator.getGamepads()` 方法返回的数组。

属性
--

`Gamepad.axes` (en-US) 只读 

一个表示控制器设备上存在的坐标轴的数组 (比如控制器摇杆)。

`Gamepad.buttons` (en-US) 只读 

一个 `gamepadButton` 对象的数组，表示设备上的按键的数组。

`Gamepad.connected` (en-US) 只读 

一个表示控制器是否仍然连接着系统的布尔值。

`Gamepad.displayId` (en-US) 只读 

*返回与 `VRDisplay` 相关的 `VRDisplay.displayId` (en-US) (如果有相关) — 控制器所控制的 `VRDisplay` 场景。*

`Gamepad.id` (en-US) 只读 

一个包含着控制器标识信息的 `DOMString`。

`Gamepad.index` (en-US) 只读 

一个自增的整形数字，对于当前连接到系统的每一个设备是唯一的。

`Gamepad.mapping` (en-US) 只读 

一个指示浏览器是否被映射到某个已知布局的字符串。

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

一个表示上次控制器数据更新时间的 `DOMHighResTimeStamp` 。

`Gamepad.hand` (en-US) 只读 

一个枚举项，定义了控制器是用哪只手拿着的，或最可能是哪只手拿着的。

`Gamepad.hapticActuators` (en-US) 只读 

一个包含 `GamepadHapticActuator` (en-US) 对象的数组，其中表示控制器上可用的触觉反馈硬件。

`Gamepad.pose` (en-US) 只读  
实验性

一个表示 WebVR 控制器姿态方位信息的 `GamepadPose` 对象 (比如其在 3D 空间中的位置和方向)。

示例
--


```js
window.addEventListener("gamepadconnected", function (e) {
  console.log(
    "控制器已连接与 %d 位：%s. %d 个按钮，%d 个坐标方向。",
    e.gamepad.index,
    e.gamepad.id,
    e.gamepad.buttons.length,
    e.gamepad.axes.length,
  );
});
```

规范
--

| Specification |
| --- |
| Gamepad # gamepad-interface |
| Gamepad Extensions # partial-gamepad-interface |

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

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

参见
--

* 使用 Gamepad API
* Gamepad API
HTMLCollection
==============

**`HTMLCollection`** 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合（与 `arguments` 相似的类数组 (array-like) 对象），还提供了用来从该集合中选择元素的方法和属性。

**备注：** 由于历史原因（DOM4 之前，实现该接口的集合只能包含 HTML 元素），该接口被称为 `HTMLCollection`。

HTML DOM 中的 `HTMLCollection` 是即时更新的（live）；当其所包含的文档结构发生改变时，它会自动更新。因此，最好是创建副本（例如，使用 `Array.from`）后再迭代这个数组以添加、移动或删除 DOM 节点。

属性
--

`HTMLCollection.length` 只读 

返回集合当中子元素的数目。

方法
--

`HTMLCollection.item()`

根据给定的索引（从 0 开始），返回具体的节点。如果索引超出了范围，则返回 `null`。

访问 `collection[i]`（在索引 `i` 超出范围时会返回 `undefined`）的替代方法。这在非 JavaScript DOM 的实现中非常有用。

`HTMLCollection.namedItem()`

根据 ID 返回指定节点，若不存在，则根据字符串所表示的 `name` 属性来匹配。根据 name 匹配只能作为最后的依赖，并且只有当被引用的元素支持 `name` 属性时才能被匹配。如果不存在符合给定 name 的节点，则返回 `null`。

访问 `collection[name]`（在 `name` 不存在时会返回 `undefined`）的替代方法。这在非 JavaScript DOM 的实现中非常有用。

在 JavaScript 中使用
----------------

`HTMLCollection` 还通过将其成员的名称和索引直接以属性的形式公开。HTML ID 可能会包含在 ID 中合法的 `:` 和 `.` 字符，这时就需要使用括号表达式来访问属性。目前，`HTMLCollection` 不能识别纯数字的 ID，因为这与数组形式的访问相冲突（虽然 HTML5 允许使用纯数字的 ID）。

例如，假定在文档中有一个 `<form>` 元素，且它的 `id` 是 `myForm`：


```js
var elem1, elem2;

// document.forms is an HTMLCollection

elem1 = document.forms[0];
elem2 = document.forms.item(0);

alert(elem1 === elem2); // shows: "true"

elem1 = document.forms.myForm;
elem2 = document.forms.namedItem("myForm");

alert(elem1 === elem2); // shows: "true"

elem1 = document.forms["named.item.with.periods"];
```

规范
--

| Specification |
| --- |
| DOM Standard # interface-htmlcollection |

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

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

参见
--

* `NodeList`
* `HTMLFormControlsCollection` (en-US)、`HTMLOptionsCollection` (en-US)
DOMMatrix
=========

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

\*\*`DOMMatrix`\*\*接口代表 4x4 矩阵，适合 2D 和 3D 操作。

一个 4x4 矩阵适于描绘任何 3D 的旋转（rotation）和过渡（translation）。

此接口在 Web workers 里应该是可用的，虽然某些实现现在还不允许。

属性
--

*此接口从`DOMMatrixReadOnly` (en-US)继承属性，虽然某些属性被修改为非只读的。*

`m11`, `m12`, `m13`, `m14`, `m21`, `m22`, `m23`, `m24`, `m31`, `m32`, `m33`, `m34`, `m41`, `m42`, `m43`, `m44`

代表一个 4x4 矩阵的每个组成部分的 double 值。

`a`, `b`, `c`, `d`, `e`, `f` 只读 

代表了 2D 旋转和过渡所需要的一个 4x4 矩阵的每个组成部分的 double 值。它们是这个矩阵的一些组成的别名：

| `2D` | `3D 等价值` |
| --- | --- |
| `a` | `m11` |
| `b` | `m12` |
| `c` | `m21` |
| `d` | `m22` |
| `e` | `m41` |
| `f` | `m42` |

方法
--

*此接口从`DOMMatrixReadOnly` (en-US)继承方法。*

`DOMMatrixReadOnly.multiplySelf()`

返回自身，一个`DOMMatrix`，它的新内容是原始矩阵乘以指定的矩阵`DOMMatrix`的结果。

`DOMMatrixReadOnly.preMultiplySelf()`

返回自身，一个`DOMMatrix`，它的新内容是指定的矩阵`DOMMatrix`乘以原始矩阵的结果。

`DOMMatrix.translateSelf()`

返回自身，一个`DOMMatrix`，它的新内容是矩阵被指定向量转换后的结果。

`DOMMatrix.scaleSelf()`

返回自身，一个`DOMMatrix`，它的新内容是矩阵的 x 和 y 维度被指定因子缩放后的结果，对齐指定原点。

`DOMMatrix.scale3dSelf()`

返回自身，一个`DOMMatrix`，它的新内容是矩阵的 x, y 和 z 维度被指定因子缩放后的结果，对齐指定原点。

`DOMMatrix.scaleNonUniformSelf()`

返回自身，一个`DOMMatrix`，它的新内容是矩阵的 x, y 和 z 维度被各自维度的指定因子缩放后的结果，对齐指定原点。

`DOMMatrix.rotateSelf()`

返回自身，一个`DOMMatrix`，它的新内容是原始矩阵被指定角度旋转后的结果，对齐指定原点。

`DOMMatrix.rotateFromVectorSelf()`

返回自身，一个`DOMMatrix`，它的新内容是原始矩阵被指定角度旋转后的结果，该角度在指定向量和 (1,0) 之间，对齐指定原点。

`DOMMatrix.rotateAxisAngleSelf()`

返回自身，一个`DOMMatrix`，它的新内容是原始矩阵被指定角度和指定向量旋转后的结果。

`DOMMatrix.skewXSelf()`

返回自身，一个`DOMMatrix`，它的新内容是原始矩阵被指定因子沿 x 轴倾斜后的结果。

`DOMMatrix.skewYSelf()`

返回自身，一个`DOMMatrix`，它的新内容是原始矩阵被指定因子沿 y 轴倾斜后的结果。

`DOMMatrix.invertSelf()`

返回自身，一个`DOMMatrix`，它的新内容是原始矩阵求逆后的结果。如果不能求逆，所有的组成部分会被设为 NaN，并且`is2D() 返回` `false`。

`DOMMatrix.setMatrixValue()`

返回自身，一个`DOMMatrix`，描述了一个矩阵，它的变换（transformation）和被参数指定的 CSS `transform`函数一样。

规范
--

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMMatrix |

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

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

参见
--

* 它的不可修改部分，`DOMMatrixReadOnly` (en-US)
Long Tasks API
==============

目的
--

\*Long Tasks，\*这是一个实验性 API，它可以直观地告诉我们哪些任务执行耗费了 50 毫秒或更多时间。50 毫秒这个阈值标准来源于《RAIL Model》中 "Response: process events in under 50ms" 章节。

阻塞主线程达 50 毫秒或以上的任务会导致以下问题：

* `可交互时间` 延迟
* 严重不稳定的交互行为 (轻击、单击、滚动、滚轮等) 延迟（High/variable input latency）
* 严重不稳定的事件回调延迟（High/variable event handling latency）
* 紊乱的动画和滚动（Janky animations and scrolling）
概念
--

长任务（Long task）API 使用的一些关键术语或思想。

### 长任务（Long task）

任何连续不间断的且主 UI 线程繁忙 50 毫秒及以上的时间区间。比如以下常规场景：

* 长耗时的事件回调（long running event handlers）
* 代价高昂的回流和其他重绘（expensive reflows and other re-renders）
* 浏览器在超过 50 毫秒的事件循环的相邻循环之间所做的工作（work the browser does between different turns of the event loop that exceeds 50 ms）
### 浏览上下文的罪魁容器

浏览上下文的罪魁容器，简称“容器”，指任务发生在其中的顶层页面（the top level page）、iframe、嵌入插槽（embed）或对象（object）。

### 清单（Attributions）

即执行任务的容器清单。针对没有在顶层页面容器内执行的任务，`containerId`、`containerName`和`containerSrc`字段可以用来提供任务源信息。

用法
--


```js
var observer = new PerformanceObserver(function (list) {
  var perfEntries = list.getEntries();
  for (var i = 0; i < perfEntries.length; i++) {
    // Process long task notifications:
    // report back for analytics and monitoring
    // ...
  }
});
// register observer for long task notifications
observer.observe({ entryTypes: ["longtask"] });
// Long script execution after this will result in queueing
// and receiving "longtask" entries in the observer.
```

接口
--

`PerformanceLongTaskTiming`

返回长任务实例。

`TaskAttributionTiming` (en-US)

返回长任务中涉及的工作及其关联的框架上下文信息。

规范
--

| Specification |
| --- |
| Long Tasks API # sec-PerformanceLongTaskTiming |

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

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

相关推荐
----

* GitHub repository 包含文档和代码范例。
* PerfPlanet article on Long Tasks API from 20th December 2017.
SVGElement
==========

所有 SVG DOM 类的父类。

EventTarget

Node

Element

SVGElement属性
--

`SVGElement.dataset`只读 

A `DOMStringMap` object which provides a list of key/value pairs of named data attributes which correspond to custom data attributes attached to the element. These can also be defined in SVG using attributes of the form `data-\* (en-US)`, where `*` is the key name for the pair. This works just like HTML's `HTMLElement.dataset` property and HTML's `data-*` global attribute.

`SVGElement.id`只读 

A `DOMString` representing the value of the `id` attribute on the given element, or the empty string if `id` is not present.

`SVGElement.xmlbase`只读 

A `DOMString` corresponding to the `xml:base (en-US)` attribute on the given element.

`SVGElement.ownerSVGElement`只读 

An `SVGSVGElement` referring to the nearest ancestor `<svg>` element. `null` if the given element is the outermost `<svg>` element.

`SVGElement.viewportElement`只读 

The `SVGElement`, which established the current viewport. Often, the nearest ancestor `<svg>` element. `null` if the given element is the outermost `<svg>` element.

方法
--

*`SVGElement` 类本身没有方法，但拥有从父类 `Element` 继承的方法。*

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGElement |

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

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

相关链接
----

* HTML `data-*` 属性
* SVG `data-\* (en-US)` 属性
* 使用数据属性
HTMLDivElement
==============

**`HTMLDivElement`** 接口提供了一些特殊属性（它也继承了通常的 `HTMLElement` 接口）来操作 `<div>` 元素。

属性
--

*属性继承自父类，`HTMLElement`。*

`HTMLDivElement.align` 
已弃用

这是一个 `DOMString` 表示一个指示元素内容相对于周围内容的对齐方式的可枚举属性。可取的值有 `"left"`，`"right"`，`"justify"`，和 `"center"`。

方法
--

*没有特有的方法；方法继承自父类，`HTMLElement`。*

规范
--

| Specification |
| --- |
| HTML Standard # htmldivelement |

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

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

参见
--

* 此 HTML 元素实现了这个接口：`<div>`。
Storage
=======

作为 Web Storage API 的接口，**`Storage`** 提供了访问特定域名下的会话存储或本地存储的功能，例如，可以添加、修改或删除存储的数据项。

如果你想要操作一个域名的会话存储，可以使用 `Window.sessionStorage`；如果想要操作一个域名的本地存储，可以使用 `Window.localStorage`。

属性
--

`Storage.length` 只读 

返回一个整数，表示存储在 `Storage` 对象中的数据项数量。

方法
--

`Storage.key()`

该方法接受一个数值 n 作为参数，并返回存储中的第 n 个键名。

`Storage.getItem()`

该方法接受一个键名作为参数，返回键名对应的值。

`Storage.setItem()`

该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。

`Storage.removeItem()`

该方法接受一个键名作为参数，并把该键名从存储中删除。

`Storage.clear()`

调用该方法会清空存储中的所有键名。

示例
--

这里我们通过调用 `localStorage` 来访问一个 `Storage` 对象。首先，使用 `!localStorage.getItem('bgcolor')` 测试本地存储中是否包含该数据项。如果包含，则运行 `setStyles()` 函数，该函数使用 `localStorage.getItem()` 来获取数据项，并使用这些值更新页面样式。如果不包含，我们运行另一个函数 `populateStorage()`，该函数使用 `localStorage.setItem()` 设置数据项，然后运行 `setStyles()`。


```js
if (!localStorage.getItem("bgcolor")) {
  populateStorage();
} else {
  setStyles();
}

function populateStorage() {
  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
  localStorage.setItem("font", document.getElementById("font").value);
  localStorage.setItem("image", document.getElementById("image").value);

  setStyles();
}

function setStyles() {
  const currentColor = localStorage.getItem("bgcolor");
  const currentFont = localStorage.getItem("font");
  const currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = `#${currentColor}`;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}
```


**备注：** 有关实际运行的例子，详见 Web Storage 演示。

规范
--

| Specification |
| --- |
| HTML Standard # storage |

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

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

相关链接
----

* 使用 Web Storage API
* `Window.localStorage`
* `Window.sessionStorage`
* `CacheStorage`
CanvasGradient
==============

**`CanvasGradient`** 接口表示描述渐变的不透明对象。通过 `CanvasRenderingContext2D.createLinearGradient()` 或 `CanvasRenderingContext2D.createRadialGradient()` 的返回值得到。

属性
--

*不透明对象，没有暴露的属性。*

方法
--

*没有继承的方法。*

`CanvasGradient.addColorStop()`

添加一个由偏移（`offset`）和颜色（`color`）定义的断点到渐变中。如果偏移值不在 0 到 1 之间，将抛出`INDEX_SIZE_ERR 错误，如果颜色值不能被解析为有效的 CSS 颜色值 `<color>`，将抛出 SYNTAX_ERR`错误。

规范
--

| Specification |
| --- |
| HTML Standard # canvasgradient |

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

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

参见
--

* 创建方法在 `CanvasRenderingContext2D`。
* `<canvas>` 元素及其有关接口 `HTMLCanvasElement`。
HTMLLIElement
=============

**`HTMLLIElement`** 接口公开了特定的属性和方法 (超出了常规 `HTMLElement` 接口所定义的接口，它通过继承可用于操作列表元素。

属性
--

*从其父级 `HTMLElement` 继承属性。*

`HTMLLIElement.type` 
已弃用

是`DOMString`表示项目符号的类型 `"disc"`，`"square"` 或 `"circle"`。由于定义列表类型的标准方法是通过 CSS `list-style-type`属性，应当使用 CSSOM 方法通过脚本设置它。

`HTMLLIElement.value`

是`long`指示给定`<ol>`中*列表元素*的序号位置。它反映了 HTML `<li>`元素的`value`属性，并且可以小于`0`。如果`<li>`元素不是`<ol>`元素的子元素，则该属性没有意义。

方法
--

*没有具体方法; 从其父级 `HTMLElement` 继承属性。*

规范
--

| Specification |
| --- |
| HTML Standard # htmllielement |

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

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

参见
--

* 实现了此接口的 HTML 元素：`<li>`