recursal/MDN huggingface dataset:
HTMLSelectElement.add()
=======================

**`HTMLSelectElement.add()`** 方法用于向 `select` 元素的 `option` 元素集合中添加一个元素。

语法
--
```

collection.add(item[, before]);
```

### 参数

* *item* 是一个 `HTMLOptionElement` 或 `HTMLOptGroupElement`
* *before* 是可选的，是集合中的一个元素或者类型为 *long* 的一个索引，表示上面的 *item* 在此之前插入。如果这个参数是 `null`（或索引不存在），新元素会添加在集合的末尾。
### 异常

* 如果传入的 *item* 是 `HTMLSelectElement` (en-US) 的祖先元素，`HierarchyRequestError` 类型的 `DOMError` 会被抛出。
示例
--

### 从零开始创建元素


```js
var sel = document.createElement("select");
var opt1 = document.createElement("option");
var opt2 = document.createElement("option");

opt1.value = "1";
opt1.text = "Option: Value 1";

opt2.value = "2";
opt2.text = "Option: Value 2";

sel.add(opt1, null);
sel.add(opt2, null);

/\*
 概念上与下述代码相同：

 <select>
 <option value="1">Option: Value 1</option>
 <option value="2">Option: Value 2</option>
 </select>
\*/
```


before 参数是可选的，因此也可以这样写：


```js
...
sel.add(opt1);
sel.add(opt2);
...
```

### 添加到已存在集合的末尾


```js
var sel = document.getElementById("existingList");

var opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";

sel.add(opt, null);

/\*
 获取这个已存在的 select 对象：

 <select id="existingList">
 <option value="1">Option: Value 1</option>
 <option value="2">Option: Value 2</option>
 </select>

 将其变成这样：

 <select id="existingList">
 <option value="1">Option: Value 1</option>
 <option value="2">Option: Value 2</option>
 <option value="3">Option: Value 3</option>
 </select>
\*/
```


同样，before 参数是可选的，因此也可以这样写：


```js
...
sel.add(opt);
...
```

### 插入到已存在的集合中间


```js
var sel = document.getElementById("existingList");

var opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";

sel.add(opt, sel.options[1]);

/\*
 获取这个已存在的 select 对象：

 <select id="existingList">
 <option value="1">Option: Value 1</option>
 <option value="2">Option: Value 2</option>
 </select>

 将其变成这样：

 <select id="existingList">
 <option value="1">Option: Value 1</option>
 <option value="3">Option: Value 3</option>
 <option value="2">Option: Value 2</option>
 </select>
\*/
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-select-add-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLSelectElement.setCustomValidity()
=====================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`HTMLSelectElement.setCustomValidity()`** 方法设置指定的验证消息为选择元素的自定义验证消息。

使用空字符串来表示该元素没有自定义的验证错误。

语法
--


```js
selectElt.setCustomValidity(string);
```

### Parameters

* *string* 将作为错误信息包含到 `DOMString` 之中。
Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-cva-setcustomvalidity-dev |

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

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

查看更多
----

* Form validation. (en-US)
HTMLSelectElement.remove()
==========================

**`HTMLSelectElement.remove()`** 方法从一个 select 元素中删除指定序数的 option 元素。没有传参时为删除当前元素本身：ChildNode.remove() (en-US)。

语法
--
```

collection.remove(index);
```

### 参数

* `index` 是从 option `HTMLOptionElement` 集合中要移除元素的序数。如果序数对应的元素不存在，调用这个方法就没有任何效果。
例子
--


```js
var sel = document.getElementById("existingList");
sel.remove(1);

/\*
 上面的代码会将下面的 select 元素结构：

 <select id="existingList" name="existingList">
 <option value="1">Option: Value 1</option>
 <option value="2">Option: Value 2</option>
 <option value="3">Option: Value 3</option>
 </select>

 变成这样：

 <select id="existingList" name="existingList">
 <option value="1">Option: Value 1</option>
 <option value="3">Option: Value 3</option>
 </select>
\*/
```

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

| Specification |
| --- |
| HTML Standard # dom-select-remove |

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

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

参考
--

* `ChildNode.remove` (en-US)，当没有参数时 `HTMLSelectElement` (en-US) 调用的是这个方法
* `HTMLSelectElement` (en-US) 实现了这个方法。
HTMLSelectElement.selectedIndex
===============================

**`HTMLSelectElement.selectedIndex`** 是一个长整型数，它反映了被选中的第一个 `<option>` 元素的索引值。值为 -1 时表明没有元素被选中。

语法
--
```

