recursal/MDN huggingface dataset:
EventTarget.dispatchEvent()
===========================

`EventTarget` 的 **`dispatchEvent()`** 方法会向一个指定的事件目标派发一个 `Event`，并以合适的顺序（同步地）调用所有受影响的 `EventListener`。标准事件处理规则（包括事件捕获和可选的冒泡过程）同样适用于通过手动使用 `dispatchEvent()` 方法派发的事件。

调用 `dispatchEvent()` 是*触发一个事件*的最后一步。被触发的事件应事先通过 `Event()` 构造函数创建并初始化完毕。

**备注：** 在调用此方法时，`Event.target` 属性默认为当前的 `EventTarget`。

和经由浏览器触发，并通过事件循环异步调用事件处理程序的“原生”事件不同，`dispatchEvent()` 会*同步*调用事件处理函数。在 `dispatchEvent()` 返回之前，所有监听该事件的事件处理程序将在代码继续前执行并返回。

语法
--


```js
dispatchEvent(event)
```

### 参数

`event`

被派发的 `Event`。其 `Event.target` 属性为当前的 `EventTarget`。

### 返回值

* 当 `event` 可被取消（`cancelable` 值为 `true`），且 `event` 中至少有一个事件处理程序调用了 `Event.preventDefault()` 方法时，返回 `false`。否则，返回 `true`。
### 异常

`InvalidStateError` `DomException`

若事件未在初始化时指定类型（`type` 属性值），则抛出此异常。


**警告：** 由事件处理程序抛出的异常视为未被捕获的异常。事件处理程序运行在一个嵌套的调用栈中；在其处理完毕前将阻塞 `caller`，但异常却不会冒泡至 `caller`。

示例
--

请参考创建和触发事件。

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-eventtarget-dispatchevent③ |

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

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

参见
--

* Event 对象
File.name
=========

返回由 `File` 对象表示的文件的名称。由于安全原因，该属性并不包含文件路径。

值
-

一个字符串，包含不带路径的文件名，例如“My Resume.rtf”。

示例
--

### HTML


```html
<input type="file" id="filepicker" multiple />
<div>
  <p>选定文件列表：</p>
  <ul id="output"></ul>
</div>
```

### JavaScript


```js
const output = document.getElementById("output");
const filepicker = document.getElementById("filepicker");

filepicker.addEventListener("change", (event) => {
  const files = event.target.files;
  output.textContent = "";

  for (const file of files) {
    const li = document.createElement("li");
    li.textContent = file.name;
    output.appendChild(li);
  }
});
```

### 结果

规范
--

| Specification |
| --- |
| File API # dfn-name |

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

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

参见
--

* 在 web 应用程序中使用文件
File.lastModifiedDate
=====================

概述
--

返回当前文件的最后修改日期，如果无法获取到文件的最后修改日期，则使用当前日期来替代。

示例
--


```js
// fileInput 是一个 HTMLInputElement 元素：<input type="file" multiple id="myfileinput">
var fileInput = document.getElementById("myfileinput");

// files 是一个 FileList 对象 (类似于 NodeList 对象)
var files = fileInput.files;

for (var i = 0; i < files.length; i++) {
  alert(
    files[i].name + " has a last modified date of " + files[i].lastModifiedDate,
  );
}
```
File.File()
===========

**`File()`** 构造器创建新的 `File` 对象实例。

语法
--
```

var myFile = new File(bits, name[, options]);
```

### 参数

*bits*

一个包含`ArrayBuffer`，`ArrayBufferView`，`Blob`，或者 `DOMString` 对象的 `Array` — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。

*name*

`USVString`，表示文件名称，或者文件路径。

*options* 可选

选项对象，包含文件的可选属性。可用的选项如下：

* `type`: `DOMString`，表示将要放到文件中的内容的 MIME 类型。默认值为 `""` 。
* `lastModified`: 数值，表示文件最后修改时间的 Unix 时间戳（毫秒）。默认值为 `Date.now()`。

示例
--


```js
var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});
```

规范
--

| Specification |
| --- |
| File API # file-constructor |

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

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

另见
--

* `FileReader`
* `Blob`
File.lastModified
=================

只读属性 **`File.lastModified`** 返回所引用文件最后修改日期，为自 1970 年 1 月 1 日 0:00 以来的毫秒数。没有已知的最后修改时间则会返回当前时间。

语法
--


```js
var time = instanceOfFile.lastModified;
```

