recursal/MDN huggingface dataset:
Document：scroll 事件
==================

当文档视图滚动后，**`scroll`** 事件就会触发。要检测滚动何时结束，请参阅 Document：scrollend 事件 (en-US)。关于元素滚动，请参见 Element：scroll 事件。

语法
--

在类似于 `addEventListener()` 这样的方法中使用事件名称，或设置事件处理器属性。


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

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

事件类型
----

通用的 `Event`。

示例
--

### Scroll 事件限流

由于 `scroll` 事件可被高频触发，事件处理器不应该执行高性能消耗的操作，如 DOM 操作。而更推荐的做法是使用 `requestAnimationFrame()`、`setTimeout()` 或 `CustomEvent` 给事件限流，如下所述。

然而需要注意的是，输入事件和动画帧的触发速度大致相同，因此通常不需要下述优化。此示例使用 `requestAnimationFrame` 优化 `scroll` 事件。


```js
let lastKnownScrollPosition = 0;
let ticking = false;

function doSomething(scrollPos) {
  // 利用滚动位置完成一些事情
}

document.addEventListener("scroll", (event) => {
  lastKnownScrollPosition = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(() => {
      doSomething(lastKnownScrollPosition);
      ticking = false;
    });

    ticking = true;
  }
});
```

规范
--

| Specification |
| --- |
| CSSOM View Module # eventdef-document-scroll |
| HTML Standard # handler-onscroll |

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

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

参见
--

* Document：`scrollend` 事件 (en-US)
* Element：`scroll` 事件
* Element：`scrollend` 事件 (en-US)
document.documentURI
====================

`Document` 接口的属性 **`documentURI`** 以字符串的形式返回文档的位置（location）。在最初的 DOM3 定义中，这个属性是可读/写的。在现代的 DOM 标准（DOM4）中，它是只读的。语法
--
```

var string = document.documentURI;
```

备注
--

HTML 文档有一个 `document.URL` 属性返回同样的值。但是不像 `URL`，`documentURI` 适用于所有类型的文档。

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-documenturi① |

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

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

**`Document.close()`** 用于结束由 对文档的 `Document.write()` 写入操作，这种写入操作一般由 `Document.open()` 打开。

语法
--
```

document.close();
```

例子
--
```

// 打开一个文档，以便写入数据
document.open();

// 写入文档内容
document.write("<p>文档内容~</p>");

// 关闭文档
document.close();
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-document-close-dev |

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

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

### 概述

向文档中写入一串文本，并紧跟着一个换行符。

### 语法
```

document.writeln(line);
```

### 参数

* `line` 为包含文本的字符串
### 示例
```

document.writeln("<p>enter password:</p>");
```

### 备注

**document.writeln** 和 document.write 一样，但是会添加一个换行符。

**备注：** **document.writeln** (like **document.write**) does not work in XHTML documents (you'll get a "Operation is not supported" (`NS_ERROR_DOM_NOT_SUPPORTED_ERR`) error on the error console). This is the case if opening a local file with a .xhtml file extension or for any document served with an application/xhtml+xml MIME type. More information is available in the W3C XHTML FAQ.

### 规范

writeln
Document()
==========

**`Document`** 构造器创建一个新的 `Document` 对象，该对象是在浏览器中加载的页面，并作为页面内容的入口点。

语法
--
```

new Document();
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-document① |

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

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

**`Document.body`** 表示当前文档中的 `<body>` 或 `<frameset>` 元素，如果不存在此类元素，则为 `null`。

值
-

以下之一：

* `<body>`
* `<frameset>`
* `null`
示例
--


```js
// 如果 HTML 结构为：<body id="oldBodyElement"></body>
alert(document.body.id); // "oldBodyElement"

var aNewBodyElement = document.createElement("body");

aNewBodyElement.id = "newBodyElement";
document.body = aNewBodyElement;
alert(document.body.id); // "newBodyElement"
```

备注
--

`document.body` 是包含当前页面内容的元素，对于拥有 `<body>` 元素的文档来说，返回的是 `<body>` 元素，对于拥有 `<frameset>` 元素的文档来说，返回的是最外层的 `<frameset>` 元素。