var index = selectElem.selectedIndex;
selectElem.selectedIndex = index;
```

示例
--

### HTML


```html
<p id="p">selectedIndex: 0</p>

<select id="select">
  <option selected>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
  <option>Option D</option>
  <option>Option E</option>
</select>
```

### JavaScript


```js
var selectElem = document.getElementById("select");
var pElem = document.getElementById("p");

// 当有新的<option>元素被选中时
selectElem.addEventListener("change", function () {
  var index = selectElem.selectedIndex;
  // 把 index 数据添加到 p 元素中
  pElem.innerHTML = "selectedIndex: " + index;
});
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-select-selectedindex-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLSelectElement.checkValidity()
=================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`HTMLSelectElement.checkValidity()`** 会检查元素是否有任何输入约束条件，并且检查值是否符合约束条件。如果值是不符合约束条件的，浏览器就会在该元素上触发一个可以撤销的 `invalid` 事件，然后返回 `false`.

Syntax
------


```js
var result = selectElt.checkValidity();
```

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

| Specification |
| --- |
| HTML Standard # dom-cva-checkvalidity-dev |

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

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

See also
--------

* Form validation. (en-US)
TextMetrics.width
=================

只读的 **`TextMetrics.width`** 属性，包含文本先前的宽度（行内盒子的宽度），使用 CSS 像素计算。

语法
--
```

readonly metrics.width;
```

示例
--

事先给定 `<canvas>` 元素：


```html
<canvas id="canvas"></canvas>
```


你可以使用下面的代码得到一个 `TextMetrics` 对象：


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-textmetrics-width-dev |

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

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

参见
--

* `TextMetrics`
MediaQueryList.matches
======================

`MediaQueryList` 接口的 **`matches`** 只读属性是一个布尔值，如果 `document` 当前匹配媒体查询列表，该属性返回 `true`，否则返回 `false`。

通过侦听发生在 `MediaQueryList` 的 `change` 事件，当 `matches` 的值发生变化时，你可以收到通知。

值
-

一个布尔值，如果 `document` 目前匹配媒体查询列表，该值为 `true`，反之为 `false`。

示例
--

该示例通过使用 `orientation` 媒体查询特性来创建一个媒体查询，以检测视口横纵方向的变化：


```js
function addMQListener(mq, callback) {
  if (mq.addEventListener) {
    mq.addEventListener("change", callback);
  } else {
    mq.addListener(callback);
  }
}

addMQListener(window.matchMedia("(orientation:landscape)"), (event) => {
  if (event.matches) {
    /\* 现在是横向 \*/
  } else {
    /\* 现在是纵向 \*/
  }
});
```

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylist-matches |

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

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

参见
--

* 媒体查询
* 在代码中使用媒体查询
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent`
MediaQueryList: change event
============================

当媒体查询的支持状况改变时，`MediaQueryList` 接口的 **`change`** 事件触发。

语法
--

在像 `addEventListener()` 这样的方法中使用该事件的名字，或者设置一个事件处理函数属性。


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

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

事件类型
----

`MediaQueryListEvent` 类型。继承自 `Event`。

Event

MediaQueryListEvent事件属性
----

*`MediaQueryListEvent` 接口的属性继承自它的父接口，`Event`.*

`MediaQueryListEvent.matches` (en-US) 只读 

 一个布尔值，如果 `document`
 当前匹配媒体查询列表，该值为 `true`，反之为 `false`。


`MediaQueryListEvent.media` (en-US) 只读 

一个字符串，代表着一个序列化后的媒体查询。

示例
--


```js
var mql = window.matchMedia("(max-width: 600px)");

mql.onchange = (e) => {
  if (e.matches) {
    /\* 视口等于或小于 600 像素 \*/
    console.log("This is a narrow screen — less than 600px wide.");
  } else {
    /\* 视口大于 600 像素 \*/
    console.log("This is a wide screen — more than 600px wide.");
  }
};
```

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylist-onchange |

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

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

参见
--

* 媒体查询
* 在代码中使用媒体查询
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent`
MediaQueryList.addListener()
============================

