recursal/MDN huggingface dataset:
Document.createTextNode()
=========================

创建一个新的`文本` (en-US)节点。这个方法可以用来转义 HTML 字符。

语法
--
```

var text = document.createTextNode(data);
```


* *`text`* 是一个文本节点。
* *`data`* 是一个字符串，包含了要放入文本节点的内容。
示例
--


```html
<!doctype html>
<html lang="zh-CN">
  <head>
    <title>createTextNode 示例</title>
  </head>

  <body>
    <button value="YES! ">YES!</button>
    <button value="NO! ">NO!</button>
    <button value="WE CAN! ">WE CAN!</button>

    <hr />

    <p id="p1">段落的第一行。</p>

    <script>
 const p1 = document.getElementById("p1"),
 buttons = document.body.querySelectorAll(":scope > button");
 function addTextNode(text) {
 p1.appendChild(document.createTextNode(text));
 }
 buttons.forEach((button) =>
 button.addEventListener("click", () => addTextNode(button.value)),
 );
 </script>
  </body>
</html>
```

### 规范

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

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

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

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

语法
--


```js
Object.queryCommandState(String command)
```

描述
--

返回 指定命令 在对象内的状态码（1 表示指定命令在对象内已执行；0 表示指定命令在对象内未执行，处于可执行状态；-1 表示指定命令在对象内处于不可用状态）

规范
--

此特性不属于任何规范，也不再有望被标准化。

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

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

参见
--

* `document.contentEditable`
* `document.designMode`
* Rich-Text Editing in Mozilla
* Browser bugs related to `queryCommandState()`: Scribe's "Browser Inconsistencies" documentation
Document.visibilityState
========================

**`Document.visibilityState`** （只读属性）, 返回`document`的可见性，即当前可见元素的上下文环境。由此可以知道当前文档 (即为页面) 是在背后，或是不可见的隐藏的标签页，或者 (正在) 预渲染。可用的值如下：

* `'visible'` : 此时页面内容至少是部分可见。即此页面在前景标签页中，并且窗口没有最小化。
* `'hidden`' : 此时页面对用户不可见。即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 '锁屏状态' .
* `'prerender'` : 页面此时正在渲染中，因此是不可见的 (considered hidden for purposes of `document.hidden`). 文档只能从此状态开始，永远不能从其他值变为此状态。注意：浏览器支持是可选的。

当此属性的值改变时，会递交 `visibilitychange` 事件给`Document`.

典型用法是防止当页面正在渲染时加载资源，或者当页面在背景中或窗口最小化时禁止某些活动。

语法
--
```

var string = document.visibilityState
```

示例
--


```js
document.addEventListener("visibilitychange", function () {
  console.log(document.visibilityState);
  // Modify behavior...
});
```

规范
--

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

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

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

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

**`elementsFromPoint()`** 是 `DocumentOrShadowRoot` 下的一个函数，该函数返还在特定坐标点下的 HTML 元素数组。

语法
--
```

var elements = document.elementsFromPoint(x, y);
```

### 参数

x

坐标点的水平坐标值

y

坐标点的垂向坐标值

### 返回值

一个包含 `element` 对象的数组。

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-document-elementsfrompoint |

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

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

返回一个 `Range` 对象。

语法
--
```

range = document.createRange();
```


`range` 是一个 `Range` 对象。

例子
--


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

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

注意
--

一旦一个 Range 对象被建立，在使用他的大多数方法之前需要去设置他的临界点。

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

* DOM Level 2 Range: DocumentRange.createRange
Document.defaultView
====================

### 概述

在浏览器中，该属性返回当前 `document` 对象所关联的 `window` 对象，如果没有，会返回 `null`。

### 语法
```

var win = document.defaultView;
```


该属性只读。

### 备注

根据 quirksmode，IE 9 以下版本不支持 `defaultView`。

### 规范

