recursal/MDN huggingface dataset:
document.createAttribute()
==========================

**`Document.createAttribute()`** 方法创建并返回一个新的属性节点。这个对象创建一个实现了 `Attr` 接口的节点。这个方式下 DOM 不限制节点能够添加的属性种类。

语法
--
```

attribute = document.createAttribute(name)
```

### 参数

* `name` ，属性的属性名。
### 返回值

一个 `Attr` 节点。

### 异常

* `INVALID_CHARACTER_ERR` 如果参数含有非法的 XML 属性字符。
例子
--


```js
var node = document.getElementById("div1");
var a = document.createAttribute("my\_attrib");
a.value = "newVal";
node.setAttributeNode(a);
console.log(node.getAttribute("my\_attrib")); // "newVal"
```

备注
--

该方法的返回值是一个类型为 `Attr` 的节点。你可以通过为该节点的 `nodeValue` 属性赋值来设置该属性节点的属性值，也可以使用常用的 setAttribute() 方法来替代该方法。

规范
--

| Specification |
| --- |
| DOM Standard # dom-document-createattribute |

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

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

参见
--

* `Document.createElement()`
Document.exitPictureInPicture()
===============================

`Document` 的 **`exitPictureInPicture()`** 方法请求退出以画中画模式浮动在此文档中播放的视频，来恢复屏幕之前的状态。这通常与先前调用的 `HTMLVideoElement.requestPictureInPicture()` 相反。

语法
--


```js
exitPictureInPicture()
```

### 参数

无。

### 返回值

一个 `Promise`，在用户代理退出画中画模式时兑现。如果在尝试退出全屏模式时发生错误，将会调用 promise 的 `catch()` 处理程序。

示例
--

此示例使当前文档在鼠标点击按钮时退出画中画模式。


```js
document.onclick = function (event) {
  if (document.pictureInPictureElement) {
    document
      .exitPictureInPicture()
      .then(() => console.log("Document Exited from Picture-in-Picture mode"))
      .catch((err) => console.error(err));
  } else {
    video.requestPictureInPicture();
  }
};
```


注意，如果你想要跟踪页面上正在以画中画模式播放的视频，你应该在 `HTMLVideoElement` 元素上监听 `enterpictureinpicture` 和 `exitpictureinpicture` 事件。或者，你可以检查 `Document.pictureInPictureElement` 元素是否引用了当前的 `HTMLVideoElement` 元素。

规范
--

| Specification |
| --- |
| Picture-in-Picture # ref-for-dom-document-exitpictureinpicture |

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

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

参见
--

* `HTMLVideoElement.requestPictureInPicture()`
* `HTMLVideoElement.disablePictureInPicture`
* `Document.pictureInPictureEnabled`
* `Document.pictureInPictureElement`
* `:picture-in-picture`
* Picture-in-Picture events
Document：styleSheetSets 属性
==========================

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

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

**`styleSheetSets`** 只读属性返回一个所有当前可用样式表集合的实时列表。

值
-

一个可用的样式表集合的列表。

示例
--

给定一个 ID 为“sheetList”的 `<ul>`（列表）元素，你可以使用下面的代码将所有可用样式表集合的名称填充到列表中：


```js
const list = document.getElementById("sheetList");
const sheets = document.styleSheetSets;

list.textContent = "";

for (const sheet of sheets) {
  const item = document.createElement("li");
  item.textContent = sheet;
  list.appendChild(item);
}
```

备注
--

可用样式表集合的列表是通过以下方式构建的：按照文档中所有可用的样式表在 `Document.styleSheets` 属性中列出的顺序枚举，并将每个具有标题的样式表的 `title` 添加到列表中。列表中的重复项将被删除（使用区分大小写的比较）。

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

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

参见
--

* `Stylesheet`
* `document.styleSheets`
* `document.lastStyleSheetSet`
* `document.preferredStyleSheetSet`
* `document.selectedStyleSheetSet`
* `document.enableStyleSheetsForSet()` (en-US)
Document.links
==============

