recursal/MDN huggingface dataset:
Node.getRootNode()
==================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
`Node` 接口的 **`getRootNode()`** 方法返回上下文中的根节点，如果 shadow DOM 可用，则对 shadow DOM 同样适用。

语法
--
```

var root = node.getRootNode(options);
```

### 参数

`options` 可选

获取根节点时的可选参数对象。下列值可供选择：

* `composed`: `Boolean` 如果检索到 shadow Root 需要返回，则设置为（`false`，默认值），如果跳过 shadow Root 检索普通 Root 则设置为（`true`）。

### 返回值

返回一个继承自 `Node` 的对象。返回值会因为 `getRootNode()` 调用的地方不同而不同; 比如说：

* 在标准的网页中调用将会返回一个 `HTMLDocument` 对象表示整个网页。
* 在 Shadow DOM 里调用将会返回一个与之相关联的 `ShadowRoot` 。
示例
--

第一个例子很简单，返回一个参照 HTML/document node 位置的一个节点。


```js
rootNode = node.rootNode;
```


我们来看一个稍微复杂的例子。这个例子展示了该属性在普通的 DOM 的 shadow DOM 的差别。 (See the full source code):


```html
<!-- source: https://github.com/jserz/js\_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html -->
<div class="js-parent">
  <div class="js-child"></div>
</div>
<div class="js-shadowHost"></div>
<script>
 // work on Chrome 54+，Opera41+

 var parent = document.querySelector(".js-parent"),
 child = document.querySelector(".js-child"),
 shadowHost = document.querySelector(".js-shadowHost");

 console.log(parent.getRootNode().nodeName); // #document
 console.log(child.getRootNode().nodeName); // #document

 // create a ShadowRoot
 var shadowRoot = shadowHost.attachShadow({ mode: "open" });
 shadowRoot.innerHTML =
 "<style>div{background:#2bb8aa;}</style>" +
 '<div class="js-shadowChild">content</div>';
 var shadowChild = shadowRoot.querySelector(".js-shadowChild");

 // The default value of composed is false
 console.log(shadowChild.getRootNode() === shadowRoot); // true
 console.log(shadowChild.getRootNode({ composed: false }) === shadowRoot); // true
 console.log(shadowChild.getRootNode({ composed: true }).nodeName); // #document
</script>
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-getrootnode① |

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

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

**`Node.isEqualNode()`** 方法可以判断两个节点是否相等。当两个节点的类型相同，定义特征 (defining characteristics) 相同（对元素来说，即 id，孩子节点的数量等等），属性一致等，这两个节点就是相等的。一些具体的数据指出：多数时候的比较是根据节点的类型来的。

### 语法
```

var isEqualNode = node.isEqualNode(otherNode);
```


* otherNode: 比较是否相等的节点。
示例
--

在本例中，我们创建了三个 `<div>` 块。第一个和第三个 div 都拥有相同的内容和属性，第二个则不一样。然后我们运行 JavaScript，使用 `isEqualNode()` 来比较这几个节点。

### HTML


```html
<div>This is the first element.</div>
<div>This is the second element.</div>
<div>This is the first element.</div>

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

### JavaScript


```js
let output = document.getElementById("output");
let divList = document.getElementsByTagName("div");

output.innerHTML +=
  "div 0 equals div 0: " + divList[0].isEqualNode(divList[0]) + "<br/>";
output.innerHTML +=
  "div 0 equals div 1: " + divList[0].isEqualNode(divList[1]) + "<br/>";
output.innerHTML +=
  "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) + "<br/>";
```

### 结果

### 规范

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-isequalnode① |

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

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

参见
--

* `Node.isSameNode()`
Node.contains()
===============

`Node` 接口的 **`contains()`** 方法返回一个布尔值，表示一个节点是否是给定节点的后代，即该节点本身、其直接子节点（`childNodes`）、子节点的直接子节点等。

**备注：** 节点*包含*在自身内部。