* HTML5: defaultView
* DOM Level 2 Views: defaultView
* DOM Level 3 Views (Only developed to Working Group Note and not implemented)
DocumentOrShadowRoot.styleSheets
================================

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

**`styleSheets` 是** `DocumentOrShadowRoot` 接口定义的只读属性，它会返回一个 `StyleSheetList` / `CSSStyleSheet` 对象，这个对象对应的是通过引入或者嵌入文档中的样式表。

示例代码
----


```js
function getStyleSheet(unique\_title) {
  for (var i = 0; i < document.styleSheets.length; i++) {
    var sheet = document.styleSheets[i];
    if (sheet.title == unique_title) {
      return sheet;
    }
  }
}
```

### 说明

返回的列表中，排序规则如下：

* header 标签中通过 link 标签引入的样式优先，多个 link 样式表以出现顺序排序
* 接着是在文档中定义的样式表，存在多个这样的样式表时，以tree order（译注：先序深度优先遍历树）规则进行排序
规范
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-documentorshadowroot-stylesheets |

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

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

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

`exitPointerLock` 方法可异步的解锁鼠标（通过`Element.requestPointerLock`锁定的）。

追踪是否解锁成功，需要监听`pointerlockchange` 和`pointerlockerror` (en-US) 事件。

语法
--
```

document.exitPointerLock();
```

规范
--

| Specification |
| --- |
| Pointer Lock 2.0 # dom-document-exitpointerlock |

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

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

参见
--

* `Document.pointerLockElement`
* `Element.requestPointerLock()`
* Pointer Lock (en-US)
Document.bgColor
================

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

`bgColor` 获取/设置当前文档的背景颜色

语法
--
```

color = document.bgColor
document.bgColor =color
```

### 参数

* `color` 表示颜色的字符串如“red”，或者是十六进制的色值如“#ff0000”。
示例
--
```

document.bgColor = "darkblue";
```

笔记
--

这个属性在 Mozilla Firefox 中的默认值是白色“#ffffff”。

`document.bgColor` 在 DOM Level 2 HTML 中已经不推荐使用。推荐使用 CSS 的 background-color 或者 `document.body.style.backgroundColor` 来给文档设置背景颜色。另外一种方式是使用 `document.body.bgColor`, 这种方式也已经不推荐使用了。
Document：startViewTransition() 方法
=================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

View Transitions API 的 **`startViewTransition()`** 方法开始一个新的视图过渡，并返回一个 `ViewTransition` 对象来表示它。

当调用 `startViewTransition()` 时，将按照视图过渡过程中所述的步骤序列进行。

语法
--


```js
startViewTransition(callback)
```

### 参数

`callback`

一个在视图过渡过程中通常用于更新 DOM 的回调函数，它返回一个 `Promise`。这个回调函数在 API 截取了当前页面的屏幕截图后被调用。当回调函数返回的 Promise 兑现时，视图过渡将在下一帧开始。如果回调函数返回的 Promise 拒绝，过渡将被放弃。

### 返回值

一个 `ViewTransition` 对象实例。

示例
--

### 基本用法

在基础视图过渡演示中，`updateView()` 函数处理支持和不支持 View Transitions API 的浏览器。在支持的浏览器中，我们调用 `startViewTransition()` 来启动视图过渡，而不关心返回值。


```js
function updateView(event) {
  // 处理在 <a> 或 <img> 上触发事件的差异
  let targetIdentifier;
  if (event.target.firstChild === null) {
    targetIdentifier = event.target;
  } else {
    targetIdentifier = event.target.firstChild;
  }

  const displayNewImage = () => {
    const mainSrc = `${targetIdentifier.src.split("\_th.jpg")[0]}.jpg`;
    galleryImg.src = mainSrc;
    galleryCaption.textContent = targetIdentifier.alt;
  };

  // 浏览器不支持 View Transitions 时的回退方案：
  if (!document.startViewTransition) {
    displayNewImage();
    return;
  }

  // 开始一次视图过渡：
  const transition = document.startViewTransition(() => displayNewImage());
}
```