值
-

自 1970 年 1 月 1 日 0:00 以来的毫秒数。

实例
--

### 从 INPUT 标签读取文件


```html
<input type="file" multiple id="fileInput" />
```



```js
const fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", function (event) {
  // files is a FileList object (simliar to NodeList)
  const files = event.target.files;

  for (let i = 0; i < files.length; i++) {
    const date = new Date(files[i].lastModified);
    alert(files[i].name + " has a last modified date of " + date);
  }
});
```


结果：

### 动态创建文件

如果文件是动态创建的，可以在构造函数`new File()` 中提供最后修改时间。如果未提供则会继承文件对象被创建时的`Date.now()` 。


```js
var fileWithDate = new File([], "file.bin", {
  lastModified: new Date(2017, 1, 1),
});
console.log(fileWithDate.lastModified); //returns 1485903600000

var fileWithoutDate = new File([], "file.bin");
console.log(fileWithoutDate.lastModified); //returns current time
```

规范
--

| Specification |
| --- |
| File API # dfn-lastModified |

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

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

参见
--

* `File`
File.webkitRelativePath
=======================

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

**`File.webkitRelativePath`** 是只读属性，包含 `USVString`，它规定了文件的路径，相对于用户在 `<input>` 元素中选择的目录，这个元素设置了 `webkitdirectory` 属性。

语法
--
```

 relativePath = File.webkitRelativePath
```

### 值

`USVString` 包含文件路径，相对于用户所选的祖先目录。

示例
--

这个示例展示了目录选择器，它让用户选择一个或多个目录。`change` 事件触发时，所选目录包含的所有文件的列表，会生成并展示，带有所选目录的层次结构。

### HTML


```html
<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
<ul id="listing"></ul>
```

### JavaScript


```js
document.getElementById("filepicker").addEventListener(
  "change",
  function (event) {
    let output = document.getElementById("listing");
    let files = event.target.files;

    for (let i = 0; i < files.length; i++) {
      let item = document.createElement("li");
      item.innerHTML = files[i].webkitRelativePath;
      output.appendChild(item);
    }
  },
  false,
);
```

### 结果

特别提醒：假设文件路径是 C:\f1\f2\f3\file.txt, 用户选择的是 f1 文件夹，则 Chrome、Firefox、Edge 都能正确返回 f2/f3/file.txt 值。而国产的 QQ 浏览器、360 浏览器、UC 浏览器、搜狗浏览器都只能返回 f3/file.txt。也就是国产浏览器调用 webkitRelativePath 返回的结果都不会是你希望得到的路径，请注意使用时的细微差距。

规范
--

| Specification |
| --- |
| File and Directory Entries API # dom-file-webkitrelativepath |

这个 API 没有官方的 W3C 或者 WHATWG 规范。

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

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

另见
--

* 文件和目录条目 API
* `HTMLInputElement.webkitEntries` (en-US)
* `HTMLInputElement.webkitdirectory`
PerformanceEntry.entryType
==========================

The **`entryType`** 返回一个代表 performance metric 类型的`DOMString` , 例如被 performance.mark("begin") 所创建的 entry 的 entryType 就是 "`mark`". 此属性只读。

语法
--
```

var type = entry.entryType;
```

### 返回值

返回值取决于 `PerformanceEntry` 对象的 subtype，entryType 的取值会影响`PerformanceEntry.name` 属性，具体如下表所示。

| Value | Subtype | Type of name property | Description of name property |
| --- | --- | --- | --- |
| `frame`, `navigation` | `PerformanceFrameTiming`, `PerformanceNavigationTiming` | `URL` | The document's address. |
| `resource` | `PerformanceResourceTiming` | `URL` | The resolved URL of the requested resource. This value doesn't change even if the request is redirected. |
| `mark` | `PerformanceMark` (en-US) | `DOMString` | The name used when the mark was created by calling `performance.mark()`. |
| `measure` | `PerformanceMeasure` (en-US) | `DOMString` | name used when the measure was created by calling `performance.measure()`. |
| `paint` | `PerformancePaintTiming` | `DOMString` | Either `'first-paint'` or `'first-contentful-paint'`. |

范例
--

下面的代码说明了 `entryType` 属性的用法。