语法
--


```js
contains(otherNode)
```

参数
--

`otherNode`

要测试的节点。

**备注：** `otherNode` 不是可选的，但是可以设置为 `null`。

返回值
---

返回一个布尔值，如果 `otherNode` 包含在节点中会返回 `true`，否则返回 `false`。

如果 `otherNode` 参数为 `null`，则 `contains()` 始终返回 `false`。

示例
--

下面的函数用来检查一个元素是否是 body 元素的后代元素。由于 `contains` 会包含元素自身，而确定 body 是否包含自身不是设计 `isInPage` 的意图，这种情况明确返回 `false`。


```js
function isInPage(node) {
  return node === document.body ? false : document.body.contains(node);
}
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-contains① |

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

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

参见
--

* `Node.compareDocumentPosition`
* `Node.hasChildNodes`
Node.previousSibling
====================

### 概述

返回当前节点的前一个兄弟节点，没有则返回`null.`

### 语法
```

previousNode = node.previousSibling
```

### 例子
```

// <a><b1 id="b1"/><b2 id="b2"/></a>
alert(document.getElementById("b1").previousSibling); // null
alert(document.getElementById("b2").previousSibling.id); // "b1"
```

### 备注

Gecko 内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中。因此，使用诸如 `Node.firstChild` 和 `Node.previousSibling` 之类的方法可能会引用到一个空白符文本节点，而不是使用者所预期得到的节点。

详情请参见 DOM 中的空白符 (en-US) 和W3C DOM 3 FAQ: 为什么一些文本节点是空的.

获取后一个兄弟节点，请使用Node.nextSibling.

### 规范

DOM Level 1 Core: previousSibling

DOM Level 2 Core: previousSibling
Node.replaceChild()
===================

**`Node.replaceChild()`** 方法用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

语法
--


```js
replaceChild(newChild, oldChild)
```

### 参数

**`newChild`**

用来替换 `oldChild` 的新节点。如果该节点已经存在于 DOM 树中，则它首先会被从原始位置删除。

**`oldChild`**

被替换掉的原始节点。

### 返回值

返回值为被替换的节点，与 `oldChild` 为同一个节点。

示例
--


```js
// <div>
// <span id="childSpan">foo bar</span>
// </div>

// 创建一个空的 span 元素节点
// 没有 id，没有任何属性和内容
const sp1 = document.createElement("span");

// 添加一个 id 属性，值为 'newSpan'
sp1.setAttribute("id", "newSpan");

// 创建一个文本节点
const sp1_content = document.createTextNode("新的 span 元素的内容。");

// 将文本节点插入到 span 元素中
sp1.appendChild(sp1_content);

// 获得被替换节点和其父节点的引用。
const sp2 = document.getElementById("childSpan");
const parentDiv = sp2.parentNode;

// 用新的 span 元素 sp1 来替换掉 sp2
parentDiv.replaceChild(sp1, sp2);

// 结果：
// <div>
// <span id="newSpan">新的 span 元素的内容。</span>
// </div>
```

规范
--

| Specification |
| --- |
| DOM Standard # dom-node-replacechild |

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

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

参见
--

* `Node.removeChild`
* `Element.replaceWith`
Node.isDefaultNamespace
=======================

### 概述

`isDefaultNamespace` 接受一个命名空间 URI 作为参数，如果该命名空间是当前节点的默认命名空间，则返回`true`,否则返回`false`.

### 语法
```

result = node.isDefaultNamespace(namespaceURI)
```


* `result` 为 `true` 或 `false`.
* `namespaceURI` 为一个命名空间 URI.
### 例子
```

var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0];
alert(el.isDefaultNamespace(XULNS)); // true
```

### 规范

* DOM Level 3 Core: isDefaultNamespace
* Code snippets: isDefaultNamespace
Node.nodeType
=============

只读属性 **`Node.nodeType`** 表示的是该节点的类型。

描述
--

**`nodeType`** 属性可用来区分不同类型的节点，比如 `元素`, `文本` (en-US) 和 `注释`。

语法
--
```

