recursal/MDN huggingface dataset:
Range.endContainer
==================

**`Range.endContainer`** 是一个只读属性。它会返回`Range`对象结束的`Node`。如果要改变一个节点结束的位置，使用方法`Range.setEnd()`或者相似的方法。

语法
--
```

endRangeNode = range.endContainer;
```

示例
--


```js
var range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
endRangeNode = range.endContainer;
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-endcontainer① |

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

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

参见
--

* The DOM interfaces index (en-US)
Range.endOffset
===============

只读属性 **`Range.endOffset`** 返回代表 `Range` 结束位置在 `Range.endContainer` 中的偏移值的数字。

如果 `endContainer` 的 `Node` 类型为 `Text` (en-US), `Comment`，或 `CDATASection`，偏移值是 `endContainer` 节点开头到 `Range` 末尾的总字符个数。对其他类型的 `Node` ， `endOffset` 指 `endContainer` 开头到 `Range` 末尾的总 `Node` 个数。如需修改 `endOffset` 的值，使用 `Range.setEnd` 方法。

语法
--
```

endRangeOffset = range.endOffset;
```

示例
--


```js
var range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
endRangeOffset = range.endOffset;
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-endoffset① |

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

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

参见
--

* The DOM interfaces index (en-US)
Range.cloneContents()
=====================

**`Range.cloneContents()`** 返回一个 `DocumentFragment`，它是 `Range` 中所有的 `Node` 对象的副本。

使用" DOM 事件"添加的“事件侦听器”在克隆过程中不会被复制。HTML 属性事件与“DOM Core cloneNode”方法一样被复制。“HTML id 属性”也将被克隆，这可能导致通过克隆导致无效的文档。

Partially selected nodes include the parent tags necessary to make the document fragment valid.

语法
--
```

documentFragment = range.cloneContents();
```

例子
--


```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
documentFragment = range.cloneContents();
document.body.appendChild(documentFragment);
```

规范
--

| Specification |
| --- |
| DOM Standard # dom-range-clonecontents |

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

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

参考
--

* The DOM interfaces index (en-US)
Range.setStartBefore()
======================

**`Range.setStartBefore()`** 方法相对另一个 `Node`来设置一个`Range` 的开始位置。`Range`的开始节点（focusNode）的父节点，和 `referenceNode`的父节点是同一个。

Syntax
------
```

range.setStartBefore(referenceNode);
```

### Parameters

*referenceNode*

一个`Range`新的开始位置上的`Node`.

Example
-------


```js
var range = document.createRange();
var referenceNode = document.getElementsByTagName("div").item(0);

range.setStartBefore(referenceNode);
```

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

| Specification |
| --- |
| DOM Standard # dom-range-setstartbefore |

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

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

See also
--------

* The DOM interfaces index (en-US)
Range.collapse()
================

**`Range.collapse()`** 方法向边界点折叠该 `Range` 。

折叠后的 `Range` 为空，不包含任何内容。

要确定 `Range` 是否已折叠，使用`Range.collapsed` 属性。

语法
--
```

range.collapse(toStart);
```

### 参数

*toStart* 可选

一个布尔值： `true` 折叠到 `Range` 的 start 节点，`false` 折叠到 end 节点。如果省略，则默认为 false 
实验性
`.`

例子
--


```js
var range = document.createRange();

referenceNode = document.getElementsByTagName("div").item(0);
range.selectNode(referenceNode);
range.collapse(true);
```

规范
--

| Specification |
| --- |
| DOM Standard # dom-range-collapse |

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

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

参阅
--

* The DOM interfaces index (en-US)
Range.setStart()
================

**`Range.setStart()`** 方法用于设置 `Range`的开始位置。

如果起始节点类型是 `Text`、`Comment` 或 `CDATASection`之一，那么 `startOffset` 指的是从起始节点算起字符的偏移量。对于其他 `Node` 类型节点，`startOffset` 是指从起始结点开始算起子节点的偏移量。