`links` 属性返回一个文档中所有具有 href 属性值的 `<area>` 元素与 `<a>` 元素的集合。

### 语法
```

nodeList = document.links
```

### 返回值

一个 `HTMLCollection`。

### 示例


```js
var links = document.links;
for (var i = 0; i < links.length; i++) {
  var linkHref = document.createTextNode(links[i].href);
  var lineBreak = document.createElement("br");
  document.body.appendChild(linkHref);
  document.body.appendChild(lineBreak);
}
```

### 规范

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

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

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

`pointerlockchange` 事件当指针解锁或者被锁定时触发

|  |  |
| --- | --- |
| 冒泡 | Yes |
| 可取消 | No |
| 接口 | `Event` |
| Event handler property | `onpointerlockchange` |

例子
--

使用 `addEventListener()`:


```js
document.addEventListener("pointerlockchange", (event) => {
  console.log("Pointer lock changed");
});
```


使用 `onpointerlockchange` 事件处理程序属性


```js
document.onpointerlockchange = (event) => {
  console.log("Pointer lock changed");
};
```

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

| Specification |
| --- |
| Pointer Lock 2.0 # pointerlockchange-and-pointerlockerror-events |
| Pointer Lock 2.0 # dom-document-onpointerlockchange |

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

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

参考
--

* Using Pointer Lock API
Document：visibilitychange 事件
============================

当其选项卡的内容变得可见或被隐藏时，会在 document 上触发 `visibilitychange` 事件。

该事件不可取消。

语法
--

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


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

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

事件类型
----

通用 `Event`。

使用说明
----

该事件不包括文档的更新的可见性状态，但是你可以从文档的 `visibilityState` 属性中获取该信息。

当用户导航到新页面、切换标签页、关闭标签页、最小化或关闭浏览器，或者在移动设备上从浏览器切换到不同的应用程序时，该事件就会触发，其 `visibilityState` 为 `hidden`。过渡到 `hidden` 是页面能可靠观察到的最后一个事件，因此开发人员应将其视为用户会话的可能结束（例如，用于发送分析数据）。

向 `hidden` 过渡也是页面停止用户界面更新和停止用户不想在后台运行的任何任务的好时机。

示例
--

### 在文档转向隐藏状态时暂停音乐

本示例在文档可见时开始播放音乐曲目，在文档不再可见时暂停音乐。


```js
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});
```

### 在文档转向隐藏状态时发送会话结束分析报告

本示例将 `hidden` 转换视为用户会话的结束，并使用 `Navigator.sendBeacon()` API 发送相应的分析结果。


```js
document.onvisibilitychange = () => {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData);
  }
};
```

规范
--

| Specification |
| --- |
| HTML Standard # event-visibilitychange |
| HTML Standard # handler-onvisibilitychange |

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

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

参见
--

* 页面可见性 API
* `Document.visibilityState`
* 使用页面可见性，不丢失用户和应用程序状态详细解释了为什么应该使用 `visibilitychange`，而不是 `beforeunload`/`unload`。
* 页面生命周期 API 提供了在 web 应用程序中处理页面生命周期行为的最佳实践指导。
Document.alinkColor
===================

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

返回或设置文档体内的活动链接的颜色。mousedown 和 mouseup 事件之间的时间在一个链接是有效的。

语法
--
```

color = document.alinkColor
document.alinkColor  = color
color 可以是一个“颜色名称”（例如，“blue”，“darkblue”，等）或者是一个“十六进制的颜色值”（例如，#0000ff）
```

注意
--

这个属性在 Mozilla Firefox 浏览器的默认值是红色的（#ee0000 十六进制）。

document.alinkcolor 在 DOM Level 2 HTML 中不推荐使用。可以使用 CSS 伪类选择器 `:active`。

另一种选择是使用 document.body.alink，虽然这在 HTML 4.01 中可以用 CSS 使用替代。

Gecko 支持 alinkcolor/:active 和 `:focus`。在 Internet Explorer 6/7 中 alinkcolor/:active 仅在 HTML Elemeint A 上有效。
Document.title
==============