```js
function run\_PerformanceEntry() {
  // check for feature support before continuing
  if (performance.mark === undefined) {
    console.log("performance.mark not supported");
    return;
  }

  // Create a performance entry named "begin" via the mark() method
  performance.mark("begin");

  // Check the entryType of all the "begin" entries
  var entriesNamedBegin = performance.getEntriesByName("begin");
  //entriesNamedBegin
  // Array [ PerformanceMark ]
  //entriesNamedBegin[0]
  // PerformanceMark { name: "begin", entryType: "mark", startTime: 94661370.14, duration: 0 }
  //entriesNamedBegin[0].entryType
  // "mark"
  //entriesNamedBegin[0].name
  // "begin"

  for (var i = 0; i < entriesNamedBegin.length; i++) {
    var typeOfEntry = entriesNamedBegin[i].entryType;
    console.log("Entry is type: " + typeOfEntry);
  }
}
```

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

| Specification |
| --- |
| Performance Timeline # dom-performanceentry-entrytype |

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

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

**`DOMImplementation.createDocumentType()`** 方法返回一个 `DocumentType` 对象，它可以在文档创建时用在 `DOMImplementation.createDocument` ，或者通过`Node.insertBefore()` 或 `Node.replaceChild()` 等方法放在文档中。

语法
--
```

var doctype = document.implementation.createDocumentType(qualifiedNameStr, publicId, systemId);
```

### 参数

`qualifiedNameStr`

`DOMString` 类型的值，包含一个合规的名称，如 `svg:svg`。

`publicId`

`DOMString` 类型的值，包含 `PUBLIC` 标识符。

`systemId`

`DOMString` 类型的值，包含 `SYSTEM` 标识符。

示例
--


```js
var dt = document.implementation.createDocumentType(
  "svg:svg",
  "-//W3C//DTD SVG 1.1//EN",
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd",
);
var d = document.implementation.createDocument(
  "http://www.w3.org/2000/svg",
  "svg:svg",
  dt,
);
alert(d.doctype.publicId); // -//W3C//DTD SVG 1.1//EN
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-domimplementation-createdocumenttype① |

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

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

参见
--

* 该方法所属的接口 `DOMImplementation`
DOMImplementation.createDocument()
==================================

**`DOMImplementation.createDocument()`方法创建并返回一个** `XMLDocument`对象。

语法
--
```

doc = document.implementation.createDocument(namespaceURI, qualifiedNameStr, documentType);
```

### 参数

*namespaceURI*

被创建的`DOMString` 文档的 namespace URI 是 namespace URI ,如果文档不属于任何 namespace URI 就为`null`.

*qualifiedNameStr*

`DOMString` 是否包含要创建文档的限定名称，即可选的前缀和冒号，以及本地的根元素。

*documentType* 可选

文档的 `DocumentType` 默认为 null.

例子
--


```js
var doc = document.implementation.createDocument(
  "http://www.w3.org/1999/xhtml",
  "html",
  null,
);
var body = document.createElementNS("http://www.w3.org/1999/xhtml", "body");
body.setAttribute("id", "abc");
doc.documentElement.appendChild(body);
alert(doc.getElementById("abc")); // [object HTMLBodyElement]
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-domimplementation-createdocument② |

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

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

参见
--

* 归属它的 `DOMImplementation` 接口。
DOMImplementation.createHTMLDocument
====================================

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

### 概述

该方法 (属于`document.implementation`) 用来创建一个新的 HTML 文档。

### 语法
```

var doc = document.implementation.createHTMLDocument(title);
```


* `doc` 是新建的 HTML 文档。
* `title` 是 doc 中的 title 标签中的文本。
### 例子

下面的例子演示如何创建了一个新的 HTML 文档，并把它插入到当前文档的一个`<iframe>`中。

查看在线演示

例子中的 HTML 代码如下：


```html
<body>
  <p>
    Click <a href="javascript:makeDocument()">here</a> to create a new document
    and insert it below.
  </p>
  <iframe id="theFrame" src="about:blank" />
</body>
```


例子中用 JavaScript 实现的`makeDocument()`方法如下：


```js
function makeDocument() {
  var frame = document.getElementById("theFrame");

  var doc = document.implementation.createHTMLDocument("New Document");
  var p = doc.createElement("p");
  p.innerHTML = "This is a new paragraph.";

  try {
    doc.body.appendChild(p);
  } catch (e) {
    console.log(e);
  }

  // 将新建的 HTML 文档放到 iframe 中。

  var destDocument = frame.contentDocument;
  var srcNode = doc.documentElement;
  var newNode = destDocument.importNode(srcNode, true);

  destDocument.replaceChild(newNode, destDocument.documentElement);
}
```