如果设置的起始位点在结束点之下（在文档中的位置），将会导致选区折叠，起始点和结束点都会被设置为指定的起始位置。

语法
--
```

range.setStart(startNode, startOffset);
```

### 参数

*startNode*

`startNode` 用于设定 `Range`的起始位置。

*startOffset*``

必须为不小于 0 的整数。表示从`startNode`的开始位置算起的偏移量。

例子
--


```js
var range = document.createRange();
var startNode = document.getElementsByTagName("p").item(2);
var startOffset = 0;
range.setStart(startNode, startOffset);
```

规范
--

| Specification |
| --- |
| DOM Standard # dom-range-setstart |

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

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

参见
--

* The DOM interfaces index (en-US)
Range.getBoundingClientRect()
=============================

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

**`Range.getBoundingClientRect()`** 返回一个 `DOMRect` 对象，该对象将范围中的内容包围起来；即该对象是一个将范围内所有元素的边界矩形包围起来的矩形（译者注：关于边界矩形，可以参考 Minimum Bouding Rectangles）。

此方法可用于确定文本区域中选中的部分或光标的视窗坐标。关于返回值的详细信息，参见 `Element.getBoundingClientRect()`。

语法
--
```

boundingRect = range.getBoundingClientRect()
```

示例
--

### HTML


```html
<div id="highlight"></div>
<p>
  This example positions a "highlight" rectangle behind the contents of a range.
  The range's content <b>starts here</b> and continues on until it
  <b>ends here</b>. The bounding client rectangle contains everything selected
  in the range.
</p>
```

### CSS


```css
#highlight {
  background: yellow;
  position: absolute;
  z-index: -1;
}

p {
  width: 200px;
}
```

### JavaScript


```js
const range = document.createRange();
range.setStartBefore(document.getElementsByTagName("b").item(0), 0);
range.setEndAfter(document.getElementsByTagName("b").item(1), 0);

const clientRect = range.getBoundingClientRect();
const highlight = document.getElementById("highlight");
highlight.style.left = `${clientRect.x}px`;
highlight.style.top = `${clientRect.y}px`;
highlight.style.width = `${clientRect.width}px`;
highlight.style.height = `${clientRect.height}px`;
```

### 结果

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-range-getboundingclientrect |

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

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

参见
--

* `Range.getClientRects()` - 对于非矩形的范围（如选择部分换行了）会返回更细致的结果。
* `Element.getBoundingClientRect()`
* `Document.caretPositionFromPoint()` - 使用视窗坐标获取节点范围。
Range.createContextualFragment()
================================

**`Range.createContextualFragment()`** 方法通过以 range 的开头（选定节点的父级）作为上下文节点来调用 HTML 片段解析算法 或者 XML 片段解析算法来返回 `DocumentFragment`。如果 range 属于一个其 HTMLness bit 被设置了的 `Document` 则会应用 HTML 片段解析算法。在 HTML 的情况下，如果上下文节点为 html，由于历史原因，将使用 body 作为上下文来调用片段解析算法。

语法
--
```

documentFragment = range.createContextualFragment(tagString)
```

### 参数

`tagString`

包含要转换为文档片段的文本和标签的文本。

示例
--


```js
var tagString = "<div>I am a div node</div>";
var range = document.createRange();

// 使文档中第一个 div 的父级成为上下文节点
range.selectNode(document.getElementsByTagName("div").item(0));
var documentFragment = range.createContextualFragment(tagString);
document.body.appendChild(documentFragment);
```

规范
--

| Specification |
| --- |
| DOM Parsing and Serialization # ref-for-dom-range-createcontextualfragment-2 |

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

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

See also
--------

* The DOM interfaces index (en-US)
Range.selectNode()
==================

**`Range.selectNode()`** 方法将 `Range` 设置为包含整个 `Node` 及其内容。`Range` 的起始和结束节点的父节点与 *referenceNode* 的父节点相同。

语法
--
```

range.selectNode(referenceNode);
```

### 参数

*referenceNode*

`Range` 要包含的 `Node`。