`MediaQueryList`接口的 **`addListener()`** 方法向`MediaQueryListener`添加一个侦听器，该侦听器将运行自定义回调函数以响应媒体查询状态的更改。

从本质上讲，这是`EventTarget.addEventListener()`的别名，用于向后兼容。较旧的浏览器应使用`addListener`而不是`addEventListener`，因为 MediaQueryList 仅从较新的浏览器中的 EventTarget 继承。

语法
--
```

MediaQueryList.addListener(func)
```

### 参数

func

表示你要在媒体查询状态更改时运行的回调函数的函数或函数引用。在原始实现中，回调是一个非标准的`MediaQueryListListener` (en-US)对象。在新的实现中，使用标准事件机制，回调是标准函数，事件对象是`MediaQueryListEvent`，它继承自`Event`。

### 返回值

Void.

例子
--


```js
var mql = window.matchMedia("(max-width: 600px)");

function screenTest(e) {
  if (e.matches) {
    /\* the viewport is 600 pixels wide or less \*/
    para.textContent = "This is a narrow screen — less than 600px wide.";
    document.body.style.backgroundColor = "red";
  } else {
    /\* the viewport is more than than 600 pixels wide \*/
    para.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "blue";
  }
}

mql.addListener(screenTest);
```

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylist-addlistener |

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

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

参见
--