var type = node.nodeType;
```


返回一个整数，其代表的是节点类型。其所有可能的值请参考 节点类型常量.

常量
--

### 节点类型常量

| 常量 | 值 | 描述 |
| --- | --- | --- |
| `Node.ELEMENT_NODE` | `1` | 一个 `元素` 节点，例如 `<p>` 和 `<div>`。 |
| `Node.ATTRIBUTE_NODE` | 2 | `元素` 的耦合 `属性`。 |
| `Node.TEXT_NODE` | `3` | `Element` 或者 `Attr` 中实际的 `文字` (en-US) |
| `Node.CDATA_SECTION_NODE` | `4` | 一个 `CDATASection`，例如 `<!CDATA[[ … ]]>`。 |
| `Node.PROCESSING_INSTRUCTION_NODE` | `7` | 一个用于 XML 文档的 `ProcessingInstruction` (en-US) ，例如 `<?xml-stylesheet ... ?>` 声明。 |
| `Node.COMMENT_NODE` | `8` | 一个 `Comment` 节点。 |
| `Node.DOCUMENT_NODE` | `9` | 一个 `Document` 节点。 |
| `Node.DOCUMENT_TYPE_NODE` | `10` | 描述文档类型的 `DocumentType` 节点。例如 `<!DOCTYPE html>` 就是用于 HTML5 的。 |
| `Node.DOCUMENT_FRAGMENT_NODE` | `11` | 一个 `DocumentFragment` 节点 |
|  |  |  |

以下的常量已被弃用且不再使用：`Node.ENTITY_REFERENCE_NODE`（`5`）、`Node.ENTITY_NODE`（`6`）和 `Node.NOTATION_NODE`（`12`）。

示例
--

### 不同的节点类型


```js
document.nodeType === Node.DOCUMENT\_NODE; // true
document.doctype.nodeType === Node.DOCUMENT\_TYPE\_NODE; // true

var fragment = document.createDocumentFragment();
fragment.nodeType === Node.DOCUMENT\_FRAGMENT\_NODE; // true

var p = document.createElement("p");
p.textContent = "很久很久以前...";

p.nodeType === Node.ELEMENT\_NODE; // true
p.firstChild.nodeType === Node.TEXT\_NODE; // true
```

### 注释

该示例会检查 document 下第一个节点是不是注释，如果不是，则会提醒。


```js
var node = document.documentElement.firstChild;
if (node.nodeType != Node.COMMENT\_NODE) console.log("你应该认真编写代码注释！");
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-nodetype① |
Node.isSameNode
===============

概述
--

判断两个节点是否是相同的节点，即指向同一个对象。

**警告：** 该方法已在 DOM level 4 中被废弃，最近的浏览器版本 (Gecko 10.0) 已经删除了这个方法。也就是说，不要再使用 `node1.isSameNode(node2)` 而使用 `node1 === node2` 或者 `node1 == node2` 来代替。

语法
--


```js
var isSameNode = node.isSameNode(other);
```


* `other` 是要和 `node` 判断相同性的另一个节点。
规范
--

* DOM Level 3 Core: isSameNode
* This has been removed from DOM Core Level 4
Node.baseURI
============

**`Node.baseURI`** 是只读属性，返回一个节点的绝对基址 URL。

当浏览器要获取绝对 URL 时，就需要用基 URL 去解析相对 URL。例如，解析 HTML `<img>` 元素的 `src` 属性时，或者 处理 XML `xlink:href` 属性时—。

一般情况下，基 URL 是 document 的 location，但是它受诸多方面因素的影响，例如 HTML 的 `<base>` 元素和 XML `xml:base` (en-US) 属性。

语法
--
```

var baseURI = node.baseURI;
```