示例
--


```js
var range = document.createRange();
var referenceNode = document.getElementsByTagName("div").item(0);

range.selectNode(referenceNode);
```

规范
--

| Specification |
| --- |
| DOM Standard # dom-range-selectnode |

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

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

参见
--

* The DOM interfaces index (en-US)
Range.commonAncestorContainer
=============================

**`Range.commonAncestorContainer`** 只读属性，返回目标节点的共有祖先节点。因而需要注意：selectNode 方法中的该值为目标节点的父节点，selectNodeContents 方法中的该值为其本身。

在某些跨节点的选取操作时，取得最大"公约数"的节点为`commonAncestorContainer。`即`Range.startContainer` 和 `Range.endContainer` 相同的节点是目标节点的 共有祖先节点。

更改 `Node`, 请使用 setStart setEnd 及这两种方法的延伸方法 `Range`.

语法
--
```

rangeAncestor = range.commonAncestorContainer;
```

示例
--


```js
var range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
rangeAncestor = range.commonAncestorContainer;
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-commonancestorcontainer② |

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

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

更多
--

* DOM 接口相关内容 (en-US)
Range.collapsed
===============

**`Range.collapsed`** 是只读属性。它返回一个 `Boolean` (en-US) 值表示是否起始点和结束点是同一个位置。如果返回 `true` 表示`Range` 的起始位置和结束位置重合，`false` 表示不重合。

一个折叠的`Range` 是空的，不包含内容，表示 Dom 树中的一个点。collapsed 属性是只读的。可以调用 `Range.collapse()` 方法来折叠选区。

语法
--
```

isCollapsed = range.collapsed;
```

例子
--


```js
var range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
isCollapsed = range.collapsed;
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-collapsed① |

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

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

参阅
--

* The DOM interfaces index (en-US)
Range.startOffset
=================

**`Range.startOffset`** 是一个只读属性，用于返回一个表示 `Range` 在 `startContainer` 中的起始位置的数字。

如果 `startContainer` 是一个文本（`Text` (en-US)）、注释（`Comment`）或者 CDATA 区块（`CDATASection`）节点，那么返回的偏移量是从 `startContainer` 开始到 `Range` 的边界点的字符数量。对于其他的节点类型， `startOffset` 返回 `startContainer` 到边界点的子节点数量。

可使用`Range.setStart` 方法改变 `Range` 的 `startOffset` 位置。

语法
--
```

startRangeOffset = range.startOffset;
```

示例
--


```js
range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
startRangeOffset = range.startOffset;
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-startoffset① |

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

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

参见
--

* The DOM interfaces index (en-US)
Range.cloneRange()
==================

\*\*`Range.cloneRange()`\*\*方法返回一个 range 对象，并且该对象的范围边界点与被克隆的 range 对象相同。

克隆的对象是复制过来的，而非引用，所以这两个对象双方各自做出的改变，都不会影响另一方。

语法
--
```

clone = range.cloneRange();
```

Example
-------


```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
clone = range.cloneRange();
```

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

| Specification |
| --- |
| DOM Standard # dom-range-clonerange |

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

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

See also
--------

* The DOM interfaces index (en-US)
Range()
=======

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

构造函数 **`Range()`** 返回一个新创建的 `Range` 对象，新创建的对象属于全局 `Document` 对象。

语法
--
```

range = new Range()
```

示例
--

在下面的例子中，我们通过构造函数`Range()`创建了一个新的 range，并且使用`Range.setStartBefore()` 和`Range.setEndAfter()` (en-US) 分别设置了起始位置。然后，通过方法`window.getSelection()`和`Selection.addRange()`选中了选区 range。

### HTML


```html
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
<p>Fourth paragraph.</p>
```

### JavaScript


```js
const paragraphs = document.querySelectorAll("p");

// 创建 Range 对象
const range = new Range();

// Range 起始位置在段落 2
range.setStartBefore(paragraphs[1]);

// Range 结束位置在段落 3
range.setEndAfter(paragraphs[2]);