`body` 属性是可写的，如果为一个文档设置一个新的 body，当前 `<body>` 中存在的所有子元素都将被有效地移除。

规范
--

| Specification |
| --- |
| HTML Standard # dom-document-body-dev |

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

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

参见
--

* `document.head`
Document.getElementsByClassName()
=================================

返回一个包含了所有指定类名的子元素的类数组对象。当在 document 对象上调用时，会搜索整个 DOM 文档，包含根节点。你也可以在任意元素上调用`getElementsByClassName()` 方法，它将返回的是以当前元素为根节点，所有指定类名的子元素。

语法
--
```

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);
```


* *elements* 是一个实时`集合`，包含了找到的所有元素。
* *names* 是一个字符串，表示要匹配的类名列表；类名通过空格分隔
* getElementsByClassName 可以在任何元素上调用，不仅仅是 document。调用这个方法的元素将作为本次查找的根元素。
示例
--

获取所有 class 为 'test' 的元素：


```js
document.getElementsByClassName("test");
```


获取所有 class 同时包括 'red' 和 'test' 的元素。


```js
document.getElementsByClassName("red test");
```


在 id 为'main'的元素的子节点中，获取所有 class 为'test'的元素


```js
document.getElementById("main").getElementsByClassName("test");
```


我们还可以对任意的 `HTMLCollection` 使用 Array.prototype 的方法，调用时传递 *HTMLCollection* 作为方法的参数。这里我们将查找到所有 class 为 'test' 的 div 元素：


```js
var testElements = document.getElementsByClassName("test");
var testDivs = Array.prototype.filter.call(
  testElements,
  function (testElement) {
    return testElement.nodeName === "DIV";
  },
);
```

### 获取第一个类名为 test 的元素

这是 `getElementsByClassName()` 的通常用法：


```html
<html>
  <body>
    <div id="parent-id">
      <p>hello world 1</p>
      <p class="test">hello world 2</p>
      <p>hello world 3</p>
      <p>hello world 4</p>
    </div>

    <script>
 var parentDOM = document.getElementById("parent-id");

 var test = parentDOM.getElementsByClassName("test"); // 匹配类名的元素集合，不是元素本身
 console.log(test); //HTMLCollection[1]

 var testTarget = parentDOM.getElementsByClassName("test")[0]; // 我们想要取到的第一个元素
 console.log(testTarget); //<p class="test">hello world 2</p>
 </script>
  </body>
</html>
```

多个 Class 示例
-----------

`document.getElementsByClassName` 的工作方式与 `document.querySelector` 和 `document.querySelectorAll` 很相似。只有所有 className 都匹配的元素会被选择。

### HTML


```html
<span class="orange fruit">Orange Fruit</span>
<span class="orange juice">Orange Juice</span>
<span class="apple juice">Apple Juice</span>
<span class="foo bar">Something Random</span>
<textarea id="resultArea" style="width:100%;height:7em"></textarea>
```

### JavaScript


```js
// getElementsByClassName selects partial matches
var allOrangeJuiceByClass = document.getElementsByClassName("orange juice");
var result = "document.getElementsByClassName('orange juice')";
for (
  var i = 0, len = allOrangeJuiceByClass.length | 0;
  i < len;
  i = (i + 1) | 0
) {
  result += "\n " + allOrangeJuiceByClass[i].textContent;
}

// querySelector only selects full complete matches
var allOrangeJuiceQuery = document.querySelectorAll(".orange.juice");
result += "\n\ndocument.querySelectorAll('.orange.juice')";
for (
  var i = 0, len = allOrangeJuiceQuery.length | 0;
  i < len;
  i = (i + 1) | 0
) {
  result += "\n " + allOrangeJuiceQuery[i].textContent;
}

document.getElementById("resultArea").value = result;
```

### 结果

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-getelementsbyclassname① |

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

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

**`Document.documentElement`** 是一个会返回文档对象（`document`）的根`元素`的只读属性（如 HTML 文档的 `<html>` 元素）。

语法
--
```

var element = document.documentElement;
```

示例
--