代码 4-12 行创建了一个新的 HTML 文档，并在里面插入一些内容。第 4 行 `createHTMLDocument()`构造了一个标题为"New Document"的 HTML 文档。5-6 行创建了一个段落元素并在里面插入了一些内容，8-12 行将新建的段落元素插入到 HTML 文档中。

16 行获取了 iframe 的`contentDocument` 属性。这是我们将要插入新建的 HTML 文档的地方。下面的两行将新建的 HTML 文档插入到了 iframe 的根元素中。这样，我们用 20 行代码实现了用一个新建的 HTML 文档替换 iframe 中原有文档的目的。

### 备注

新生成的 HTML 文档有如下的初始结构：


```html
<!doctype html>
<html>
  <head>
    <title>title</title>
  </head>
  <body></body>
</html>
```


译者注：
```

alert(document.implementation.createHTMLDocument("myTitle").documentElement.outerHTML)

//<html><head><title>myTitle</title></head><body></body></html>
```

### 规范

* `createHTMLDocument` specification
Selection.rangeCount
====================

**`Selection.rangeCount`** 是一个返回选区（selection）中范围（range）数量的只读属性。

在网页使用者点击一个加载完毕的新打开的页面之前，`rangeCount` 的值是 `0`。在使用者点击页面之后，`rangeCount` 的值变为 `1`，即使并没有可视的选区。

使用者一般情况下在一次只能选择一个 range，所以通常情况下 `rangeCount` 属性的值总为 `1`。脚本可以使选区包含多个范围。

Gecko 浏览器允许跨表格单元格获得多个选区。Firefox allows to select multiple ranges in the document by using Ctrl+click (unless the click within an element with display: table-cell).

示例
--

下面这个例子会每隔一秒显示一次 `rangeCount` 的值。在浏览器中选择文本，然后查看其值的变化。

### HTML


```html
<table>
  <tr>
    <td>a.1</td>
    <td>a.2</td>
  </tr>
  <tr>
    <td>b.1</td>
    <td>b.2</td>
  </tr>
  <tr>
    <td>c.1</td>
    <td>c.2</td>
  </tr>
</table>
```

### JavaScript


```js
setInterval(() => {
  console.log(window.getSelection().rangeCount);
}, 1000);
```

### 结果

打开控制台以查看选区中范围的数量。在 Gecko 浏览器中，你可以通过按住 `Ctrl`（或在 MacOS 上为 `Cmd`）同时拖动鼠标来选择表格单元格中的多个范围。

规范
--

| Specification |
| --- |
| Selection API # dom-selection-rangecount |

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

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

参见
--

* 属于 `Selection` 接口。
Selection.isCollapsed
=====================

### 概述

返回一个布尔值用于描述选区的起始点和终止点是否位于一个位置（即是否框选了，译者注）。

### 用法
```

sel.isCollapsed
```

### 注意

即使是一个被折叠了的选区，其 rangeCount 的结果也可能大于 0。sel.getRangeAt(0) 会在选区被折叠的情况下返回一个值。
Selection.anchorOffset
======================

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

只读属性，返回选区的锚节点（ `Selection.anchorNode`）起点偏移量的数字。返回值从零开始计数，如果选区从锚节点（`Selection.anchorNode`）的第一个字符开始，返回值为 0。

语法
--
```

number = sel.anchorOffset
```

规范
--

| Specification |
| --- |
| Selection API # dom-selection-anchoroffset |

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

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

相关内容
----

* `Selection`, the interface it belongs to.
Selection.addRange()
====================

概述
--

向选区（`Selection`）中添加一个区域（`Range`）。

语法
--
```

sel.addRange(range)
```

### 参数

*`range`*

一个区域（`Range`）对象将被增加到选区（`Selection`）当中。

例子
--


```js
/\* 在一个 HTML 文档中选中所有加粗的文本。 \*/

var strongs = document.getElementsByTagName("strong");
var s = window.getSelection();

if (s.rangeCount > 0) s.removeAllRanges();

for (var i = 0; i < strongs.length; i++) {
  var range = document.createRange();
  range.selectNode(strongs[i]);
  s.addRange(range);
}
```

规范
--

| Specification |
| --- |
| Selection API # dom-selection-addrange |

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

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

相关链接
----