// 获取 selection 对象
const selection = window.getSelection();

// 添加光标选择的范围
selection.addRange(range);
```

### 结果

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-range② |

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

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

参见
--

* The DOM interfaces index (en-US)
Range.intersectsNode()
======================

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

**`Range.intersectsNode()`** 方法返回一个布尔值，表明其给定的 `Node` 节点是否与`Range`的范围相交

Syntax
------
```

bool = range.intersectsNode( referenceNode )
```

### Parameters

*referenceNode*

与`Range`做比较的`Node`节点

Example
-------


```js
var range = document.createRange();

range.selectNode(document.getElementsByTagName("div").item(0));
var bool = range.intersectsNode(document.getElementsByTagName("p").item(0));
```

Specification
-------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-intersectsnode① |

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

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

See also
--------

* The DOM interfaces index (en-US)
Range.surroundContents
======================

**`Range.surroundContents()`** 方法将 `Range` 对象的内容移动到一个新的节点，并将新节点放到这个范围的起始处。

这个方法与 `newNode.appendChild(range.extractContents()); range.insertNode(newNode)` 等价。应用以后， `newNode` 包含在 `range` 的边界点中。

然而，如果 `Range` 断开了一个非 `Text` (en-US) 节点，只包含了节点的其中一个边界点，就会抛出异常。也就是说，不像上述的等价方法，如果节点仅有一部分被选中，则不会被克隆，整个操作会失败。

语法
--
```

range.surroundContents(newParent);
```

### 参数

`newParent`

一个包含内容的 `Node`。

示例
--

### HTML
```

<span class="header-text">Put this in a headline</span>
```

### JavaScript
```

const range = document.createRange();
const newParent = document.createElement('h1');

range.selectNode(document.querySelector('.header-text'));
range.surroundContents(newParent);
```

### 结果

规范
--

| Specification |
| --- |
| DOM Standard # dom-range-surroundcontents |

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

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

参见
--

* The DOM interfaces index (en-US)
Range.selectNodeContents()
==========================

**`Range.selectNodeContents()`** 方法用于设置 `Range`，使其包含一个 `Node` 的内容。

`Range` 的起始和结束节点的父节点即为引用节点。 `startOffset` 为 0, `endOffset` 则是引用节点包含的字符数或子节点个数。

语法
--
```

range.selectNodeContents(referenceNode);
```

### 参数

*referenceNode*

此 `Node` 中的内容被包含在 `Range` 中。

示例
--


```js
range = document.createRange();
referenceNode = document.getElementsByTagName("div")[0];
range.selectNodeContents(referenceNode);
```

### 实时样例

这个例子让用户使用按钮选择或取消选择一个段落。`Document.createRange()`、 `Range.selectNodeContents()` 和 `Selection.addRange()` 用于选择内容。`Window.getSelection()` 和 `Selection.removeAllRanges()` 用于取消选择。

#### HTML
```

<p id="p"><b>Use the buttons below</b> to select or deselect the contents of this paragraph.</p>
<button id="select-button">Select paragraph</button>
<button id="deselect-button">Deselect paragraph</button>
```


#### JavaScript
```

const p = document.getElementById('p');
const selectButton = document.getElementById('select-button');
const deselectButton = document.getElementById('deselect-button');

selectButton.addEventListener('click', e => {
  // Clear any current selection
  const selection = window.getSelection();
  selection.removeAllRanges();

  // Select paragraph
  const range = document.createRange();
  range.selectNodeContents(p);
  selection.addRange(range);
});

deselectButton.addEventListener('click', e => {
  const selection = window.getSelection();
  selection.removeAllRanges();
});
```


#### 结果

规范
--

| Specification |
| --- |
| DOM Standard # dom-range-selectnodecontents |

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

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

参见
--

* The DOM interfaces index (en-US)
Range.extractContents()
=======================

**`Range.extractContents()`** 方法移动了`Range` 中的内容从文档树到`DocumentFragment`（文档片段对象）。

使用 DOM 事件添加的事件侦听器在提取期间不会保留。HTML 属性事件将按`Node.cloneNode()`方法的原样保留或复制。HTML id 属性也会被克隆，如果提取了部分选定的节点并将其附加到文档中，则可能导致无效的文档。

克隆了部分选定的节点，以包括使文档片段有效所需的父标记。

Syntax
------
```