```js
const rootElement = document.documentElement;
const firstTier = rootElement.childNodes;

// firstTier 是由根元素的所有子节点组成的一个 NodeList
for (let i = 0; i < firstTier.length; i++) {
  // 使用根节点的每个子节点
  // 如 firstTier[i]
}
```

备注
--

对于任何非空 HTML 文档，调用 `document.documentElement` 总是会返回一个 `<html>` 元素，且它一定是该文档的根元素。借助这个只读属性，能方便地获取到任意文档的根元素。

HTML 文档通常包含一个子节点 `<html>`，但在它前面可能还有个 DOCTYPE 声明。XML 文档通常包含多个子节点：根元素，DOCTYPE 声明，和 processing instructions (en-US)。

所以，应当使用 `document.documentElement` 来获取根元素，而不是 `document.firstChild`。

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-documentelement① |

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

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

### 概述

`applets` 按顺序返回当前文档中所有的`applet`对象。

### 语法
```

nodeList = document.applets
```

### 例子
```

my_java_app = document.applets[1]; //获取当前页面的第二个 applet 对象。
```

### 规范

DOM Level 2 HTML: applets
Document.getElementsByTagName()
===============================

返回一个包括所有给定标签名称的元素的 HTML 集合`HTMLCollection`。整个文件结构都会被搜索，包括根节点。返回的 `HTML 集合`是动态的，意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用 `document.getElementsByTagName()`。

语法
--
```

var elements = document.getElementsByTagName(name);
```


* `elements` 是一个由发现的元素出现在树中的顺序构成的动态的 HTML 集合 `HTMLCollection` (但是看下面的提示) 。
* `name` 是一个代表元素的名称的字符串。特殊字符 "\*" 代表了所有元素。

**备注：** 最新的 W3C 规范 说明这些元素是 `HTMLCollection`（HTML 集合）；然而，这个方法在 WebKit 内核的浏览器中返回一个 `NodeList` 。更多详情请查看 Firefox bug 14869 。

例子
--

在以下的例子中，`getElementsByTagName()` 开始于一个具体的父级元素并且从它自上而下递归地在`DOM 树中`搜索符合标签名称参数的子元素。

注意调用 `getElementsByTagName()` 的不是那个文件节点 document，事实上是使用这个方法 `element.getElementsByTagName()`。


```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>getElementsByTagName example</title>
    <script>
 function getAllParaElems() {
 var allParas = document.getElementsByTagName("p");
 var num = allParas.length;
 alert("There are " + num + " paragraph in this document");
 }

 function div1ParaElems() {
 var div1 = document.getElementById("div1");
 var div1Paras = div1.getElementsByTagName("p");
 var num = div1Paras.length;
 alert("There are " + num + " paragraph in #div1");
 }

 function div2ParaElems() {
 var div2 = document.getElementById("div2");
 var div2Paras = div2.getElementsByTagName("p");
 var num = div2Paras.length;
 alert("There are " + num + " paragraph in #div2");
 }
 </script>
  </head>
  <body style="border: solid green 3px">
    <p>Some outer text</p>
    <p>Some outer text</p>

    <div id="div1" style="border: solid blue 3px">
      <p>Some div1 text</p>
      <p>Some div1 text</p>
      <p>Some div1 text</p>

      <div id="div2" style="border: solid red 3px">
        <p>Some div2 text</p>
        <p>Some div2 text</p>
      </div>
    </div>

    <p>Some outer text</p>
    <p>Some outer text</p>

    <button onclick="getAllParaElems();">show all p elements in document</button
 ><br />

    <button onclick="div1ParaElems();">
      show all p elements in div1 element</button
 ><br />

    <button onclick="div2ParaElems();">
      show all p elements in div2 element
    </button>
  </body>
</html>
```

注意
--

当在一个 HTML 文件上执行时， `getElementsByTagName()` 会在执行前把参数转换为小写字母。这是试着在一个 HTML 文件的子树匹配驼峰命名法的 SVG 元素时不希望的。 `document.getElementsByTagNameNS()` 在那种情况下会有用。请查看 Firefox bug 499656。