规范
--

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-document-startviewtransition |

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

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

参见
--

* 使用 View Transitions API 实现平滑、简单的过渡
Document.hidden
===============

**`Document.hidden`** （只读属性）返回布尔值，表示页面是（true）否（false）隐藏。

语法
--
```

var string = document.hidden
```

示例
--


```js
document.addEventListener("visibilitychange", function () {
  console.log(document.hidden);
  // Modify behavior...
});
```

规范
--

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

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

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

`Document` 接口上的只读属性 **`fullscreenEnabled`** 表明全屏模式是否可用。

全屏模式仅适用于不包含任何窗口化插件的页面，或者页面中的所有 `<iframe>` 元素都设置了 `allowfullscreen` 属性。

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

值
-

一个布尔值，如果调用 `Element.requestFullscreen()` 能进入全屏模式，则为 `true`。如果全屏模式不可用，则该值为 `false`。

示例
--

在下面的示例中，在 `<video>` 元素尝试请求全屏模式之前，检查 `fullscreenEnabled` 的值，以避免在不可用时调用 `Element.requestFullscreen()` 方法。


```js
function requestFullscreen() {
  if (document.fullscreenEnabled) {
    videoElement.requestFullscreen();
  } else {
    console.log("你的浏览器现在无法使用全屏模式");
  }
}
```

规范
--

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

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

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

参见
--

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

Document.dir 的本质是 DOMString，代表了文档的文字朝向，是从左到右 (默认) 还是从右到左。

'rtl'(right to left) 代表从右到左，'ltr'(left to right) 代表从左到右。

语法
--
```

console.log(document.dir);// "" (译者添加)
document.dir = "ltr"//(默认);
document.dir = "rtl";
dirStr = document.dir;
document.dir = dirStr;
```


（译者注：第一次调用该属性时，可能返回空字符串""，译者环境：chrome，版本 53.0.2785.116 m）

说明
--

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

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

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

参见
--

* http://msdn.microsoft.com/en-us/library/ms533731.aspx
Document.head
=============

概述
--

返回当前文档中的 `<head>` 元素。如果有多个 `<head>` 元素，则返回第一个。

语法
--
```

var objRef = document.head;
```

示例
--


```js
// HTML 部分源码为：<head id="my-document-head">
var aHead = document.head;

alert(aHead.id); // "my-document-head";

alert(document.head === document.querySelector("head")); // true
```

附注
--

`document.head` 是个只读属性，为该属性赋值只会静默失败，如果在严格模式中，则会抛出`TypeError`异常。

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

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

规范
--

* HTML5: DOM Tree Accessors
Document.exitFullscreen()
=========================

**`Document.exitFullscreen()`** 方法用于让当前文档退出全屏模式（原文表述不准确，详见备注）。调用这个方法会让文档回退到上一个调用`Element.requestFullscreen()`方法进入全屏模式之前的状态。

**备注：** 如果一个元素 A 在请求进去全屏模式之前，已经存在其他元素处于全屏状态，当这个元素 A 退出全屏模式之后，之前的元素仍然处于全屏状态。浏览器内部维护了一个全屏元素栈用于实现这个目的。

语法
--
```

document.exitFullscreen();
```

示例
--


```js
// 点击切换全屏模式
document.onclick = function (event) {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    document.documentElement.requestFullscreen();
  }
};
```

规范
--

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

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

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

参阅
--

* Using full-screen mode
* `Element.requestFullscreen()`
* `Document.exitFullscreen()`
* `Document.fullscreen`
* `Document.fullscreenElement`
* `:fullscreen`
* `allowfullscreen`
Document.scripts
================

### 概述

返回一个`HTMLCollection`对象，包含了当前文档中所有`<script>`元素的集合。

### 语法
```

var scriptList = document.scripts;
```