documentFragment = range.extractContents();
```

Example
-------


```js
var range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
var documentFragment = range.extractContents();
document.body.appendChild(documentFragment);
```

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

| Specification |
| --- |
| DOM Standard # dom-range-extractcontents |

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

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

See also
--------

* The DOM interfaces index (en-US)
Range.getClientRects()
======================

**`Range.getClientRects()`** 方法返回一个 `DOMRect` 对象列表，表示 range 在屏幕上所占的区域。这个列表相当于汇集了范围中所有元素调用 `Element.getClientRects()` 方法所得的结果。

语法
--
```

rectList = range.getClientRects()
```

示例
--


```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
rectList = range.getClientRects();
```

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-range-getclientrects |

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

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

参见
--

* `Range`
Range.setEnd()
==============

\*\*`Range.setEnd()`\*\*方法用于设置 `Range`的结束位置。

如果结束节点类型是 `Text`、`Comment` 或 `CDATASection`之一，那么 `endOffset` 指的是从结束节点算起字符的偏移量。对于其他 `Node` 类型节点，`endOffset` 是指从结束结点开始算起子节点的偏移量。

如果设置的结束点在起始点之上（在文档中的位置），将会导致选区折叠，起始点和结束点都会被设置为指定的结束位置。

语法
--
```

range.setEnd(endNode, endOffset);
```

### 参数

*endNode*

*endNode*用于设定 `Range`的结束位置。

*endOffset*

必须为不小于 0 的整数。表示从*endNode*的结束位置算起的偏移量。

例子
--


```js
var range = document.createRange();
var endNode = document.getElementsByTagName("p").item(3);
var endOffset = endNode.childNodes.length;
range.setEnd(endNode, endOffset);
```

规范
--

| Specification |
| --- |
| DOM Standard # dom-range-setend |

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

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

参见
--

* The DOM interfaces index (en-US)
Range.insertNode()
==================

**`Range.insertNode()`** 是在`Range`的起始位置插入节点的方法。

新节点是插入在 `Range` 起始位置。如果将新节点添加到一个文本`节点`，则该节点在插入点处被拆分，插入发生在两个文本节点之间

如果新节点是一个文档片段，则插入文档片段的子节点。

Syntax
------
```

range.insertNode(newNode);
```

### Parameters

*newNode*

The `Node` to insert at the start of the `range`.

Example
-------


```js
range = document.createRange();
newNode = document.createElement("p");
newNode.appendChild(document.createTextNode("New Node Inserted Here"));
range.selectNode(document.getElementsByTagName("div").item(0));
range.insertNode(newNode);
```

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

| Specification |
| --- |
| DOM Standard # dom-range-insertnode |

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

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

See also
--------

* The DOM interfaces index
DragEvent.dataTransfer
======================

**`DataEvent.dataTransfer`** 属性保存着拖拽操作中的数据（作为一个 DataTransfer 对象）

This property is 只读 .

语法
--
```

var data = dragEvent.dataTransfer;
```

### 返回值

`data`

`DataTransfer` 对象包含着 `drag event's data`.

示例
--

这个例子展示了在`dragend` 事件处理程序中获取拖拽中数据的方式。


```js
function process\_data(d) {
  // Process the data ...
}

dragTarget.addEventListener(
  "dragend",
  function (ev) {
    // Call the drag and drop data processor
    if (ev.dataTransfer != null) process\_data(ev.dataTransfer);
  },
  false,
);
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-dragevent-datatransfer-dev |

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

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

This constructor is used to create a synthetic `DragEvent` object.

Although this interface has a constructor, it is not possible to create a useful `DataTransfer` object from script, since `DataTransfer` objects have a processing and security model that is coordinated by the browser during drag-and-drops.

该接口继承了 `MouseEvent` 和 `Event` 的属性。

语法
--
```

 event = new DragEvent(type, DragEventInit);