`document.getElementsByTagName()` 类似于 `element.getElementsByTagName()`，除了它会搜索整个文档这点。

参考
--

* DOM Level 2 Core: Document.getElementsByTagName
* HTML 5: APIs in HTML documents
Document.domain
===============

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

`Document` 接口的 **`domain`** 属性获取/设置当前文档的原始域部分，常用于同源策略。

如果成功设置此属性，则原始端口的端口部分也将设置为 `null`.

语法
--
```

var domainString = document.domain;
document.domain = domainString;
```

### 值

当前文档来源的域部分。

### 异常

安全错误

已尝试在以下情况之一下设置域：

* 文件在 html 中的 iframe 元素里
* 该文件没有参考上下文
* 该文档的有效域为 null
* 给定值不等于文档的有效域（或者它不是该域的可注册域后缀）
* The `document-domain` (en-US) `Permissions-Policy`一启用

示例
--

### 获取域名

对于 URI `http://developer.mozilla.org/zh-CN/docs/Web`，此示例将 currentDomain 设置为字符串 `developer.mozilla.org`。


```js
var currentDomain = document.domain;
```

### 关闭窗口

如果文档（例如 www.example.xxx/good.html）的域为“www.example.xxx”，则本示例将尝试关闭窗口。


```js
var badDomain = "www.example.xxx";

if (document.domain == badDomain) {
  // 这只是一个示例 - 有时 window.close() 是没有效果的
  window.close();
}
```

规范
--

| Specification |
| --- |
| HTML Standard # relaxing-the-same-origin-restriction |

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

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

### Firefox 备注

如果当前文档的域无法识别，那么 domain 属性会返回 null。但这个表现在 Firefox 62 时发生了更改——详见 Firefox bug 819475 中的讨论。

在根域名范围内，Mozilla 允许你把 domain 属性的值设置为它的上一级域。例如，在 developer.mozilla.org 域内，可以把 domain 设置为 "mozilla.org" 但不能设置为 "mozilla.com" 或者"org"。

Mozilla 会区分 `document.domain` 属性 **从没有被设定过值** 和 **被显示的设定为跟该文档的 URL 的 domain 一致的值**，尽管这两种状况下，该属性会返回同样的值。两个文档，只有在 `document.domain` 都被设定为同一个值，表明他们打算协作；或者都没有设定 `document.domain` 属性并且 URL 的域是一致的 (如何判断一致)，这两种条件下，一个文档才可以去访问另一个文档。如果没有这个特殊的策略，每一个站点都会成为他的子域的 XSS 攻击的对象（例如，https://bugzilla.mozilla.org 可以被来自 https://bug\*.bugzilla.mozilla.org 站点的 bug 附件攻击）。

参见
--

* Same origin policy for JavaScript
Document.createProcessingInstruction()
======================================

`createProcessingInstruction()` 创建一个新的处理指令节点，并返回。

Syntax
------
```

Processing instruction node = document.createProcessingInstruction(target, data)
```

### Parameters