* `baseURI` 是一个 `DOMString` 代表当前 `节点` 所在文档的基 URI。如果无法获取则可能返回 `null` 。
* `node.baseURI` 是只读的。
* `node.baseURI` 可能会随时间发生变化。
概述
--

### 文档的基 URL

*document* 的默认基 URL 是文档的地址（浏览器显示的地址，可以通过`window.location` 获取），但是可以通过如下方法修改：

* 当在文档中找到一个 `<base>` 标签时；
* 当一个文档被动态创建时。

详细信息请参阅 HTML Living standard 中关于基 URL 的章节 。

可以通过 ``document`.baseURI` 获取文档的基 URL。注意检查文档的基 URL 可能会每次请求返回不同的结果，因为 `<base>` 标签或文档的 location 可能被改变了。

### 元素的基 URL

元素的基 URL 一般和其所在的文档相同。

如果文档中有 `xml:base` (en-US) 属性（不要在 HTML 文档中这样做），在 `node.baseURI` 计算基 URL 时，会把 `xml:base` 属性考虑进去。参考 xml:base (en-US) 来了解更多。

可以通过 ``element`.baseURI` 获取某个元素的基 URL。

规范
--

DOM Level 3 Core: baseURI

参考
--

* `<base>` 元素（HTML）
* `xml:base` (en-US) 属性（XML 文档）
* `Node.baseURIObject` (en-US) - a variant of this API for Mozilla add-ons and internal code. Returns the base URL as an `nsIURI`.
Node.insertBefore()
===================

**`Node.insertBefore()`** 方法在参考节点之前插入一个拥有指定父节点的子节点。如果给定的子节点是对文档中现有节点的引用，`insertBefore()` 会将其从当前位置移动到新位置（在将节点附加到其他节点之前，不需要从其父节点删除该节点）。

这意味着一个节点不能同时位于文档的两个点中。因此，如果被插入节点已经有父节点，则首先删除该节点，然后将其插入到新位置。若要保留已在文档中的被插入节点，在将该节点追加到新父节点之前，可以使用 `Node.cloneNode()` 复制节点。注意，使用 `cloneNode()` 创建的节点副本不会自动与原始节点保持同步。

如果引用节点为 `null`，则将指定的节点添加到指定父节点的子节点列表的末尾。

如果给定的子节点是 `DocumentFragment`，那么 `DocumentFragment` 的全部内容将被移动到指定父节点的子节点列表中。

语法
--


```js
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
```


* `insertedNode` 被插入节点 (newNode)
* `parentNode` 新插入节点的父节点
* `newNode` 用于插入的节点
* `referenceNode` `newNode` 将要插在这个节点之前

如果 `referenceNode` 为 `null` 则 `newNode` 将被插入到子节点的末尾\*。\*

**备注：** `referenceNode` 引用节点**不是**可选参数——你必须显式传入一个 `Node` 或者 `null`。如果不提供节点或者传入无效值，在不同的浏览器中会有不同的表现。

返回值
---

函数返回被插入过的子节点；当 `newNode` 是 `DocumentFragment` 时，返回空 `DocumentFragment`。

例子
--

### 示例 1


```js
<div id="parentElement">
   <span id="childElement">foo bar</span>
</div>

<script>
// 创建要插入的节点
var newNode = document.createElement("span");

// 获得父节点的引用
var parentDiv = document.getElementById("childElement").parentNode;

//实验一：referenceNode 存在 --> 正确返回
var sp2 = document.getElementById("childElement");
parentDiv.insertBefore(newNode, sp2);
//实验一结束

//实验二：referenceNode 为 undefined
var sp2 = undefined; // Not exist a node of id "childElement"
parentDiv.insertBefore(newNode, sp2); //隐式转换到节点类型
//实验二结束

//实验三：referenceNode 为字符类型的 "undefined"
var sp2 = "undefined"; //不存在 id 为"childElement"的 referenceNode
parentDiv.insertBefore(newNode, sp2); // Generate "Type Error: Invalid Argument"
//实验三结束
</script>
```