`scriptList` 是一个 `HTMLCollection` 对象。你可以像使用数组一样通过索引来获取其中包含的 `<script>` 元素。

### 例子

下例演示了如何查看当前页面是否包含有`<script>`元素。


```js
var scripts = document.scripts;

if (scripts.length) {
  alert("该页面存在 script 标签！");
}
```

### 浏览器兼容性

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

### 概述

返回一个字符串，其中包含了当前文档的最后修改日期和时间。

### 语法
```

var string = document.lastModified;
```

### 例子
```

dump(document.lastModified);
// 返回：Tuesday, July 10, 2001 10:19:42
```

### 备注

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

需要注意的是，作为一个字符串，`lastModified` 不能很容易的被用于与该文档的修改日期做比较。

Webkit 返回的时间为 UTC 时间;Gecko 和 IE 返回的时间为本地时区时间。
document.implementation
=======================

概要
--

返回一个和当前文档相关联的`DOMImplementation`对象。

语法
--
```

DOMImpObj = document.implementation;
```

示例
--


```js
var modName = "HTML";
var modVer = "2.0";
var conformTest = document.implementation.hasFeature(modName, modVer);

alert("DOM " + modName + " " + modVer + " supported?: " + conformTest);

// alerts with: "DOM HTML 2.0 supported?: true" if DOM Level 2 HTML module is supported.
```


可以在一致性章节中查看可用的一系列 DOM2 级模型名称（例如：Core, HTML, XML 等等）。

说明
--

W3C 的 DOM1 级建议值规定了一种检测浏览器对某个 DOM 模型是否支持的方法——`hasFeature` 方法（请参考上边的例子以及这篇文章 What does your user agent claim to support?）。如果它可用的话，那么 `DOMImplementation` 接口的其他方法就可以为操作文档以外的内容提供一些服务了。例如，`DOMImplementation` 接口包含一个 `createDocumentType` 方法，它可以为实例管理的文档创建对应的 DTD 文档定义。

方法
--

| 名称 | 动作 | 返回值 |
| --- | --- | --- |
| `createDocument` (`namespaceURI`, `qualifiedNameStr`, `DocumentType` ) |  | `document` |
| `createDocumentType` ( `qualifiedNameStr`, `publicId`, `systemId` ) |  | `DocumentType` |
| `createHTMLDocument` ( `title` ) |  | `document` |
| `getFeature` ( `feature`, `version` ) |  | `DOMObject` |
| `hasFeature` (en-US) ( `feature`, `version` ) |  | `Boolean` (en-US) |

规范
--

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

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

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

Gecko 引擎的特别说明
-------------

* 从 Gecko 19.0 开始`hasFeature` (en-US)方法总是返回 true。
Document.queryCommandEnabled()
==============================

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

**备注：** 该方法在部分浏览器返回的结果是不可预料的。因此，建议使用 execCommand 的返回值直接判断，或通过其他方式嗅探，而非使用该方法。

**`Document.queryCommandEnabled()`** 方法可查询浏览器中指定的编辑指令是否可用。

语法
--


```js
var isEnabled = document.queryCommandEnabled(command);
```

### 参数

`command`

待查询的是否可用的指令。

### 返回值

返回 `Boolean` 值，`true` 表示指令可用，`false`表示指令不可用。

备注
--

* 经过测试，在部分浏览器它永远返回 `false`，而 IE 浏览器即使对于同样支持的属性也可能有不同返回值；有时 IE 还会对不支持的属性抛出异常而不是返回 `false`。
* 对于 `"cut"` 和 `"copy"` 指令，只有当用户启动的线程调用该方法时才返回 true。
* `"paste"` 指令不仅当特性不可用时返回 `false` ，脚本权限不足时也一样。
示例
--


```js
var flg = document.queryCommandEnabled("SelectAll");

if (flg) {
  document.execCommand("SelectAll", false, null); // command is enabled, run it
}
```

规范
--

此特性不属于任何规范，也不再有望被标准化。

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

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