* Media queries (en-US)
* Using media queries from code (en-US)
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent`
ResizeObserverEntry.devicePixelContentBoxSize
=============================================

`ResizeObserverEntry` 接口的只读属性 **`devicePixelContentBoxSize`** 在回调运行时，返回一个包含被监听元素设备像素大小的数组。

值
-

一个数组，包含被监听元素的设备像素大小的对象。该数组在支持多列的场景中出现多个部分的元素时是必要的。数组中的每个对象都包含以下两个属性：

`blockSize`

被监听的元素在块方向上的内容盒的设备像素长度。对于具有水平 `writing-mode` 的盒子，这是垂直尺寸或者高度；如果 writing-mode 是垂直的，这是水平的尺寸或者宽度。

`inlineSize`

被监听的元素在内联方向上内容盒的设备像素长度。对于具有水平 `writing-mode` 的盒子，这是水平尺寸或者宽度；如果 writing-mode 是垂直的，这是垂直的尺寸或者高度。


**备注：** 更多关于书写模式和块以及内联尺寸的解释，请阅读处理不同方向的文本。

示例
--

以下片段取自文章使用 devicePixelContentBox 完美地渲染。由于 `ResizeObserver` 的回调函数在绘制前和布局后调用。这提供了一个精确记录物理像素大小的机会，以确保将画布像素与物理像素一对一映射。


```js
const observer = new ResizeObserver((entries) => {
  const entry = entries.find((entry) => entry.target === canvas);
  canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
  canvas.height = entry.devicePixelContentBoxSize[0].blockSize;

  /\* … render to canvas … \*/
});
observer.observe(canvas, { box: "device-pixel-content-box" });
```

规范
--

| Specification |
| --- |
| Resize Observer # dom-resizeobserverentry-devicepixelcontentboxsize |

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

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

`ResizeObserverEntry` 接口的只读属性 **`borderBoxSize`** 在回调运行时，返回一个包含被监听元素的新的边框盒大小的数组。

值
-

一个数组，包含被监听元素的新边框盒大小的对象。该数组在支持多列的场景中出现多个部分的元素时是必要的。数组中的每个对象都包含以下两个属性：

`blockSize`

被监听的元素在块方向上的长度。对于具有水平 `writing-mode` 的盒子，这是垂直尺寸或者高度；如果 writing-mode 是垂直的，这是水平的尺寸或者宽度。

`inlineSize`

被监听的元素在内联方向上的长度。对于具有水平 `writing-mode` 的盒子，这是水平尺寸或者宽度；如果 writing-mode 是垂直的，这是垂直的尺寸或者高度。


**备注：** 更多关于书写模式和块以及内联尺寸的解释，请阅读处理不同方向的文本。

示例
--


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

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

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

规范
--

| Specification |
| --- |
| Resize Observer # dom-resizeobserverentry-borderboxsize |

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

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

`ResizeObserverEntry` 接口的只读属性 **`contentBoxSize`** 在回调运行时，返回一个包含被监听元素的内容盒大小的数组。

值
-

一个数组，包含被监听元素的新内容盒大小的对象。该数组在支持多列的场景中出现多个部分的元素时是必要的。数组中的每个对象都包含以下两个属性：

`blockSize`

被监听的元素在块方向上的内容盒的长度。对于具有水平 `writing-mode` 的盒子，这是垂直尺寸或者高度；如果 writing-mode 是垂直的，这是水平的尺寸或者宽度。

`inlineSize`

被监听的元素在内联方向上内容盒的长度。对于具有水平 `writing-mode` 的盒子，这是水平尺寸或者宽度；如果 writing-mode 是垂直的，这是垂直的尺寸或者高度。


**备注：** 更多关于书写模式和块以及内联尺寸的解释，请阅读处理不同方向的文本。

示例
--

 以下示例取自 resize-observer-border-radius.html
 （见源码）。这个示例包含绿色的盒子，大小按照视口大小的百分比变化。当视口的大小改变，盒子的圆角会和盒子的大小成比例的变化。我们可以使用百分比的形式来设置 `border-radius`，但是很快就得到了丑陋的椭圆形角；以下这个解决方案给你提供了漂亮的方形角，可以随盒子的大小缩放。


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

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

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

规范
--

| Specification |
| --- |
| Resize Observer # dom-resizeobserverentry-contentboxsize |

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

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

`ResizeObserverEntry` 接口的只读属性 `contentRect` 在回调运行时，返回一个包含被监听元素大小的 `DOMRectReadOnly` 对象。注意，该属性比 `ResizeObserverEntry.borderBoxSize` 或 `ResizeObserverEntry.contentBoxSize` 有着更好的支持，但是它是在 Resize Observer API 早期实现遗留下来的，出于对浏览器的兼容性原因，仍然保留在规范中，并且在未来的版本中可能被弃用。

值
-

一个 `DOMRectReadOnly` 对象，包含着 `target` 属性表示的元素的新的大小。

如果 `target` 是一个 HTML `元素`，返回的 `contentRect` 是元素的内容盒。如果 `target` 是 `SVGElement`，返回的 `contentRect` 是 SVG 的边界框。

示例
--

以下示例取自 resize-observer-text.html（见源码）。它使用了一个简单的功能检测测试来查看浏览器是否支持较新的 `ResizeObserverEntry.contentBoxSize` 属性——如果支持，则使用它来获取需要的尺寸数据。如果不支持，则使用 `contentRect`。


```js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize.inlineSize / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(
 1,
 entry.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`;
    }
  }
});

resizeObserver.observe(divElem);
```

规范
--

| Specification |
| --- |
| Resize Observer # dom-resizeobserverentry-contentrect |

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

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

`ResizeObserverEntry` 接口的只读属性 **`target`** 返回一个正在被监听的 `Element` 或 `SVGElement` 的引用。

值
-

一个正在被监听的 `Element` 或 `SVGElement` 元素。

示例
--

 以下示例取自 resize-observer-border-radius.html
 （见源码）。这个示例包含绿色的盒子，大小按照视口大小的百分比变化。当视口的大小改变，盒子的圆角会和盒子的大小成比例的变化。我们可以使用百分比的形式来设置 `border-radius`，但是很快就得到了丑陋的椭圆形角；以下这个解决方案给你提供了漂亮的方形角，可以随盒子的大小缩放。

为了获取到被监听元素的引用，以便我们在每次更改后可以更新它的 `border-radius` 值，我们可以使用每个条目的 `target` 属性——`entry.target.style.borderRadius`。


```js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      entry.target.style.borderRadius = `${Math.min(
 100,
 entry.contentBoxSize.inlineSize / 10 +
 entry.contentBoxSize.blockSize / 10,
 )}px`;
    } else {
      entry.target.style.borderRadius = `${Math.min(
 100,
 entry.contentRect.width / 10 + entry.contentRect.height / 10,
 )}px`;
    }
  }
});

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

规范
--

| Specification |
| --- |
| Resize Observer # dom-resizeobserverentry-target |

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

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

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

`SourceBufferList` 接口的只读属性 **`length`** 返回列表中 `SourceBuffer` 对象的数量。

值
-

一个无符号长整型数值。

示例
--

待定

规范
--

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebufferlist-length |

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

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

参见
--

* `MediaSource`
* `SourceBuffer`
IDBFactory.open
===============

**`IDBFactory.open`** 方法用于打开一个数据库连接。本方法立即返回一个 `IDBOpenDBRequest` (en-US) 对象，但打开数据库的操作是异步执行的。

连接数据库在一个单独的线程中进行，包括以下几个步骤：

1. 指定数据库已经存在时：
    * 等待 `versionchange` 操作完成。
    * 如果数据库已计划删除，那等着删除完成。
2. 如果已有数据库版本高于给定的 `version`，中止操作并返回类型为 `VersionError` 的 `DOMError`。
3. 如果已有数据库版本低于给定的 `version`，触发一个 `versionchange` 操作。
4. 如果数据库不存在，创建指定名称的数据库，将版本号设置为给定版本，如果给定版本号，则设置为 1，and no object stores.
5. 创建数据库连接。

如果操作成功执行，将触发 `success` 事件 on the request object that is returned from this method, with its `result` attribute set to the new `IDBDatabase` object for the connection.

If an error occurs while the database connection is being opened, then an error event is fired on the request object returned from this method.

Syntax
------

For the current standard:
```

 IDBOpenDBRequest open (DOMString name, [EnforceRange] optional unsigned long long version);
```


For the experimental version with `options` (see below):
```

IDBOpenDBRequest open (DOMString name, optional IDBOpenDBOptions options);
```

示例
--

For the current standard:


```js
var request = window.indexedDB.open("toDoList", 4);
```


For the experimental version with `options` (see below):


```js
var request = window.indexedDB.open("toDoList", {
  version: 4,
  storage: "temporary",
});
```

参数
--

name

数据库名称

version

指定数据库版本，当你想要更改数据库格式（比如增加对象存储，非增加记录），必须指定更高版本，通过 versionchange 来更改

options (version and storage) 
非标准

In Gecko, since version 26, you can include an `options` object as a parameter of `IDBFactory.open` that contains the `version` number of the database, plus a storage value that specifies whether you want to use `permanent` (the default value) storage for the IndexedDB, or `temporary` storage (aka shared pool.) See Firefox bug 785884 for more details. This is a non-standard feature that we are looking to standardise sometime in the future.


**备注：** Data in temporary storage persists until the global limit for the pool is reached. The global limit calculation is relatively complex, but we are considering changing it (see Firefox bug 968272). When the global limit is reached, then data for the least recently used origin is deleted. There's also a group limit (eTLD+1 group/domain) which is currently 20% of the global limit. All requets that would exceed the group limit are just rejected.

返回
--

`IDBOpenDBRequest` (en-US)

The request object on which subsequent events related to this request are fired.

Exceptions
----------

This method may raise a `DOMException` with a DOMError (en-US) of the following types:

| Exception | 描述 |
| --- | --- |
| `TypeError` | The value of version is zero or a negative number or not a number. |

规范
--

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbfactory-open② |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLDialogElement：close 事件
==========================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`close`** 事件在对话框被关闭时，会在对应的 `HTMLDialogElement` 对象上被触发。

该事件不可取消，也不会冒泡。

语法
--


```js
target.onclose = functionRef;
```

### 参数

`functionRef` 是一个函数名称或函数表达式。该函数接受一个 `Event` 对象作为它唯一的参数。

每次只能给一个对象添加 `onclose` 回调。你可能更喜欢使用 `EventTarget.addEventListener()` 方法，因为它更加灵活。

规范
--

| Specification |
| --- |
| HTML Standard # event-close |

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

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

参见
--

* HTML `<dialog>` 元素
WebRTC 协议介绍
===========

本文介绍了基于 WebRTC API 构建的协议。

ICE
---

交互式连接创建（Interactive Connectivity Establishment，ICE）是一个允许你的浏览器和对端浏览器建立连接的协议框架。在实际的网络当中，有很多原因能导致简单的从 A 端到 B 端直连不能如愿完成。这需要绕过阻止建立连接的防火墙，给你的设备分配一个唯一可见的地址（通常情况下我们的大部分设备没有一个固定的公网地址），如果路由器不允许主机直连，还得通过一台服务器转发数据。ICE 通过使用以下几种技术完成上述工作。

STUN
----

NAT 的会话穿越功能Session Traversal Utilities for **NAT** (STU**N**) (缩略语的最后一个字母是 NAT 的首字母) 是一个允许位于 NAT 后的客户端找出自己的公网地址，判断出路由器阻止直连的限制方法的协议。

客户端通过给公网的 STUN 服务器发送请求获得自己的公网地址信息，以及是否能够被（穿过路由器）访问。

![An interaction between two users of a WebRTC application involving a STUN server.](/zh-CN/docs/Web/API/WebRTC_API/Protocols/webrtc-stun.png)

NAT
---

网络地址转换协议Network Address Translation (NAT) 用来给你的（私网）设备映射一个公网的 IP 地址的协议。一般情况下，路由器的 WAN 口有一个公网 IP，所有连接这个路由器 LAN 口的设备会分配一个私有网段的 IP 地址（例如 192.168.1.3）。私网设备的 IP 被映射成路由器的公网 IP 和唯一的端口，通过这种方式不需要为每一个私网设备分配不同的公网 IP，但是依然能被外网设备发现。

一些路由器严格地限定了谁能连接内网的设备。这种情况下，即使 STUN 服务器识别了该内网设备的公网 IP 和端口的映射，依然无法和这个内网设备建立连接。这种情况下就需要转向 TURN 协议。

TURN
----

一些路由器使用一种“对称型 NAT”的 NAT 模型。这意味着路由器只接受和对端先前建立的连接（就是下一次请求建立新的连接映射）。

NAT 的中继穿越方式Traversal Using Relays around NAT (TURN) 通过 TURN 服务器中继所有数据的方式来绕过“对称型 NAT”。你需要在 TURN 服务器上创建一个连接，然后告诉所有对端设备发包到服务器上，TURN 服务器再把包转发给你。很显然这种方式是开销很大的，所以只有在没得选择的情况下采用。

![An interaction between two users of a WebRTC application involving STUN and TURN servers.](/zh-CN/docs/Web/API/WebRTC_API/Protocols/webrtc-turn.png)

SDP
---

会话描述协议Session Description Protocol (SDP) 是一个描述多媒体连接内容的协议，例如分辨率，格式，编码，加密算法等。所以在数据传输时两端都能够理解彼此的数据。本质上，这些描述内容的元数据并不是媒体流本身。

从技术上讲，SDP 并不是一个真正的协议，而是一种数据格式，用于描述在设备之间共享媒体的连接。

记录 SDP 远远超出了本文档的范围。但是，这里有几件事值得注意。

### 结构体

SDP 由一行或多行 UTF-8 文本组成，每行以一个字符的类型开头，后跟等号（“ =”），然后是包含值或描述的结构化文本，其格式取决于类型。以给定字母开头的文本行通常称为“字母行”。例如，提供媒体描述的行的类型为“m”，因此这些行称为“m 行”。

### 获取更多信息

要了解有关 SDP 的更多信息，请参见以下有用的资源：

* 规范：RFC 4566: SDP: Session Description Protocol
* IANA registry of SDP parameters
HTMLCollection.length
=====================

**`HTMLCollection.length`** 属性返回 `HTMLCollection` 中的元素数量。

值
-

一个正整数，表示 `HTMLCollection` 中元素的数量。

示例
--

`length` 属性在 DOM 编程中通常很有用。它通常用于测试集合的长度，去看它是否真的存在。它也通常用于 `for` 循环中的迭代器，如下示例。


```js
// All the elements with the class ".test" in the document
var items = document.getElementsByClassName("test");

// For each test item in the list,
// append the entire element as a string of HTML
var gross = "";
for (var i = 0; i < items.length; i++) {
  gross += items[i].innerHTML;
}

// gross is now all the HTML for the test elements
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-htmlcollection-length① |

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

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

`HTMLCollection.item()` 由位置获取元素。

### 参数

index

想要被返回的 Node 的位置。元素在 HTML Collection 中的顺序和他们在源文档的顺序保持一致。

### 返回值

指定的 index 的`Node` , 如果 index 小于 0 或者不小于它的长度属性则返回 null。

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

HTMLCollection 中 `item()` 方法返回一个编号的元素，在 JavaScript 中把 HTMLCollection 当成是一个是数组并用数组符号去索引十分简单。

Example
-------


```js
var c = document.images; // This is an HTMLCollection
var img0 = c.item(0); // You can use the item( ) method this way
var img1 = c[1]; // But this notation is easier and more common
```

See also
--------

* `NodeList.item()`