### 示例 2


```html
<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>

<script>
 //创建一个新的、普通的<span>元素
 var sp1 = document.createElement("span");

 //插入节点之前，要获得节点的引用
 var sp2 = document.getElementById("childElement");
 //获得父节点的引用
 var parentDiv = sp2.parentNode;

 //在 DOM 中在 sp2 之前插入一个新元素
 parentDiv.insertBefore(sp1, sp2);
</script>
```


没有 `insertAfter()`。不过，可以使用 `insertBefore` 和 `Node.nextSibling` 来模拟它。

在前一个例子中，可使用下面代码将 `sp1` 插入到 `sp2` 之后：


```js
parentDiv.insertBefore(sp1, sp2.nextSibling);
```


如果 `sp2` 没有下一个节点，则它肯定是最后一个节点，则 `sp2.nextSibling` 返回 `null`，且 `sp1` 被插入到子节点列表的最后面（即 `sp2` 后面）。

### 示例 3

在第一个子元素的前面插入一个元素，可使用 firstChild 属性。


```js
//插入节点之前，要获得节点的引用
var parentElement = document.getElementById("parentElement");
//获得第一个子节点的引用
var theFirstChild = parentElement.firstChild;

//创建新元素
var newElement = document.createElement("div");

//在第一个子节点之前插入新元素
parentElement.insertBefore(newElement, theFirstChild);
```


当元素没有首节点时，`firstChild` 返回 `null`。该元素仍然会被插入到父元素中，位于最后一个节点后面。又由于父元素没有第一个子节点，也没有最后一个子节点。最终，新元素成为唯一的子元素。

规范
--

| Specification |
| --- |
| DOM Standard # dom-node-insertbefore |

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

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

参见
--

* `Node.removeChild()`
* `Node.replaceChild()`
* `Node.appendChild()`
* `Node.hasChildNodes()`
* `Element.insertAdjacentElement()`
* `ParentNode.prepend()` (en-US)
Node.nodeName
=============

概述
返回当前节点的节点名称

语法
--
```

var str = node.nodeName;
```


* `str` 是一个存储了当前节点的节点名称的字符串。
* `nodeName 是一个只读属性`.
附注
--

下表列出了所有类型的节点的`nodeName`属性的值。

| 接口 | nodeName 属性值 |
| --- | --- |
| Attr (en-US) | 等同于 `Attr.name` 属性的值 |
| CDATASection (en-US) | "#cdata-section" |
| Comment (en-US) | "#comment" |
| Document | "#document" |
| DocumentFragment (en-US) | "#document-fragment" |
| DocumentType (en-US) | 等同于 `DocumentType.name` 属性的值 |
| Element | 等同于 `Element.tagName` 属性的值 |
| Entity | 实体名称 |
| EntityReference | 实体引用名称 |
| Notation | Notation 名称 |
| ProcessingInstruction (en-US) | 等同于 `ProcessingInstruction.target` 属性的值 |
| text (en-US) | "#text" |

示例
--

假设已经存在下面的 HTML:


```html
<div id="d1">hello world</div>
<input type="text" id="t" />
```


以及下面的 JavaScript:


```js
var div1 = document.getElementById("d1");
var text_field = document.getElementById("t");

text_field.value = div1.nodeName;
```


在 XHTML(以及属于 XML 类型的文档) 中，变量 `text_field` 包含的值会是小写的"div".还在 HTML 中，变量 `text_field`包含的值会是大写的"DIV", `nodeName` 和 `tagName` 属性都有这种表现。查看details on nodeName case sensitivity in different browsers一文深入了解。

如果是元素节点，`nodeName` 属性和 `tagName` 属性返回相同的值，但如果是文本节点，`nodeName` 属性会返回 `"#text"`，而 `tagName` 属性会返回 `undefined`。

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-nodename① |
Node.lookupPrefix
=================