参考资料
----

* `Document.execCommand()`
* `Document.queryCommandSupported()`
Document：fullscreen 属性
======================

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

过时的 `Document` 接口的 **`fullscreen`** 只读属性表明页面当前是否以全屏模式显示内容。

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

**备注：** 由于该属性已被弃用，你可以通过检查 `Document.fullscreenElement` 是否不为 `null` 来确定页面是否处于全屏模式。

值
-

返回一个布尔值，如果页面当前在全屏模式下显示元素，则为 `true`；否则为 `false`。

示例
--

这个简单的函数使用过时的 `fullscreen` 属性报告当前是否激活了全屏模式。


```js
function isDocumentInFullScreenMode() {
  return document.fullscreen;
}
```


另一方面，下面的示例使用当前的 `fullscreenElement` 属性来确定同样的事情：


```js
function isDocumentInFullScreenMode() {
  return document.fullscreenElement !== null;
}
```


如果 `fullscreenElement` 不为 `null`，则返回 `true`，表示全屏模式正处于生效状态。

规范
--

| Specification |
| --- |
| Fullscreen API Standard # dom-document-fullscreen |

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

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

参见
--

* 全屏 API
* 全屏指南
* `Document.fullscreenEnabled`
document.write
==============

**`Document.write()`** 方法将一个文本字符串写入一个由 `document.open()` 打开的文档流（document stream）。

**备注：** 因为 `document.write` 需要向文档**流**中写入内容，所以，若在一个已关闭（例如，已完成加载）的文档上调用 `document.write`，就会自动调用 `document.open`，这将清空该文档的内容 (en-US)。

语法
--


```js
document.write(markup);
```

### 参数

* *markup*
    + *: 一个包含要写入文档的文本的字符串。*
### 示例


```html
<html>
  <head>
    <meta charset="UTF-8" />
    <title><code>document.write()</code> example</title>

    <script>
 function newContent() {
 document.open();
 document.write("<h1>Out with the old - in with the new!</h1>");
 document.close();
 }
 </script>
  </head>
  <body onload="newContent();">
    <p>Some original document content.</p>
  </body>
</html>
```

备注
--

向一个已经加载，并且没有调用过 `document.open()` 的文档写入数据时，会自动调用 `document.open`。一旦完成了数据写入，建议调用 `document.close()`，以告诉浏览器当前页面已经加载完毕。写入的数据会被解析到文档结构模型（DOM）里。在上面的例子里，元素 `h1` 会成为文档中的一个节点。

如果 `document.write()` 调用发生在 HTML 里的 `<script>` 标签中，那么它将不会自动调用 `document.open()`。详见如下例子：


```html
<script>
 document.write("<h1>Main title</h1>");
</script>
```


**备注：** `document.write` 和 `document.writeln` 在 XHTML 文档中不可用（控制台上会显示 "Operation is not supported"[`NS_ERROR_DOM_NOT_SUPPORTED_ERR`] 的报错信息）。当打开本地的 .xhtml 格式的文件或任何其他 MIME 类型为 `application/xhtml+xml` 的文档时，均会报错。更多信息可查看 W3C XHTML FAQ。

**备注：** 在有deferred 或 asynchronous 属性的 script 中，`document.write` 会被忽略，控制台会显示 "A call to `document.write()` from an asynchronously-loaded external script was ignored" 的报错信息。

**备注：** 在 Edge 中，在 `<iframe>` 内部调用 `document.write` 多于一次时会引发错误 SCRIPT70: Permission denied。

**备注：** 从 Chrome 55 开始，Chrome（可能）不会运行通过 `document.write()` 注入的`<script>`，以防止使用 2G 连接的用户找不到 HTTP 缓存。前往此链接查看这种情况发生需要满足的条件。

规范
--

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

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

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

参见
--

* `element.innerHTML`
* `document.createElement()`
document.readyState
===================

**`Document.readyState`** 属性描述了`document` 的加载状态。