`document.title` 属性用于获取或设置文档的标题。如果存在，它的默认为 `<title>` 的值。

值
-

一个包含*文档*标题的字符串。如果通过设置 `document.title` 将标题覆盖，则返回覆盖后的值。否则返回 `<title>` 元素里指定的标题。


```js
document.title = newTitle;
```


`newTitle` 是文档的新标题。赋值操作影响 `document.title` 的返回值、文档的显示标题（即窗口或标签页顶部的标题栏），另外还会影响文档的 DOM，即改变 HTML 文档中 `<title>` 元素的内容。

示例
--


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body>
    <script>
 alert(document.title); // 显示 "Hello World!"
 document.title = "Goodbye World!";
 alert(document.title); // 显示 "Goodbye World!"
 </script>
  </body>
</html>
```

规范
--

| Specification |
| --- |
| HTML Standard # document.title |

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

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

当 HTML 文档完全解析，且所有延迟脚本（`<script defer src="…">` 和 `<script type="module">`）下载和执行完毕后，会触发 **`DOMContentLoaded`** 事件。它不会等待图片、子框架和异步脚本等其他内容完成加载。

`DOMContentLoaded` 不会等待样式表加载，但延迟脚本*会*等待样式表，而且 `DOMContentLoaded` 事件排在延迟脚本之后。此外，非延迟或异步的脚本（如 `<script>`）将等待已解析的样式表加载。

另一个事件——`load`——只能用于检测完全加载的页面。有一个常见的错误就是在 `DOMContentLoaded` 事件更合适时使用了 `load` 事件。

这个事件不可取消。

语法
--

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


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

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

事件类型
----

通用 `Event`。

示例
--

### 基本用法


```js
document.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOM 完全加载和解析");
});
```

### 延迟 DOMContentLoaded


```html
<script>
 document.addEventListener("DOMContentLoaded", (event) => {
 console.log("DOM 完全加载和解析");
 });

 for (let i = 0; i < 1\_000\_000\_000; i++);
 // 这段同步脚本将会延迟 DOM 解析，
 // 所以 DOMContentLoaded 事件将会延迟执行。
</script>
```

### 检查加载是否已经完成

在你的脚本有机会运行前，`DOMContentLoaded` 可能就已经被触发。所以你在决定添加一个事件监听器前最好先检查一下。


```js
function doSomething() {
  console.info("DOM 加载了");
}

if (document.readyState === "loading") {
  // 此时加载尚未完成
  document.addEventListener("DOMContentLoaded", doSomething);
} else {
  // `DOMContentLoaded` 已经被触发
  doSomething();
}
```


**备注：** 这里不存在竞争条件——文档不可能在 `if` 检查和 `addEventListener()` 调用之间被加载。JavaScript 采用的是运行到完成语义，这意味着如果文档在事件循环的某个特定时间点正在加载，那么在下一个循环之前它是不可能被加载的，而在下一个循环中，`doSomething` 处理程序已经附加并将被触发。

### 运行实例

#### HTML


```html
<div class="controls">
  <button id="reload" type="button">重新加载</button>
</div>

<div class="event-log">
  <label for="eventLog">事件日志：</label>
  <textarea
 readonly
 class="event-log-contents"
 rows="8"
 cols="30"
 id="eventLog"></textarea>
</div>
```


```
body {
  display: grid;
  grid-template-areas: "control log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

#reload {
  height: 2rem;
}
```


#### JavaScript


```js
const log = document.querySelector(".event-log-contents");
const reload = document.querySelector("#reload");

reload.addEventListener("click", () => {
  log.textContent = "";
  setTimeout(() => {
    window.location.reload(true);
  }, 200);
});

window.addEventListener("load", (event) => {
  log.textContent += "load\n";
});

document.addEventListener("readystatechange", (event) => {
  log.textContent += `readystate: ${document.readyState}\n`;
});