返回一个和指定命名空间 URI 绑定的命名空间前缀。如果没有，返回 `null`。如果有多个绑定的前缀，返回的结果根据浏览器实现而定。

根据 bug 312019, 该方法对动态指定的命名空间不起作用.(也就是通过Node.prefix指定的).

### 相关链接

* http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix
* Code snippets: lookupPrefix
Node：selectstart 事件
===================

Selection API 的 **`selectstart`** 事件在用户进行一个新的选择时触发。

如果事件被取消，所选取内容将不会改变。

语法
--

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


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

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

事件类型
----

通用的 `Event`。

示例
--


```js
// addEventListener 版本
document.addEventListener("selectstart", () => {
  console.log("已开始选择");
});

// onselectstart 版本
document.onselectstart = () => {
  console.log("已开始选择");
};
```

规范
--

| Specification |
| --- |
| Selection API # selectstart-event |
| Selection API # dom-globaleventhandlers-onselectstart |

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

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

参见
--

* `selectionchange`
Node.compareDocumentPosition
============================

**`Node.compareDocumentPosition()`** 可以比较当前节点与任意文档中的另一个节点的位置关系。

返回值是一个具有以下值的位掩码：

| 常量名 | 十进制值 | 含义 |
| --- | --- | --- |
| `DOCUMENT_POSITION_DISCONNECTED` | 1 | 不在同一文档中 |
| `DOCUMENT_POSITION_PRECEDING` | 2 | otherNode 在 node 之前 |
| `DOCUMENT_POSITION_FOLLOWING` | 4 | otherNode 在 node 之后 |
| `DOCUMENT_POSITION_CONTAINS` | 8 | otherNode 包含 node |
| `DOCUMENT_POSITION_CONTAINED_BY` | 16 | otherNode 被 node 包含 |
| `DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` | 32 | 待定 |

语法
--
```

compareMask = node.compareDocumentPosition( otherNode )
```

### 参数

`otherNode`

用于比较位置的 `Node` 。

### 返回值

一个表示 `Node` 和 `otherNode` 在 `Document` 中关系的整数值。在一些场景下，可能设置了不止一位比特值。比如 `otherNode` 在文档中是靠前的且包含了 `Node`, 那么`DOCUMENT_POSITION_CONTAINS` 和 `DOCUMENT_POSITION_PRECEDING` 位都会设置，所以结果会是 0x0A 即十进制下的 10。

例子
--


```js
var head = document.getElementsByTagName("head").item(0);
if (
  head.compareDocumentPosition(document.body) & Node.DOCUMENT\_POSITION\_FOLLOWING
) {
  console.log("well-formed document");
} else {
  console.log("<head> is not before <body>");
}
```


**备注：** 因为`compareDocumentPosition`返回的是一个位掩码，所以必须再使用按位与运算符 (en-US)才能得到有意义的值。

注意第一条语句使用了带有参数 0 的 `NodeList.item()` 方法，它和 getElementsByTagName('head')[0] 是一样的。

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-comparedocumentposition① |

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

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

相关链接
----

* `Node.contains`
* John Resig - Comparing Document Position
Node.lastChild
==============

概述
--

**`Node.lastChild`** 是一个只读属性，返回当前节点的最后一个子节点。如果父节点为一个元素节点，则子节点通常为一个元素节点，或一个文本节点，或一个注释节点。如果没有子节点，则返回 `null`。

语法
--
```

var last_child = element.lastChild
```

示例
--


```js
var tr = document.getElementById("row1");
var corner_td = tr.lastChild;
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-lastchild① |
Node.textContent
================

`Node` 接口的 **`textContent`** 属性表示一个节点及其后代的文本内容。

**备注：** `textContent` 和 `HTMLElement.innerText` 容易混淆，但这两个属性在重要方面有不同之处 。

语法
--
```