```

### 参数

*type*

Is a `DOMString` representing the name of the event (see DragEvent event types).

*DragEventInit*可选

Is a `DragEventInit` dictionary, having the following fields:

* `"dataTransfer"`, optional and defaults to `"null"`. The type is `DataTransfer`.

The `DragEventInit` dictionary inherits from the `MouseEventInit dictionary`.

标准
--

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

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

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

`DOMException` 接口中的 **`code`** 是一个只读属性，他返回了一个包含了 错误常量 的`简短`数字，或者在没有匹配到时返回 `0` 。这个字段产生于历史原因，在新的 DOM 异常中已停止使用，改为在 `DOMException.name` 属性中推送此信息。

语法
--
```

var domExceptionCode = domExceptionInstance.code;
```

### 值

一个数字

规范
--

| Specification |
| --- |
| Web IDL Standard # dom-domexception-code |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
DOMException()：DOMException() 构造函数
==================================

**`DOMException()`** 构造函数返回一个包含指定消息和名称的 `DOMException` 对象。

语法
--


```js
new DOMException()
new DOMException(message)
new DOMException(message, name)
```

### 参数

`message` 可选

对异常的描述。如果不存在，使用空字符串 `''`。

`name` 可选

一个字符串。如果指定的名称是标准的错误名称之一，那么获取 `DOMException` 对象的 `code` 属性将返回与指定名称对应的代码编号。

### 返回值

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

示例
--

在本例中，按下按钮会导致抛出自定义的 `DOMException` 异常，然后会捕获该异常并在警报中显示自定义的错误信息。

### HTML


```html
<button>触发 DOM 异常</button>

<p id="output"></p>
```

### JavaScript


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

button.onclick = () => {
  try {
    throw new DOMException("已触发自定义 DOM 异常。");
  } catch (error) {
    document.querySelector("#output").textContent =
      `错误信息：${error.message}`;
  }
};
```

### 结果

规范
--

| Specification |
| --- |
| Web IDL Standard # dom-domexception-domexception |

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

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

参见
--

* `core-js` 中一个可用的 `DOMException` 构造函数的 polyfill
DOMException.name
=================

`DOMException` 接口的 **`name`** 只读属性返回一个字符串，其中包含与错误名称关联的字符串之一。

值
-

一个字符串。

规范
--

| Specification |
| --- |
| Web IDL Standard # dom-domexception-name |

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

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

`DOMException` 接口的 **`message`** 只读属性返回一个字符串来表示与给定错误名称关联的消息或描述。

值
-

一个字符串。

规范
--

| Specification |
| --- |
| Web IDL Standard # dom-domexception-message |

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

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

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

\*\*`OffscreenCanvas()`\*\*构造函数，返回一个新的 `OffscreenCanvas` 对象

语法
--
```

new OffscreenCanvas(width, height);
```

### 参数

`width`

离屏 canvas 的高度

`height`

离屏 canvas 的宽度

示例
--

创建一个离屏 Canvas 并且初始一个 WebGL 上下文：


```js
var offscreen = new OffscreenCanvas(256, 256);
var gl = offscreen.getContext("webgl");
```

规范
--

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

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

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

查看更多
----

* `OffscreenCanvas`, the interface this constructor belongs to.
OffscreenCanvas.height
======================

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

设置或者获取`OffscreenCanvas` 对象的高度。

语法
--
```

var pxl = offscreen.height;
offscreen.height = pxl;
```

例子
--

创建一个新的离屏 canvas，获取或者设置离屏 canvas 的高度：


```js
var offscreen = new OffscreenCanvas(256, 256);
offscreen.height; // 256
offscreen.height = 512;
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-offscreencanvas-height-dev |

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

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

另外参阅
----

* `OffscreenCanvas`, 此属性所属的接口。