document.addEventListener("DOMContentLoaded", (event) => {
  log.textContent += "DOMContentLoaded\n";
});
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # stop-parsing |

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

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

参见
--

* 相关事件：`load`、`readystatechange`、`beforeunload`、`unload`
document.anchors
================

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

### 概述

`anchors`属性返回当前文档中的所有锚点元素。

### 语法
```

nodeList = document.anchors
```

### 例子


```js
if (document.anchors.length >= 5) {
  dump("dump found too many anchors");
  window.location = "http://www.google.com";
}
```


下例自动生成一个目录列表，包含了到每个段落的锚点。


```js
<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript" charset="utf-8">
    function init() {
        var toc = document.getElementById("toc");
        var i, li, newAnchor;
        for (i = 0; i < document.anchors.length; i++) {
            li = document.createElement("li");
            newAnchor = document.createElement('a');
            newAnchor.href = "#" + document.anchors[i].name;
            newAnchor.innerHTML = document.anchors[i].text;
            li.appendChild(newAnchor);
            toc.appendChild(li);
        }
    }

    </script>
</head>
<body onload="init()">

<h1>Title</h1>
<a name="contents"><h2>Contents</h2></a>
<ul id="toc"></ul>

<a name="plants"><h2>Plants</h2></a>
<ol>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Pears</li>
</ol>

<a name="veggies"><h2>Veggies</h2></a>
<ol>
    <li>Carrots</li>
    <li>Celery</li>
    <li>Beats</li>
</ol>

</body>
</html>
```


在 JSFiddle 中查看

### 备注

由于向后兼容的原因，该属性只返回那些拥有 `name` 属性的 `a` 元素，而不是那些拥有 `id` 属性的 `a` 元素。

### 规范

DOM Level 2 HTML: anchors
Document.location
=================

**`Document.location`** 是一个只读属性，返回一个 `Location` 对象，包含有文档的 URL 相关的信息，并提供了改变该 URL 和加载其他 URL 的方法。

尽管 `Document.location` 是一个只读的 `Location` 对象，你也能够赋给它一个 `DOMString`。这意味着你能够赋给 document.location 字符串，大多数情况下像这样使用：`document.location = 'http://www.example.com'`，也可写为`document.location.href = 'http://www.example.com'`。

只是想获取字符串形式的 URL，可以使用只读属性 `document.URL`。

If the current document is not in a browsing context, the returned value is `null`.

语法
--


```js
locationObj = document.location;
document.location = "http://www.mozilla.org"; // Equivalent to document.location.href = 'http://www.mozilla.org'
```

示例
--


```js
dump(document.location);
// Prints a string like
// "http://www.example.com/juicybits.html" to the console
```

规范
--

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

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

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

参见
--

* The interface of the returned value, `Location`.
* A similar information, but attached to the browsing context, `Window.location`
document.currentScript
======================

**`Document.currentScript`** 属性返回当前正在运行的脚本所属的 `<script>` 元素。调用此属性的脚本不能是 JavaScript 模块，模块应当使用 `import.meta` 对象。

值得注意的是，如果当前正在执行的代码是被其他代码作为回调函数或者事件处理函数调用的，那么 `currentScript` 属性不会指向任何 `<script>` 元素，而是会返回 `null`。这个属性只在脚本被解析后首次运行时有效。

语法
--
```

var curScriptElement = document.currentScript;
```

示例
--

下例演示了如何检测当前正在执行脚本的 `<script>` 元素是否是以异步模式执行的。


```js
if (document.currentScript.async) {
  console.log("Executing asynchronously");
} else {
  console.log("Executing synchronously");
}
```


View Live Examples

规范
--

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

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

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

参见
--

* `import.meta`
* `<script>`
* `document.onafterscriptexecute`
* `document.onbeforescriptexecute`
element.onafterscriptexecute
============================

概述
--

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

语法
--
```

document.onafterscriptexecute = funcRef;
```


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

例子
--


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