let text = someNode.textContent;
someOtherNode.textContent = string;
```

### 返回值

一个字符串或 `null`.

描述
--

`textContent` 的值取决于具体情况：

* 如果节点是一个 `document`，或者一个 DOCTYPE ，则 `textContent` 返回 `null`。

**备注：** 如果你要获取整个文档的文本以及 CDATA data ，可以使用 `document.documentElement.textContent`。
* 如果节点是个 CDATA section、注释、processing instruction (en-US) 或者 text node，`textContent` 返回节点内部的文本内容，例如 `Node.nodeValue`。
* 对于其他节点类型，`textContent` 将所有子节点的 `textContent` 合并后返回，除了注释和 processing instructions。（如果该节点没有子节点的话，返回一个空字符串。）

在节点上设置 `textContent` 属性的话，会删除它的所有子节点，并替换为一个具有给定值的文本节点。

### 与 **innerText** 的区别

不要对 `Node.textContent` 和 `HTMLElement.innerText` 之间的差异感到困惑。虽然名字看起来很相似，但有重要的不同之处：

* `textContent` 会获取*所有*元素的内容，包括 `<script>` 和 `<style>` 元素，然而 `innerText` 只展示给人看的元素。
* `textContent` 会返回节点中的每一个元素。相反，`innerText` 受 CSS 样式的影响，并且不会返回隐藏元素的文本，
    + 此外，由于 `innerText` 受 CSS 样式的影响，它会触发回流（ reflow ）去确保是最新的计算样式。（回流在计算上可能会非常昂贵，因此应尽可能避免。）
* 与 `textContent` 不同的是，在 Internet Explorer (小于和等于 11 的版本) 中对 `innerText` 进行修改，不仅会移除当前元素的子节点，而且还会*永久性地破坏*所有后代文本节点。在之后不可能再次将节点再次插入到任何其他元素或同一元素中。
### 与 **innerHTML** 的区别

正如其名称，`Element.innerHTML` 返回 HTML。通常，为了在元素中检索或写入文本，人们使用 `innerHTML`。但是，`textContent` 通常具有更好的性能，因为文本不会被解析为 HTML。

此外，使用 `textContent` 可以防止 XSS 攻击。

示例
--

给出这个 HTML 片段：


```html
<div id="divA">This is <span>some</span> text!</div>
```


你可以使用 `textContent` 去获取该元素的文本内容：


```js
let text = document.getElementById("divA").textContent;
// The text variable is now: 'This is some text!'
```


或者设置元素的文字内容：


```js
document.getElementById("divA").textContent = "This text is different!";
// The HTML for divA is now:
// <div id="divA">This text is different!</div>
```

IE8 的替代方法
---------


```js
// Source: Eli Grey @ https://eligrey.com/blog/post/textcontent-in-ie8
if (
  Object.defineProperty &&
  Object.getOwnPropertyDescriptor &&
  Object.getOwnPropertyDescriptor(Element.prototype, "textContent") &&
  !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get
) {
  (function () {
    var innerText = Object.getOwnPropertyDescriptor(
      Element.prototype,
      "innerText",
    );
    Object.defineProperty(
      Element.prototype,
      "textContent",
      // Passing innerText or innerText.get directly does not work,
      // wrapper function is required.
      {
        get: function () {
          return innerText.get.call(this);
        },
        set: function (s) {
          return innerText.set.call(this, s);
        },
      },
    );
  })();
}
```

规范
--

| Specification |
| --- |
| DOM Standard # dom-node-textcontent |

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

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

参见
--

* `HTMLElement.innerText`
* `Element.innerHTML`
* More on differences between `innerText` and `textContent` (blog post)
TransformStreamDefaultController.terminate()
============================================

`TransformStreamDefaultController` 接口的 **`terminate()`** 方法用于关闭流的可读端并且会使流的可写端出错。

语法
--


```js
terminate()
```

### 参数

无。

### 返回值

无（`undefined`）。

示例
--

在以下示例中，调用了 `TransformStreamDefaultController` 的 `terminate()` 方法。


```js
controller.terminate();
```

规范
--

| Specification |
| --- |
| Streams Standard # ts-default-controller-terminate |

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

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

`TransformStreamDefaultController` 接口的 **`enqueue()`** 方法将给定的分块排入流的可读端。

有关可读流和分块的更多信息，请参见使用可读流。

语法
--


```js
enqueue(chunk)
```

### 参数

`chunk`

正在排入的分块。一个分块是一个数据片段。它可以是任何数据类型，并且一个流可以包含不同类型的分块。

### 返回值

无（`undefined`）。

### 异常

`TypeError`

流不可读。如果流通过 `controller.error()` 发生错误，或者在没有调用它的控制器的 `controller.close()` 方法的情况下下关闭流，则可能发生这种情况。

示例
--

在此示例中，使用 `enqueue()` 方法将编码的分块传递给队列。


```js
const textEncoderStream = new TransformStream({
  transform(chunk, controller) {
    controller.enqueue(new TextEncoder().encode(chunk));
  },
  flush(controller) {
    controller.terminate();
  },
});
```

规范
--

| Specification |
| --- |
| Streams Standard # ts-default-controller-enqueue |

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

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

`TransformStreamDefaultController` 接口的只读属性 **`desiredSize`** 返回填充满关联的 `ReadableStream` 的内部队列所需要的大小。

`ReadableStream` 的内部队列包含已入队但尚未读取的分块。浏览器确定填满流**所需要的大小**，并且这个值由 `desiredSize` 属性返回。

如果这个 `desiredSize` 是 `0`，则队列已满。因此你可以使用这个信息去手动管理背压去管理队列。

值
-

所需的大小。

示例
--

在下面的示例中，`desiredSize` 被打印到控制台。


```js
console.log(controller.desiredSize);
```

规范
--

| Specification |
| --- |
| Streams Standard # ts-default-controller-desired-size |

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

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

`TransformStreamDefaultController` 接口的 **`error()`** 方法会使流的两端出错。与它的进一步交互都会失败并携带给定的错误信息，并且队列中的任何分块都将被丢弃。

语法
--


```js
error(reason)
```

### 参数

`reason`

一个字符串，包含在与流进一步交互时返回的错误信息。

### 返回值

无（`undefined`）。

示例
--

在这个示例中，当一个分块中包含 symbol 时，`error()` 方法被使用。


```js
case 'symbol':
  controller.error("Cannot send a symbol as a chunk part")
  break