当该属性值发生变化时，会在 `document` 对象上触发 `readystatechange` 事件。

值
-

一个文档的 **`readyState`** 可以是以下之一：

`loading`（正在加载）

`document` 仍在加载。

`interactive`（可交互）

文档已被解析，**正在加载**状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载。

`complete`（完成）

文档和所有子资源已完成加载。表示 `load` 状态的事件即将被触发。

示例
--

### 不同的准备状态


```js
switch (document.readyState) {
  case "loading":
    // 表示文档还在加载中，即处于“正在加载”状态。
    break;
  case "interactive":
    // 文档已经结束了“正在加载”状态，DOM 元素可以被访问。
    // 但是像图像，样式表和框架等资源依然还在加载。
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // 页面所有内容都已被完全加载。
    let CSS_rule = document.styleSheets[0].cssRules[0].cssText;
    console.log(`The first CSS rule is: ${CSS\_rule}`);
    break;
}
```

### 模拟 DOMContentLoaded 事件的 readystatechange


```js
// 模拟 DOMContentLoaded/ jquery ready
document.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    initApplication();
  }
};
```

### 模拟 load 事件的 readystatechange


```js
// 模拟 load 事件
document.onreadystatechange = function () {
  if (document.readyState === "complete") {
    initApplication();
  }
};
```

### 在 DOMContentLoaded 之前使用 readystatechange 作为事件处理程序以插入或修改 DOM
```

document.addEventListener('readystatechange', event => {
  if (event.target.readyState === 'interactive') {
    initLoader();
  }
  else if (event.target.readyState === 'complete') {
    initApp();
  }
});
```

规范
--

| Specification |
| --- |
| HTML Standard # current-document-readiness |

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

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

参见
--

* 相关事件：
    + `readystatechange`
    + `DOMContentLoaded`
    + `load`
Document：getElementById() 方法
============================

`Document` 接口的 **`getElementById()`** 方法返回一个表示 `id` 属性与指定字符串相匹配的元素的 `Element` 对象。由于元素的 ID 在指定时必须是独一无二的，因此这是快速访问特定元素的有效方法。

如果需要访问那些没有 ID 的元素，你可以考虑在 `querySelector()` 中使用选择器来查找这些元素。

**备注：** 文档中的 ID 必须是唯一的。如果一个文档中有两个及以上的元素具有相同的 ID，那么该方法只会返回查找到的第一个元素。

语法
--


```js
getElementById(id)
```


**备注：** 方法名称中 `"Id"` 的大小写*必须*正确才能使代码正常运行；`getElementByID()` 是*无*效且无法正常运行的，无论它看起来是多么自然。

### 参数

`id`

所要查找的元素的 ID。ID 是大小写敏感的字符串，且在文档中是唯一的；应只有一个元素具有任何给定的 ID。

### 返回值

返回一个表示与指定 ID 相匹配的 DOM 元素的 `Element` 对象。若在当前文档中没有找到匹配的元素，则返回 `null`。

示例
--

### HTML


```html
<html lang="zh">
  <head>
    <title>getElementById 示例</title>
  </head>
  <body>
    <p id="para">这里有一些文本</p>
    <button onclick="changeColor('blue');">蓝色</button>
    <button onclick="changeColor('red');">红色</button>
  </body>
</html>
```

### JavaScript


```js
function changeColor(newColor) {
  const elem = document.getElementById("para");
  elem.style.color = newColor;
}
```

### 结果

使用说明
----

不同于其他元素查找方法（如 `Document.querySelector()` 以及 `Document.querySelectorAll()`），`getElementById()` 只有在作为全局 `document` 的方法时才能起作用，而在 DOM 中的其他元素上*无法*生效。这是因为 ID 值在整个网页中必须保持唯一。因此没有必要为这个方法创建所谓的“局部”版本。

### 示例