document.addEventListener("afterscriptexecute", finished, true);
```


查看在线演示

规范
--

* HTML5
参见
--

* `element.onbeforescriptexecute`
* `document.currentScript`
Document：selectedStyleSheetSet 属性
=================================

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

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

**`selectedStyleSheetSet`** 属性表示当前使用的样式表集合的名称。

值
-

当前使用的样式表集合的名称。你也可以使用这个属性设置当前样式表集合。

设置这个属性的值等价于用 `currentStyleSheetSet` 的值调用 `document.enableStyleSheetsForSet()` (en-US)，然后将 `lastStyleSheetSet` 的值设置为该值。

**备注：** 这个属性的值是实时的，直接更改样式表中的 `disabled` 属性将会影响这个属性的值。

示例
--


```js
console.log(`当前样式表集合：${document.selectedStyleSheetSet}`);

document.selectedStyleSheetSet = "其他的某些样式表";
```

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

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

参见
--

* `document.lastStyleSheetSet`
* `document.preferredStyleSheetSet`
* `document.styleSheetSets`
* `document.enableStyleSheetsForSet()` (en-US)
Document.open()
===============

**`Document.open()`** 方法打开一个要写入的文档。

这将会有一些连带的影响。例如：

* 此时已注册到文档、文档中的节点或文档的 window 的所有事件监听器会被清除。
* 文档中的所有节点会被清除。
语法
--
```

document.open();
```

### 参数

无。

### 返回值

一个 `Document` 对象实例。

示例
--

以下简单的代码，会打开一个文档，并将原有内容替换为一些不同的 HTML 片段，然后关闭文档。
```

document.open();
document.write("<p>Hello world!</p>");
document.write("<p>I am a fish</p>");
document.write("<p>The number is 42</p>");
document.close();
```

注意
--

当 document.write() 在页面加载后调用，会发生自动的 `document.open()`调用。

 很多年以来，Firefox 和 IE 浏览器会在清除所有节点的同时，将所有 Javascript 变量等一并清除，但现在已经不采用这一做法。
 document non-spec'ed parameters to document.open

不要和 window.open() 方法混淆。`document.open` 可用于重写当前的文档内容或者追加内容，而 `window.open` 是提供了打开一个新的窗口的方法，当前的网页文档内容会被保留。由于 `window` 是一个全局对象，直接调用 `open(...)` 和 `window.open(...)` 的效果是一样的。你可以使用 `document.close()` 关闭打开的文档。

See Security check basics for more about principals.

如果不想在当前文本追加内容，使用 `open("text/html", "replace")` 替换 `open()`。

### 针对 Gecko 的注意事项

从 Gecko 1.9 开始，这个方法与其他属性一样受到同源策略的控制，若调用会使文档的源产生变化则不可用。

从 Gecko 1.9.2 开始，`document.open()` 使用文档的使用的 URI 的principal大，而不是从 stack 中取来 principal。因此，你无需再在不可信的文档里调用 `document.write()` ，包括使用`wrappedJSObject`。关于 principal 的更多信息详见Security check basics。

三个参数的 document.open()
---------------------

有一个更少人知道且更少被使用的 `document.open()` 的版本，这是`Window.open()` 的一个别名（前往该页面查看更多）。

这种调用，例如在新窗口打开 github.com，把 opener 设为`null`：
```

document.open('https://www.github.com','', 'noopener=true')
```

两个参数的 document.open()
---------------------

浏览器过往支持一个两个参数版本的`document.open()`，方法参数签名如下：
```