```

规范
--

| Specification |
| --- |
| Streams Standard # ts-default-controller-error |

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

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

`MessageChannel` 的只读属性 **`port1`** 返回消息通道的第一个端口，此端口连接到源上下文通道。

**备注：** 此特性在 Web Worker 中可用

语法
--
```

channel.port1;
```

### Value

一个 `MessagePort` 对象，通道的第一个端口，此端口连接到源上下文通道。

示例
--

在以下代码块中，你可以看到使用 `MessageChannel()` 构造函数创建的新通道。当 `<iframe>` 加载完毕，我们使用 `MessagePort.postMessage` (en-US) 方法把一条消息和 `MessageChannel.port2` 传递给 `<iframe>`。handleMessage 处理程序将会从 <iframe> 中（使用 `MessagePort.onmessage` 监听事件）接收到信息，将数据其放入一个段落。handleMessage 方法关联到 port1 用于监听收到的消息。


```js
var channel = new MessageChannel();
var para = document.querySelector("p");

var ifr = document.querySelector("iframe");
var otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage("Hello from the main page!", "\*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}
```


一个完整的运行示例，可以在 GitHub 上查看 channel messaging basic demo (run it live too).

规范
--

| Specification |
| --- |
| HTML Standard # dom-messagechannel-port1-dev |

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

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

参考
--

* Using channel messaging