* `Selection`，此方法所属接口。
Selection.getRangeAt()
======================

**概述**
返回一个包含当前选区内容的区域对象。

语法
--
```

range = sel.getRangeAt(index)
```

### 参数

*`range`*

将返回 range 对象。

*`index`*

该参数指定需要被处理的子集编号（从零开始计数）。如果该数值被错误的赋予了大于或等于 rangeCount (en-US) 结果的数字，将会产生错误。

例子
--


```js
let ranges = [];

sel = window.getSelection();

for (var i = 0; i < sel.rangeCount; i++) {
  ranges[i] = sel.getRangeAt(i);
}
/\* 在 ranges 数组的每一个元素都是一个 range 对象，
 \* 对象的内容是当前选区中的一个。 \*/
```

规范
--

| Specification |
| --- |
| Selection API # dom-selection-getrangeat |

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

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

相关链接
----

* Tree Selection (for the `getRangeAt()` method on the `nsITreeSelection` interface)
Selection.selectAllChildren()
=============================

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

Selection.selectAllChildren() 把指定元素的所有子元素设为选中区域，并取消之前的选中区域。

用法
--
```

sel.selectAllChildren(parentNode)
```

### 参数

*`parentNode`*

所有 parentNode 元素的子元素会被设为选中区域，parentNode 本身除外。

举例
--
```

footer = document.getElementById("footer");
window.getSelection().selectAllChildren(footer);
/* Everything inside the footer is now selected *
```

规范
--

| Specification |
| --- |
| Selection API # dom-selection-selectallchildren |

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

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

相关链接
----

* `Selection`, 此方法所属接口。
Selection.containsNode()
========================

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

**`Selection.containsNode()`** 判断指定的节点是否包含在 Selection 中 (是否被选中).

语法
--
```

sel.containsNode(aNode,aPartlyContained)
```

### 参数

*`aNode`*

用于判断是否包含在 Selection 中的那个节点

*`aPartlyContained`*

 当此参数为`true 时`, 当`selection 包含节点 aNode 的一部分或全部时，containsNode() 返回 true`.
 当此参数为`false 时`, 只有当 selection 完全包含节点 aNode 时，`containsNode()` 才返回 true.


例子
--
```

 /* 检查 body 中是否有节点被选中 */
 console.log(window.getSelection().containsNode(document.body, true));
```

规范
--

| Specification |
| --- |
| Selection API # dom-selection-containsnode |

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

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

参考
--

* `Selection`, Selection 接口规范。
Selection.type
==============

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

\*\*`type`\*\*是 `Selection` 接口的只读属性，其返回的是`DOMString`即描述当前选择的类型。

语法
--
```

value = sel.type
```

### Value

`DOMString` 描述的是当前选择的类型。可能的值为：

* `None`: 当前没有选择。
* `Caret`: 选区已折叠（即 光标在字符之间，并未处于选中状态）。
* `Range`: 选择的是一个范围。
例子
--

在下面的示例中，回调函数将在每次进行新的选择时触发。 `console.log(selection.type)` 将会输出 `Caret` 或者 `Range` ，其输出值取决于插入标记是放置在文本中的单个点还是已选择范围。
```

var selection;

document.onselectionchange = function() {
  console.log('New selection made');
  selection = document.getSelection();
  console.log(selection.type);
};
```

规范
--

| Specification |
| --- |
| Selection API # dom-selection-type |

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

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

参考
--

* `Selection`
Selection.extend()
==================

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

**`Selection.extend()`** 方法移动选中区的焦点到指定的点。选中区的锚点不会移动。选中区将从锚点开始到新的焦点，不管方向。

语法
--
```

sel.extend(node, offset)
```

### 参数

*node*

焦点会被移至此节点内。

*offset* 可选

焦点会被移至 `node` 内的偏移位置。如果没有指定，使用 `0` 作为默认值。

规范
--

| Specification |
| --- |
| Selection API # dom-selection-extend |

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

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

相关链接
----

* `Selection`, 此方法所属接口。
Selection.anchorNode
====================

概述
--

**`Selection.anchorNode`** 只读属性返回选区开始位置所属的节点（`Node`）。

用法
--
```

sel.anchorNode
```

注意
--

用户可能从左至右进行框选（沿着文字顺序）或者从右至左框选（沿着文字顺序的反方向）。锚点位于用户开始选择的位置。可以通过按住 Shift 和方向键来得知锚点所在的位置。选区的锚点是不会移动的，但是选区的焦点、选区其他的结束位置（多个选区，译者注）可以移动。