```html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>文档</title>
  </head>
  <body>
    <div id="parent-id">
      <p>你好世界 1</p>
      <p id="test1">你好世界 2</p>
      <p>你好世界 3</p>
      <p>你好世界 4</p>
    </div>
    <script>
 const parentDOM = document.getElementById("parent-id");
 const test1 = parentDOM.getElementById("test1");
 // 抛出错误
 // Uncaught TypeError: parentDOM.getElementById is not a function
 </script>
  </body>
</html>
```


如果没有查找到给定 `id` 的元素，这个方法会返回 `null`。注意 `id` 参数是大小写敏感的，所以 `document.getElementById("Main")` 会返回 `null` 而不是元素 `<div id="main">`，因为“M”和“m”对于这个方法而言是不一样的。

`getElementById()` 方法不会搜索不在文档中的元素。当创建一个元素，并且分配 ID 后，你必须使用 `Node.insertBefore()` 或其他类似的方法把元素插入到文档树中，之后才能使用 `getElementById()` 访问到：


```js
const element = document.createElement("div");
element.id = "testqq";
const el = document.getElementById("testqq"); // el 会是 null！
```


对于非 HTML 文档，DOM 的实现必须说明哪个属性是 ID 类型。只有文档的 DTD 定义了这个属性名是“id”时，“id”才会被认为是 ID 类型。在 XHTML、XUL 或者其他文档中，“id”通常被定义为 ID 类型的属性。不知道哪个属性是 ID 类型的实现中，这预期会返回 `null`。

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-nonelementparentnode-getelementbyid② |

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

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

参见
--

* `Document`，其他可用于获取文档中的元素的方法和属性。
* `Document.querySelector()` 用于类似于 `'div.myclass'` 这样的查询的选择器
* xml:id——有一个允许 `getElementById()` 在 XML 文档（例如通过 Ajax 调用返回的文档）中获取 'xml:id' 的工具方法。
element.onbeforescriptexecute
=============================

概述
--

当 HTML 文档中的`<script>`标签内的代码将要执行时触发该事件，如果这个`script`标签是用`appendChild()`等方法动态添加上去的，则不会触发该事件。

语法
--
```

document.onbeforescriptexecute = funcRef;
```


当`beforescriptexecute`事件触发时，`funcRef`函数就会被调用。传入参数`event`的`target`属性指向触发该事件的那个`script`元素。

例子
--


```js
function starting(e) {
  logMessage("Starting script with ID: " + e.target.id);
}

document.addEventListener("beforescriptexecute", starting, true);
```


查看在线演示

规范
--

* HTML5
参见
--

* `element.onafterscriptexecute`
* `document.currentScript`
document.contentType
====================

### 概述

返回当前文档的 Content-Type(MIME) 类型。

### 语法
```

contentType = document.contentType;
```


该属性为只读。

### 备注

该属性的返回值是浏览器检测到的，不一定是直接读取 HTTP 响应头中的或者 HTML 中 meta 标签指定的值。

### 规范

非标准属性，仅Gecko支持。
Document.forms
==============

**`forms`** 返回当前文档中的 `<form>`元素的一个集合 (一个 `HTMLCollection`)。

语法
--
```

let collection = document.forms;
```

例子：获取表单信息
---------


```html
<html>
  <head>
    <title>document.forms example</title>
  </head>

  <body>
    <form id="robby">
      <input
 type="button"
 onclick="alert(document.forms[0].id);"
 value="robby's form" />
    </form>

    <form id="dave">
      <input
 type="button"
 onclick="alert(document.forms[1].id);"
 value="dave's form" />
    </form>

    <form id="paul">
      <input
 type="button"
 onclick="alert(document.forms[2].id);"
 value="paul's form" />
    </form>
  </body>
</html>
```

例子：获取表单内的元素
-----------


```js
var selectForm = document.forms[index];
var selectFormElement = document.forms[index].elements[index];
```

规范
--

forms DOM Level 2 HTML: forms

参见
--

* DOM:form