document.open(type, replace)
```


`type`指定了所需写入的数据的 MIME 类型，`replace`（如有设置，值为一个字符串“replace”）指定了新文档的历史写入会代替现有的例如写入。

这种形式现在已经弃用；它不会抛出错误，但会直接调用`document.open()`（相当于无参数形式的调用）。这种历史写入替换行为现在一定会发生。

规范
--

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

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

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

参见
--

* `Document`
* `Window.open()`
Document：caretPositionFromPoint() 方法
====================================

`Document` 接口的 **`caretPositionFromPoint()`** 属性返回一个 `CaretPosition` 对象，其中包含 DOM 节点以及该节点内光标和光标的字符偏移量。

语法
--


```js
caretPositionFromPoint(x, y)
```

### 参数

`x`

一个点的水平坐标。

`y`

一个点的垂直坐标。

### 返回值

一个 `CaretPosition` 对象。

示例
--

在下面的**演示**段落中单击任意位置即可在单击点处插入换行符。其代码位于演示下方。

### 演示

以下代码首先检查 `document.caretPositionFromPoint` 支持情况，但如果浏览器不支持，则代码会检查 `document.caretRangeFromPoint` 并使用它。

### JavaScript


```js
function insertBreakAtPoint(e) {
  let range;
  let textNode;
  let offset;

  if (document.caretPositionFromPoint) {
    range = document.caretPositionFromPoint(e.clientX, e.clientY);
    textNode = range.offsetNode;
    offset = range.offset;
  } else if (document.caretRangeFromPoint) {
    // 使用 WebKit 专有回退方法
    range = document.caretRangeFromPoint(e.clientX, e.clientY);
    textNode = range.startContainer;
    offset = range.startOffset;
  } else {
    // 两个方法都不支持，什么都不做
    return;
  }
  // 只分割 TEXT\_NODE
  if (textNode?.nodeType === 3) {
    let replacement = textNode.splitText(offset);
    let br = document.createElement("br");
    textNode.parentNode.insertBefore(br, replacement);
  }
}

let paragraphs = document.getElementsByTagName("p");
for (const paragraph of paragraphs) {
  paragraph.addEventListener("click", insertBreakAtPoint, false);
}
```


```
let message = document.getElementById("message");
if (document.caretPositionFromPoint) {
  message.textContent =
    "This browser supports the standard document.caretPositionFromPoint";
  message.classList.add("supported");
} else if (document.caretRangeFromPoint) {
  message.textContent =
    "This browser supports the non-standard document.caretRangeFromPoint";
  message.classList.add("supported");
}
```

### HTML
```

<div id="message">
  This browser supports neither document.caretRangeFromPoint nor
  document.caretPositionFromPoint
</div>
```



```html
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
```


```
#message {
  color: red;
  font-weight: bold;
}

#message.fallback {
  color: darkorange;
}

#message.supported {
  color: green;
}
```

规范
--

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

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

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

参见
--

* `CaretPosition`
Document.pictureInPictureEnabled
================================

`Document` 接口的只读属性 **`pictureInPictureEnabled`**，表示画中画模式是否可用。

除非 Permissions-Policy 另有规定，否则画中画模式默认是可用的。

尽管这个属性是只读的，但是即使它被修改（甚至是在严格模式下），也不会抛出错误；setter 是无操作的并且将会被忽略。

值
-

一个布尔值，如果视频可以通过调用 `HTMLVideoElement.requestPictureInPicture()` 进入画中画模式并在浮动窗口中播放，则为 `true`。如果画中画模式不可用，则值是 `false`。

示例
--

在此示例中，在 `<video>` 元素试图进入画中画模式之前，会检查 `pictureInPictureEnabled` 的值，为避免在该功能不可用时调用。


```js
function requestPictureInPicture() {
  if (document.pictureInPictureEnabled) {
    videoElement.requestPictureInPicture();
  } else {
    console.log("Your browser cannot use picture-in-picture right now");
  }
}
```

规范
--

| Specification |
| --- |
| Picture-in-Picture # ref-for-dom-document-pictureinpictureenabled |

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

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

参见
--

* `HTMLVideoElement.requestPictureInPicture()`
* `HTMLVideoElement.disablePictureInPicture`
* `Document.exitPictureInPicture()`
* `Document.pictureInPictureElement`
* `:picture-in-picture`
document.compatMode
===================

表明当前文档的渲染模式是怪异模式/混杂模式还是标准模式。

术语
--

| 英文 | 中文 |
| --- | --- |
| Quirks mode | 怪异模式 混杂模式 |
| Standards mode | 标准模式 |
| almost standards mode limited-quirks mode | 准标准模式 |

语法
--
```