规范
--

| Specification |
| --- |
| Selection API # dom-selection-anchornode |

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

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

相关链接
----

* `Selection`, 此属性所属接口。
Selection.removeRange()
=======================

### 概述

将一个区域从选区中移除。

### 用法
```

sel.removeRange(range)
```

### 参数

*`range`*

Range 对象将从选区当中移除。

### Examples
```

/* 通过设计一段 js 代码，我们可以获得多个区域，
 * 这段代码可以移除除了第一个区域之外的所有区域。
 *（此代码在 Chrome 中不生效，因为 Chrome 当中只能
 * 选择一个选区，哎我为什么要在 Mozilla 的网站上
 * 说这个？译者注）*/

s = window.getSelection();
if(s.rangeCount > 1) {
 for(var i = 1; i < s.rangeCount; i++) {
  s.removeRange(s.getRangeAt(i));
 }
}
```
Selection.removeAllRanges()
===========================

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

**`Selection.removeAllRanges()`** 方法会从当前 `selection` 对象中移除所有的 range 对象，取消所有的选择只 留下`anchorNode` 和`focusNode`属性并将其设置为 null。

语法
--
```

sel.removeAllRanges();
```

### 参数

*无。*

规范
--

| Specification |
| --- |
| Selection API # dom-selection-removeallranges |

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

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

相关链接
----

* `Selection`，此方法所属接口。
Selection.toString()
====================

**`Selection.toString()`** 方法返回 selection 对象当前代表的字符串。例如，当前选中的文本。

语法
--


```js
toString()
```

### 参数

无。

### 返回值

selection 对象代表的字符串。

描述
--

此方法返回当前被选中的文本。

在 JavaScript 中，当 selection 对象作为字符串类型传递给函数时，此方法会被自动调用：


```js
alert(window.getSelection()); // 被调用时
alert(window.getSelection().toString()); // 真实情况
```

规范
--

| Specification |
| --- |
| Selection API # dom-selection-stringifier |

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

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

参考
--

* 属于 `Selection` 接口。
Selection.collapseToStart()
===========================

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

**`Selection.collapseToStart()`** 方法的作用是取消当前选区，并把光标定位在原选区的最开始处，如果此时光标所处的位置是可编辑的，且它获得了焦点，则光标会在原地闪烁。

语法
--
```

sel.collapseToStart()
```

### 参数

*无。*

规范
--

| Specification |
| --- |
| Selection API # dom-selection-collapsetostart |

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

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

参见
--

* 此方法所属的接口，`Selection`。
Selection.focusOffset
=====================

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

只读属性 **`Selection.focusOffset`** 返回选区终点（鼠标松开瞬间所记录的那个点）在焦点（`Selection.focusNode`）中的偏移量。返回值从零开始计数，如果选区（`Selection`）在焦点（`Selection.focusNode`）的第一个字符前结束，返回值为 0。

语法
--
```

offset = sel.focusOffset
```

规范
--

| Specification |
| --- |
| Selection API # dom-selection-focusoffset |

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

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

相关链接
----

* `Selection`, 这个属性所属的接口。
Selection.collapse()
====================

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

**`Selection.collapse()`** 方法可以收起当前选区到一个点。文档不会发生改变。如果选区的内容是可编辑的并且焦点落在上面，则光标会在该处闪烁。

语法
--
```

sel.collapse(parentNode, offset);
```

### 参数

*`parentNode`*

光标落在的目标节点。

*`offset`* 可选

落在节点的偏移量。

例子
--


```js
/\* 将光标收起到文档 body 的开头 \*/
var body = document.getElementsByTagName("body")[0];
window.getSelection().collapse(body, 0);
```

规范
--

| Specification |
| --- |
| Selection API # dom-selection-collapse |

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

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

相关连接
----

* `Selection`, 本方法所属的接口。
Selection.collapseToEnd()
=========================

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

**`Selection.collapseToEnd()`** 方法的作用是取消当前选区，并把光标定位在原选区的最末尾处，如果此时光标所处的位置是可编辑的，且它获得了焦点，则光标会在原地闪烁。

语法
--
```

sel.collapseToEnd()
```

### 参数

无

规范
--

| Specification |
| --- |
| Selection API # dom-selection-collapsetoend |

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

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

相关链接
----

* `Selection`