* `Processing Instruction node` 是 `ProcessingInstruction` (en-US) 节点。
* `target` 是指处理指令节点的 target 部分 (i.e., <?*target* ... ?>
* `data` 是一个字符串，包含了将要添加到节点内的数据。
### 异常

`NOT_SUPPORTED_ERR`

Thrown if you attempt to create a processing instruction node on an HTML document in Gecko 9 or earlier. In Gecko 10.0 and later, you can use this method on HTML documents.

`DOM_INVALID_CHARACTER`

Thrown if you try to add an invalid processing instruction target (it should be an XML name besides any case combination of the letters "xml") or if the closing processing instruction sequence ("?>") is added as part of the data, so unescaped user-provided data cannot be safely used without escaping or otherwise dealing with such situations.

实例
--
```

var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml")

var pi = docu.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"');

docu.insertBefore(pi, docu.firstChild);

alert(new XMLSerializer().serializeToString(docu));
// 弹出框内容：<?xml-stylesheet href="mycss.css" type="text/css"?><xml/>
```

规范
--

DOM 4: createProcessingInstruction
Document：caretRangeFromPoint() 方法
=================================

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

`Document` 接口的 **`caretRangeFromPoint()`** 方法返回指定坐标位置文档片段的 `Range` 对象。

该方法是 `Document.caretPositionFromPoint` 方法的 WebKit 专有实现。

语法
--


```js
caretRangeFromPoint(x, y)
```

### 参数

`x`

当前视口内的水平位置。

`y`

当前视口内的垂直位置。

### 返回值

以下之一：

* 一个 `Range`。
* `Null`，当 *x* 或 *y* 为负数，超出视口范围或者没有包含文本的节点。
示例
--

访问 `Document.caretPositionFromPoint` 页面查看此方法的实时示例。

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document：FullScreenElement 属性
=============================

只读属性 **`Document.fullscreenElement`** 返回当前页面中以全屏模式呈现的 `Element`，如果当前页面未使用全屏模式，则返回 `null`。

尽管这个属性是只读的，但如果修改它，即使在严格模式下也不会抛出错误；它的 `setter` 方法是空操作将被忽略。

值
-

返回当前处于全屏模式的 `Element` 对象；如果当前页面未使用全屏模式，则返回 `null`。

示例
--

这个示例展示了一个名为 `isVideoInFullscreen()` 的函数，该函数查看 `fullscreenElement` 返回的值；如果文档处于全屏模式（`fullscreenElement` 不为 `null`）并且全屏元素的 `nodeName` 为 `VIDEO`，表示为 `<video>` 元素，则函数返回 `true`，表示视频处于全屏模式。


```js
function isVideoInFullscreen() {
  if (document.fullscreenElement?.nodeName === "VIDEO") {
    return true;
  }
  return false;
}
```

规范
--

| Specification |
| --- |
| Fullscreen API Standard # ref-for-dom-document-fullscreenelement① |

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

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

参见
--

* 全屏 API
* 全屏 API 指南
* `Element.requestFullscreen()`
* `Document.exitFullscreen()`
* `Document.fullscreenEnabled`
* `:fullscreen` 和 `::backdrop`
* `<iframe>` `allowfullscreen` 属性
document.all
============

**HTML5:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

`Document` 接口上的一个只读属性。返回一个 `HTMLAllCollection` (en-US)，包含了页面上的所有元素。

语法
--
```

var htmlAllCollection = document.all;
```

### 值

返回一个 `HTMLAllCollection` (en-US)，包含了页面上的所有元素。

规范
--

| Specification |
| --- |
| HTML Standard # dom-document-all |

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

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

文档对象模型`Document`引用的 **`querySelector()`** 方法返回文档中与指定选择器或选择器组匹配的第一个 `Element`对象。如果找不到匹配项，则返回`null`。

**备注：** 匹配是使用深度优先先序遍历，从文档标记中的第一个元素开始，并按子节点的顺序依次遍历。

语法
--


```js
element = document.querySelector(selectors);
```

### 参数

`selectors`

包含一个或多个要匹配的选择器的 DOM 字符串`DOMString`。该字符串必须是有效的 CSS 选择器字符串；如果不是，则引发`SYNTAX_ERR`异常。请参阅使用选择器定位 DOM 元素以获取有关选择器以及如何管理它们的更多信息。


**备注：** 必须使用反斜杠字符转义不属于标准 CSS 语法的字符。由于 JavaScript 也使用退格转义，因此在使用这些字符编写字符串文字时必须特别小心。有关详细信息，请参阅转义特殊字符。

### 返回值

表示文档中与指定的一组 CSS 选择器匹配的第一个元素，一个 `Element`对象。如果没有匹配到，则返回 null。

如果你需要与指定选择器匹配的所有元素的列表，则应该使用`querySelectorAll()` 。

### 异常

`SYNTAX_ERR`

指定`selectors`的语法无效。

注意
--

如果选择器是一个 ID，并且这个 ID 在文档中错误地使用了多次，那么返回第一个匹配该 ID 的元素。

CSS 伪类不会返回任何元素，见 Selectors API 中的相关规定。

### 转义特殊字符

如果要匹配的 ID 或选择器不符合 CSS 语法（比如不恰当地使用了冒号或者空格），你必须用反斜杠将这些字符转义。由于 JavaScript 中，反斜杠是转义字符，所以当你输入一个文本串时，你必须将它转义两次（一次是为 JavaScript 字符串转义，另一次是为 `querySelector` 转义）：


```html
<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
 console.log("#foo\bar"); // "#fooar"
 document.querySelector("#foo\bar"); // 不匹配任何元素

 console.log("#foo\\bar"); // "#foo\bar"
 console.log("#foo\\\\bar"); // "#foo\\bar"
 document.querySelector("#foo\\\\bar"); // 匹配第一个 div

 document.querySelector("#foo:bar"); // 不匹配任何元素
 document.querySelector("#foo\\:bar"); // 匹配第二个 div
</script>
```

示例
--

### 查找第一个匹配 class 属性的 html 元素

这个例子中，会返回当前文档中第一个类名为 "`myclass`" 的元素：


```js
var el = document.querySelector(".myclass");
```

### 一个更复杂的选择器

*选择器也可以非常强大，如以下示例所示*.

这里，一个 class 属性为"user-panel main"的 div 元素`<div>`(`<div class="user-panel main">`) 内包含一个 name 属性为"login"的 input 元素`<input>` (`<input name="login"/>`) ，如何选择，如下所示：


```js
var el = document.querySelector("div.user-panel.main input[name='login']");
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-queryselector① |

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

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

参见
--

* Locating DOM elements using selectors
* `Element.querySelector()`
* `Document.querySelectorAll()`
* `Element.querySelectorAll()`
document.embeds
===============

`Document`接口的只读属性`embeds` 返回当前文档内的<embed>**HTML** `<object>`元素列表

语法
--
```

nodeList = document.embeds
```

### 值

一个 `HTMLCollection`类型的值

规范
--

| Specification |
| --- |
| HTML Standard # dom-document-embeds-dev |

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

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

**`document.designMode`** 控制整个文档是否可编辑。有效值为 `"on"` 和 `"off"` 。根据规范，该属性默认为 `"off"` 。Firefox 遵循此标准。早期版本的 Chrome 和 IE 默认为 `"inherit"` 。从 Chrome 43 开始，默认值为 `"off"` ，并且不再支持 `"inherit"`。在 IE6 到 IE10 中，该值为大写。

语法
--
```

var mode = document.designMode;
document.designMode = "on" || "off";
```

示例
--

使一个 `<iframe>` 的文档可编辑：


```js
iframeNode.contentDocument.designMode = "on";
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-document-designmode-dev |

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

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

参见
--

* Mozilla 软件中的富文本编辑
* `HTMLElement.contentEditable`
document.fgColor
================

### 概述

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

 `fgColor` 属性用来获取或设置当前文档的前景色或者文本颜色。### 语法
```

  var color = document.fgColor;
  document.fgColor = color;
```

### 参数

* `color` 是一个颜色值，可以为一个颜色类型，比如"red",或者一个 16 进制 RGB 值，比如 "`#ff0000`".
### 例子
```

document.fgColor = "white";
document.bgColor = "darkblue";
```

### 备注

在 Mozilla Firefox 中，该属性的默认值是黑色.(`black 或者#000000`).

`document.fgColor` 属性已经在DOM Level 2中被废弃。推荐使用的`css`属性为`color` (用法为 `document.body.style.color = "red"`).

另外一个类似的属性是 `document.body.text`, 该属性也在 HTML 4.01 中被废弃，推荐使用 CSS 属性。

### 规范

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

Selection API 的 **`selectionchange`** 事件在当前 `Document` 的 `Selection` 改变时触发。

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

可以通过为 `selectionchange` 添加事件监听器或使用 `onselectionchange` 事件处理器来处理该事件。

**备注：** 此事件与 `<input>` 或 `<textarea>` 元素中的文本选择更改时触发的 `selectionchange` 事件不太相同。有关详细信息，请参阅 `HTMLInputElement.selectionchange_event`。

语法
--

在 `addEventListener()` 等方法中使用事件名称，或设置事件处理器属性。


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

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

事件类型
----

通用 `Event`。

示例
--


```js
// addEventListener 版本
document.addEventListener("selectionchange", () => {
  console.log(document.getSelection());
});

// onselectionchange 版本
document.onselectionchange = () => {
  console.log(document.getSelection());
};
```

规范
--

| Specification |
| --- |
| Selection API # selectionchange-event |
| Selection API # dom-globaleventhandlers-onselectionchange |

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

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

参见
--

* `selectstart`
* `Document.getSelection()` (en-US)
* `Selection`
document.hasFocus
=================

### 概述

**`Document.hasFocus()`** 方法返回一个 `Boolean`，表明当前文档或者当前文档内的节点是否获得了焦点。该方法可以用来判断当前文档中的活动元素是否获得了焦点。

**备注：** 当查看一个文档时，当前文档中获得焦点的元素一定是当前文档的活动元素，但一个文档中的活动元素不一定获得了焦点.。例如，一个在后台的窗口中的活动元素一定没有获得焦点。

### 语法
```

focused = document.hasFocus();
```


#### 返回值

如果当前文档的活动元素获得了焦点，返回 `true`，否则返回 false。

### 例子


```js
<!DOCTYPE html>
<html>
<head>
  <style type='text/css'>
    #message { font-weight: bold; }
  </style>

<script type='text/javascript'>
      setInterval("CheckPageFocus()", 200);

      function CheckPageFocus() {
            var info = document.getElementById("message");
           if (document.hasFocus()) {
             info.innerHTML = "该页面获得了焦点.";
            }
            else {
             info.innerHTML = "该页面没有获得焦点.";
           }
      }

    function OpenWindow() {
           window.open ("http://developer.mozilla.org/", "mozdev",
                     "width=640, height=300, left=150, top=260");
    }
</script>
</head>

<body>
 document.hasFocus 演示<br /><br />
<div id="message">等待用户操作</div><br />
<button onclick="OpenWindow()">打开一个新窗口</button>
</body>
</html>
```

### 浏览器兼容性

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

创建一个新的空白的文档片段 ( `DocumentFragment` (en-US))。

语法
--
```

let fragment = document.createDocumentFragment();
```


`fragment` 是一个指向空`DocumentFragment`对象的引用。

描述
--

`DocumentFragments` (en-US) 是 DOM 节点。它们不是主 DOM 树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到 DOM 树。在 DOM 树中，文档片段被其所有的子元素所代替。

因为文档片段存在于**内存中**，并不在 DOM 树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。

示例
--

此示例创建主流 Web 浏览器的列表。

### HTML


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

### JavaScript


```js
var element = document.getElementById("ul"); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ["Firefox", "Chrome", "Opera", "Safari", "Internet Explorer"];

browsers.forEach(function (browser) {
  var li = document.createElement("li");
  li.textContent = browser;
  fragment.appendChild(li);
});

element.appendChild(fragment);
```

### 结果

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-createdocumentfragment① |

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

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

参见
--

* `document.implementation.createDocument()`
* `documentFragment`
document.releaseCapture
=======================

### 概述

如果该 document 中的一个元素之上当前启用了鼠标捕获，则释放鼠标捕获。通过调用 `element.setCapture()` 实现在一个元素上启用鼠标捕获。

### 语法
```

document.releaseCapture()
```


一旦释放鼠标捕获，鼠标事件将不再全部被定向到启用了鼠标捕获的元素。

### 示例

请参见 `element.setCapture()` 的 示例

### 规范

基于 Internet Explorer 的实现。

### 参见

* `element.setCapture()`
Document.plugins
================

`Document`接口的**插件**只读属性返回一个`HTMLCollection` 对象，该对象包含一个或多个`HTMLEmbedElement` (en-US)s 表示当前文档中的`<embed>` 元素。

**备注：** 对于已安装的插件列表，请使用 NavigatorPlugins.plugins (en-US) 插件。

语法
--
```

embedArrayObj = document.plugins
```

### 值

一个 `HTMLCollection`, 如果文档中没有嵌入则为 null。

规范
--

| Specification |
| --- |
| HTML Standard # dom-document-plugins-dev |

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

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

另请参见
----

* MSDN documentation