mode = document.compatMode;
```

### 值

`mode`

是一个枚举值（enumerated value），可能的值有：

* `"BackCompat"`：文档为怪异模式。
* `"CSS1Compat"`：文档不是怪异模式，意味着文档处于标准模式或者准标准模式。


**备注：** 现在，这些模式都已经被标准化了，准标准模式已和标准模式相同，而标准模式成为了默认表现。标准模式和准标准模式这两个名字已经失去了意义，不再在规范文档中出现。

例子
--


```js
if (document.compatMode == "BackCompat") {
  // 渲染模式为混杂模式
}
```

规范
--

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

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

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

**`Document.characterSet`** 只读属性返回当前文档的字符编码。该字符编码是用于渲染此文档的字符集，可能与该页面指定的编码不同。（用户可以重写编码方式。）

**备注：** `document.charset` 和 `document.inputEncoding` 属性是 `document.characterSet` 的遗留别名。不要再使用它们。

语法
--
```

var string = document.characterSet
```

示例
--
```

<button onclick="alert(document.characterSet);">查看字符集</button>
//返回当前文档的字符集，比如"ISO-8859-1" 或者 "UTF-8"
```

规范
--

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

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

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

从其他的 document 文档中获取一个节点。该节点以及它的子树上的所有节点都会从原文档删除 (如果有这个节点的话), 并且它的`ownerDocument` 属性会变成当前的 document 文档。之后你可以把这个节点插入到当前文档中。

语法
--


```js
adoptNode(externalNode)
```


`externalNode`

将要从外部文档导入的节点。

示例
--


```js
const iframe = document.querySelector("iframe");
const iframeImages = iframe.contentDocument.querySelectorAll("img");
const newParent = document.getElementById("images");

iframeImages.forEach((imgEl) => {
  newParent.appendChild(document.adoptNode(imgEl));
});
```

笔记
--

有时候调用 adopNode 可能会失败因为节点资源来自不同的源，但是这不应该是浏览器的实现问题。

In general the `adoptNode` call may fail due to the source node coming from a different implementation, however this should not be a problem with browser implementations.

> 
> 译者注：
> 
> 
> 该方法不但可以从 iframe 中获取 adopt 元素，在同一 document 文档下的不同两个元素中也可以使用，该方法可以实现从左边栏列表中选取某些元素加载到右边栏的功能。
> 
> 
> 

 将外部文档的节点插入当前文档之前，你必须使用 `document.importNode()` 从外部文档导入源节点，或者使用 `document.adoptNode()`导入源节点，
 想要了解更多的 `Node.ownerDocument` 问题，请参考 W3C DOM FAQ.

 即使你不执行导入动作，就执行插入外部文档中的节点.Firefox 目前也不会报错 (如果严格按标准执行，很多已有的网站都无法正常运行).
 我们鼓励开发者严格按标准修改自己已有的不符合上述标准的代码。

规范
--

* DOM Level 3 Core: Document.adoptNode
参见
--

* document.importNode
document.linkColor
==================

### 概述

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

 `linkColor` 用来获取和设置文档内链接元素 (<a>) 的颜色。### 语法
```

color = document.linkColor
document.linkColor = color
```

### 参数

* `color` 是一个代表颜色的字符串 (比如"red","blue"等),或者是一个 16 进制 rgb 颜色值 (比如"`#ff0000`").
### 备注

在 Mozilla Firefox 中，该属性的默认值是 blue(`或者说是#0000ee` ).

`document.linkColor`在 DOM Level 2 HTML 中已被废弃.

替代方案是在链接元素上 HTML anchor (<a>) 使用 css `color` 属性，(比如`a {color:red;}`) 或者 `:link` 伪类 ,(比如`:link {color:red;}`).

另一种方法是使用 `document.body.link`, 该属也在HTML 4.01中被废弃。

### 例子
```

document.linkColor = "blue";
```

### 规范

* `document.vlinkColor` (en-US)
* `document.alinkColor`