recursal/MDN huggingface dataset:
WebSocket.bufferedAmount
========================

**`WebSocket.bufferedAmount`是一个只读属性，用于返回已经被**`send()`方法放入队列中但还没有被发送到网络中的数据的字节数。一旦队列中的所有数据被发送至网络，则该属性值将被重置为 0。但是，若在发送过程中连接被关闭，则属性值不会重置为 0。如果你不断地调用`send()`，则该属性值会持续增长

The **`WebSocket.bufferedAmount`** read-only property returns the number of bytes of data that have been queued using calls to `send()` but not yet transmitted to the network. This value resets to zero once all queued data has been sent. This value does not reset to zero when the connection is closed; if you keep calling `send()`, this will continue to climb.

Syntax
------
```

var bufferedAmount = aWebSocket.bufferedAmount;
```

Value
-----

An `unsigned long`.

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

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-bufferedamount① |

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

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

The **`WebSocket.url`** read-only property returns the absolute URL of the `WebSocket` as resolved by the constructor.

\*\*`WebSocket.url`\*\*是一个只读属性，返回值为当构造函数创建`WebSocket`实例对象时 URL 的绝对路径。

语法
--
```

var url = aWebSocket.url;
```

返回值
---

A `DOMString`.

规范
--

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-url① |

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

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

**`WebSocket.close()`** 方法关闭 `WebSocket` 连接或连接尝试（如果有的话）。如果连接已经关闭，则此方法不执行任何操作。

语法
--
```

WebSocket.close();
```

### 参数

`code` 可选

一个数字状态码，它解释了连接关闭的原因。如果没有传这个参数，默认使用 1005。`CloseEvent`的允许的状态码见状态码列表 。

`reason` 可选

一个人类可读的字符串，它解释了连接关闭的原因。这个 UTF-8 编码的字符串不能超过 123 个字节。

### 抛出的异常

`INVALID_ACCESS_ERR`

一个无效的`code`

`SYNTAX_ERR`

`reason` 字符串太长（超过 123 字节）


**备注：** 在 Gecko 8.0 之前版本的 Gecko 里，这个方法不支持传参数。

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

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-close① |

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

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

**`WebSocket.binaryType`** 返回 websocket 连接所传输二进制数据的类型。

语法
--
```

var binaryType = aWebSocket.binaryType;
```

返回值
---

一条`DOMString`:

`"blob"`

如果传输的是 `Blob` 类型的数据。

`"arraybuffer"`

如果传输的是 `ArrayBuffer` 类型的数据。

规范
--

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-binarytype① |

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

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

\*\*`WebSocket.onopen`\*\*属性定义一个事件处理程序，当`WebSocket` 的连接状态`readyState` 变为`1`时调用;这意味着当前连接已经准备好发送和接受数据。这个事件处理程序通过 `事件`（建立连接时）触发。

语法
--
```

aWebSocket.onopen = function(event) {
  console.log("WebSocket is open now.");
};
```

返回值
---

An `EventListener`.

规范
--

| Specification |
| --- |
| WebSockets Standard # dom-websocket-onopen |

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

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

\*\*`WebSocket.extensions`\*\*是只读属性，返回服务器已选择的扩展值。目前，链接可以协定的扩展值只有空字符串或者一个扩展列表。

The **`WebSocket.extensions`** read-only property returns the extensions selected by the server. This is currently only the empty string or a list of extensions as negotiated by the connection.

语法
--
```

var extensions = aWebSocket.extensions;
```

返回值
---

A `DOMString`.

规范
--

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-extensions① |

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

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

**`WebSocket.protocol`** 是个只读属性，用于返回服务器端选中的子协议的名字；这是一个在创建 `WebSocket` 对象时，在参数 `protocols` 中指定的字符串，当没有已建立的链接时为空串。

语法
--
```

var protocol = aWebSocket.protocol;
```

返回值
---

`DOMString`.

规范
--

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-protocol① |

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

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

**`WebSocket.send()`** 方法将需要通过 WebSocket 链接传输至服务器的数据排入队列，并根据所需要传输的 data bytes 的大小来增加 `bufferedAmount`的值。若数据无法传输（例如数据需要缓存而缓冲区已满）时，套接字会自行关闭。

语法
--
```

WebSocket.send("Hello server!");
```

### 参数

`data`

用于传输至服务器的数据。它必须是以下类型之一：

`USVString`

文本字符串。字符串将以 UTF-8 格式添加到缓冲区，并且 `bufferedAmount` 将加上该字符串以 UTF-8 格式编码时的字节数的值。

`ArrayBuffer`

你可以使用一有类型的数组对象发送底层二进制数据；其二进制数据内存将被缓存于缓冲区，`bufferedAmount` 将加上所需字节数的值。

`Blob`

`Blob` 类型将队列 blob 中的原始数据以二进制中传输。 `bufferedAmount` 将加上原始数据的字节数的值。

`ArrayBufferView`

你可以以二进制帧的形式发送任何 JavaScript 类数组对象 ；其二进制数据内容将被队列于缓冲区中。值 `bufferedAmount` 将加上必要字节数的值。


### 异常

`INVALID_STATE_ERR`

当前连接未处于 `OPEN` 状态。

`SYNTAX_ERR`

数据是一个包含未配对代理 (unpaired surrogates) 的字符串。


**备注：** Gecko 在 Gecko 6.0 中对 `send()` 方法的实现与规范有些不一致；Gecko 返回一个 `boolean` 来告知当前连接是否依旧处于 `OPEN` 状态（同时也可以使用该返回值来判定数据是否已经被完全缓存或者传输）；这个问题在 Gecko 8.0 中被修正。

而 Gecko 11.0, 支持 `ArrayBuffer` 类型但不支持 `Blob`类型。

规范
--

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-send① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WebSocket: 错误事件
===============

当`websocket`的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时，一个`error`事件将被引发。

|  |  |
| --- | --- |
| Bubbles | No |
| Cancelable | No |
| Interface | `Event` |
| Event handler property | `onerror` |

示例
--


```js
// Create WebSocket connection
// 创建一个 WebSocket 连接
const socket = new WebSocket("ws://localhost:8080");

// Listen for possible errors
// 监听可能发生的错误
socket.addEventListener("error", function (event) {
  console.log("WebSocket error: ", event);
});
```

规范
--

| Specification |
| --- |
| WebSockets Standard # dom-websocket-onerror |

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

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

查看更多
----

* WebSocket: close event
* WebSocket: message event
* WebSocket: open event
* Writing WebSocket client applications (en-US)
WebSocket()
===========


 \*\*`WebSocket()`\*\*构造函器会返回一个 `WebSocket` 对象。
语法
--
```

var aWebSocket = new WebSocket(url [, protocols]);
```

### 参数

`url`

要连接的 URL；这应该是 WebSocket 服务器将响应的 URL。

`protocols` 可选

一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议，这样单个服务器可以实现多个 WebSocket 子协议（例如，你可能希望一台服务器能够根据指定的协议（`protocol`）处理不同类型的交互）。如果不指定协议字符串，则假定为空字符串。

### 抛出异常

`SECURITY_ERR`

正在尝试连接的端口被阻止。

规范
--

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-websocket① |

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

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

**`WheelEvent.deltaX`** 只读属性是一个 `double` 类型值，声明水平滚动量以`WheelEvent.deltaMode` 为单位。

语法
--
```

var dX = event.deltaX;
```

例子
--


```js
var syntheticEvent = new WheelEvent("syntheticWheel", {
  deltaX: 4,
  deltaMode: 0,
});

console.log(syntheticEvent.deltaX);
```

规范
--

| Specification |
| --- |
| UI Events # dom-wheelevent-deltax |

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

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

另见
--

* `wheel`
* `WheelEvent`
WheelEvent.deltaMode
====================

**`WheelEvent.deltaMode`** 只读属性返回一个 `unsigned long` 类型的值，声明 delta 的滚动值的单位。可能的值为：

| Constant | Value | Description |
| --- | --- | --- |
| `DOM_DELTA_PIXEL` | `0x00` | delta 的值为 像素 级别。 |
| `DOM_DELTA_LINE` | `0x01` | delta 的值为 行 级别。 |
| `DOM_DELTA_PAGE` | `0x02` | delta 的值为 页 级别。 |

语法
--
```

var unit = event.deltaMode;
```

例子
--


```js
var syntheticEvent = new WheelEvent("syntheticWheel", {
  deltaX: 4,
  deltaMode: 0,
});

console.log(syntheticEvent.deltaMode);
```

规范
--

| Specification |
| --- |
| UI Events # dom-wheelevent-deltamode |

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

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

另见
--

* `wheel`
* `WheelEvent`
WheelEvent.deltaY
=================

**`WheelEvent.deltaY`** 只读属性是一个 `double` 类型值，声明垂直滚动量以 `WheelEvent.deltaMode` 为单位。

语法
--


```js
var dY = event.deltaY;
```

例子
--


```js
var syntheticEvent = new WheelEvent("syntheticWheel", {
  deltaY: 4,
  deltaMode: 0,
});

console.log(syntheticEvent.deltaY);
```

规范
--

| Specification |
| --- |
| UI Events # dom-wheelevent-deltay |

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

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

另见
--

* `wheel`
* `WheelEvent`
WheelEvent.deltaZ
=================

**`WheelEvent.deltaZ`** 只读属性是一个 `double` 类型值，声明 Z 轴滚动量以`WheelEvent.deltaMode` 为单位。

语法
--
```

var dZ = event.deltaZ;
```

例子
--


```js
var syntheticEvent = new WheelEvent("syntheticWheel", {
  deltaZ: 4,
  deltaMode: 0,
});

console.log(syntheticEvent.deltaZ);
```

规范
--

| Specification |
| --- |
| UI Events # dom-wheelevent-deltaz |

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

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

另见
--

* `wheel`
* `WheelEvent`
Node.nodeValue
==============

`Node` 的 **`nodeValue`** 属性返回或设置当前节点的值。

语法
--
```

str = node.nodeValue;
node.nodeValue = str;
```


value 是一个包含当前节点的值的字符串（如果有的话）。

### 值

对于文档节点来说，`nodeValue`返回`null`. 对于 text, comment，和 CDATA 节点来说，`nodeValue 返回该节点的文本内容`. 对于 attribute 节点来说，返回该属性的属性值。

下表就是不同类型的节点所返回的该属性的值。

| Node | Value of nodeValue |
| --- | --- |
| `CDATASection` | CDATA 的文本内容 |
| `Comment` | 注释的文本内容 |
| `Document` | null |
| `DocumentFragment` | null |
| `DocumentType` | null |
| `Element` | null |
| `NamedNodeMap` | null |
| `EntityReference` | null |
| `Notation` | null |
| `ProcessingInstruction` (en-US) | 整个标签的文本内容 |
| `Text` (en-US) | 文本节点的内容 |

如果 `nodeValue` 的值为 `null`,则对它赋值也不会有任何效果。

规范
--

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

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

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

概述
--

返回指定的节点在 DOM 树中的父节点。

语法
--
```

parentNode = node.parentNode
```


`parentNode` 是指定节点的父节点。一个元素节点的父节点可能是一个元素（`Element`）节点，也可能是一个文档（`Document`）节点，或者是个文档碎片（`DocumentFragment`）节点。

例子
--
```

if (node.parentNode) {
  // 从 DOM 树中删除 node 节点，除非它已经被删除了。
  node.parentNode.removeChild(node);
}
```

备注
--

对于下面的节点类型: `Attr`, `Document`, `DocumentFragment`, `Entity`, `Notation`,其`parentNode`属性返回`null`.

如果当前节点刚刚被建立，还没有被插入到 DOM 树中，则该节点的 `parentNode` 属性也返回 `null`.

相关链接
----

`element.firstChild`, `element.lastChild`, `element.childNodes`, `element.nextSibling`, `element.previousSibling`.

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

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

规范
--

DOM Level 2 Core: Node.parentNode
Node.parentElement
==================

返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM `元素`，则返回 `null`。

语法
--
```

parentElement = node.parentElement
```


`parentElement` 是当前节点的父元素。它永远是一个 DOM `元素` 对象，或者 `null`。

例子
--


```js
if (node.parentElement) {
  node.parentElement.style.color = "red";
}
```

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

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

在一些浏览器上，`parentElement` 属性只对自身为 `Element` 的节点定义，也就是说，对文本节点不定义。

规范
--

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

参见
--

* `Node.parentNode`
Node.childNodes
===============

概述
--

**Node.childNodes** 返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）。

语法
--
```

var ndList = elementNodeReference.childNodes;
```


ndList 变量为 `NodeList` 类型，且为只读。

例子
--
```

// parg 是一个对 <p> 元素的引用
if (parg.hasChildNodes())
// 首先我们检查它是否包含子节点
 {
   var children = parg.childNodes;
   for (var i = 0; i < children.length; i++)
   {
   // children[i] 就是遍历到的每个子节点。
   // 注意：该 NodeList 对象为 LIVE 类型的 NodeList，添加或删除子节点都会实时的改变整个 NodeList 对象。
   };
 };
```


```
//下面的方法可以删除节点 box 的所有子节点
while (box.firstChild)
 {
    //box 为 LIVE 类型的 NodeList，所以 firstChild 属性每次会指向不同的子节点
    box.removeChild(box.firstChild);
 };
```

备注
--

集合的元素是一个节点而不是字符串。要从集合的元素获取数据，你必须使用它们的属性（例如：用 `elementNodeReference.childNodes[1].nodeName` 获取它们的名称，等等）。

`document`节点 (文档节点) 包含两个子节点：Doctype 声明和根节点。根节点通常为 `documentElement` 引用，且在 (X)HTML 文档中为 HTML 元素。

规范
--

* W3C DOM 2 Core: childNodes
* W3C DOM 3 Core: childNodes
* W3C DOM 3 NodeList interface
相关链接
----

* `Node.firstChild`
* `Node.lastChild`
* `Node.nextSibling`
* `Node.previousSibling`
* `ParentNode.children` (en-US)
Node.cloneNode
==============

**`Node.cloneNode()`** 方法返回调用该方法的节点的一个副本。

语法
--
```

var dupNode = node.cloneNode(deep);
```


`node`

将要被克隆的节点

`dupNode`

克隆生成的副本节点

`deep` 可选

是否采用深度克隆，如果为 `true`，则该节点的所有后代节点也都会被克隆，如果为 `false`，则只克隆该节点本身。


**备注：** 在 DOM4 规范中 (实现于 Gecko 13.0)，`deep`是一个可选参数。如果省略的话，参数的默认值为 `true，`也就是说默认是深度克隆。如果想使用浅克隆，你需要将该参数设置为 `false`。

在最新的规范里，该方法的行为已经改变了，其默认值变成了 false。虽然该参数仍旧是可选的，但是你必须要为该方法设置 deep 参数，无论是为了向前还是向后兼容考虑。假如开发者没设置参数的话，Gecko 28.0) 版本的控制台会发出警告。从 Gecko 29.0) 开始该方法默认为浅复制而不是深度复制。

示例
--


```js
var p = document.getElementById("para1"),
var p_prime = p.cloneNode(true);
```

附注
--

克隆一个元素节点会拷贝它所有的属性以及属性值，当然也就包括了属性上绑定的事件 (比如`onclick="alert(1)"`),但不会拷贝那些使用`addEventListener()`方法或者`node.onclick = fn`这种用 JavaScript 动态绑定的事件。

在使用`Node.appendChild()`或其他类似的方法将拷贝的节点添加到文档中之前，那个拷贝节点并不属于当前文档树的一部分，也就是说，它没有父节点。

如果`deep`参数设为`false`,则不克隆它的任何子节点。该节点所包含的所有文本也不会被克隆，因为文本本身也是一个或多个的`Text` (en-US)节点。

如果 `deep` 参数设为 `true`,则会复制整棵 DOM 子树 (包括那些可能存在的`Text` (en-US)子节点).对于空结点 (例如`<img>`和`<input>`元素), 则 `deep` 参数无论设为 `true` 还是设为 `false`, 都没有关系，但是仍然需要为它指定一个值。

**警告：** 为了防止一个文档中出现两个 ID 重复的元素，使用`cloneNode()` 方法克隆的节点在需要时应该指定另外一个与原 ID 值不同的 ID

如果原始节点设置了 ID，并且克隆节点会被插入到相同的文档中，那么应该更新克隆节点的 ID 以保证唯一性。name 属性可能也需要进行修改，取决于你是否希望有相同名称的节点存在于文档中。

想要克隆一个节点来添加到另外一个文档中，请使用`Document.importNode()`代替本方法。

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

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

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

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

返回当前节点上与指定命名空间前缀绑定的命名空间 URI，如果没有，返回`null，如果参数为 null`,返回默认的命名空间。

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

### 相关链接

* http://www.w3.org/TR/DOM-Level-3-Cor...upNamespaceURI
* Code snippets: lookupNamespaceURI
Node.removeChild
================

**Node.removeChild()** 方法从 DOM 中删除一个子节点。返回删除的节点。

语法
--
```

let oldChild = node.removeChild(child);

//OR

element.removeChild(child);
```


* `child` 是要移除的那个子节点。
* `node` 是`child`的父节点。
* oldChild 保存对删除的子节点的引用。`oldChild` === `child`.

被移除的这个子节点仍然存在于内存中，只是没有添加到当前文档的 DOM 树中，因此，你还可以把这个节点重新添加回文档中，当然，实现要用另外一个变量比如`上例中的 oldChild`来保存这个节点的引用。如果使用上述语法中的第二种方法，即没有使用 oldChild 来保存对这个节点的引用，则认为被移除的节点已经是无用的，在短时间内将会被内存管理回收。

如果上例中的`child 节点`不是`node`节点的子节点，则该方法会抛出异常。

示例
--
```

<!--Sample HTML code-->
<div id="top" align="center"> </div>

<script type="text/javascript">
      var top = document.getElementById("top");
      var nested = document.getElementById("nested");
      var garbage = top.removeChild(nested);
      //Test Case 2: the method throws the exception (2)
</script>

<!--Sample HTML code-->
<div id="top" align="center">
 <div id="nested"></div>
</div>

<script type="text/javascript">
      var top = document.getElementById("top");
      var nested = document.getElementById("nested");
      var garbage = top.removeChild(nested);
      // This first call remove correctly the node
      garbage = top.removeChild(nested);
      // Test Case 1: the method in the second call here, throws the exception (1)
</script>
```


```
<!--示例 HTML 代码-->

<div id="top" align="center">
  <div id="nested"></div>
</div>
```



```js
// 先定位父节点，然后删除其子节点
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);
```



```js
// 无须定位父节点，通过 parentNode 属性直接删除自身
var node = document.getElementById("nested");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}
```



```js
// 移除一个元素节点的所有子节点
var element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}
```

规范
--

* DOM Level 1 Core: removeChild
* DOM Level 2 Core: removeChild
* DOM Level 3 Core: removeChild
相关链接
----

* `Node.replaceChild`
* `Node.parentNode`
* `ChildNode.remove` (en-US)
Node.normalize()
================

`Node.normalize()` 方法将当前节点和它的后代节点”规范化“（normalized）。在一个"规范化"后的 DOM 树中，不存在一个空的文本节点，或者两个相邻的文本节点。

注 1：“空的文本节点”并不包括空白字符 (空格，换行等) 构成的文本节点。

注 2：两个以上相邻文本节点的产生原因包括：

1. 通过脚本调用有关的 DOM 接口进行了文本节点的插入和分割等。
2. HTML 中超长的文本节点会被浏览器自动分割为多个相邻文本节点。
语法
--
```

element.normalize();
```

例子
--


```js
var wrapper = document.createElement("div");

wrapper.appendChild(document.createTextNode("Part 1 "));
wrapper.appendChild(document.createTextNode("Part 2 "));

// 这时 (规范化之前),wrapper.childNodes.length === 2
// wrapper.childNodes[0].textContent === "Part 1 "
// wrapper.childNodes[1].textContent === "Part 2 "

wrapper.normalize();
// 现在 (规范化之后), wrapper.childNodes.length === 1
// wrapper.childNodes[0].textContent === "Part 1 Part 2"
```

规范
--

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

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

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

See also
--------

* `Text.splitText()`
Node.ownerDocument
==================

**Node.ownerDocument** 只读属性会返回当前节点的顶层的 document 对象。

语法
--
```

document = node.ownerDocument
```


* `document` 是当前元素的 `document` 对象，其是当前元素的祖先。
例子
--
```

// 得到 p 元素所在文档的 HTML 节点
d = p.ownerDocument;
html = d.documentElement;
```

注意
--

`被此属性返回的 document` 对象是在实际的 HTML 文档中的所有子节点所属的主对象`。如果在文档节点自身上使用此属性，则结果是 null`。

规范
--

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

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

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

**Node.firstChild** 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 `null`。

### 语法
```

var childNode = node.firstChild;
```

### 描述

如果有一个子节点，childNode 是节点的第一个子节点的引用，否则为 null。

### 示例

#### 示例 1

这个例子演示了`firstChild`属性的用法以及空白符节点对该属性的使用可能造成的影响。参见备注部分了解 Gecko DOM 中关于处理空白符的更多信息。
```

<p id="para-01">
  <span>First span</span>
</p>

<script type="text/javascript">
  var p01 = document.getElementById('para-01');
  alert(p01.firstChild.nodeName)
</script>
```


在上面的示例中，提示框将显示 '#text',因为在<p>标签和<span>标签之前，有一个换行符和多个空格充当了一个文本节点。在 Gecko 中，任意多个的空白符都将导致文本节点的插入，包括一个到多个空格符，换行符，制表符等等。

</span>和</p>标签之间就是另外一个文本节点。

如果从源代码移出对应的空白符，则不会有文本节点被插入，span 元素就成为了第一个子节点。下面的代码将弹出 'SPAN'.
```

<p id="para-01"><span>First span</span></p>

<script type="text/javascript">
  var p01 = document.getElementById('para-01');
  alert(p01.firstChild.nodeName)
</script>
```


#### 示例 2

假设我们有一个 HTML 文档，如果该文档有一个 DTD（文档类型定义），则下面的语句会弹出 `[object DocumentType]`，如果该文档没有一个 DTD，则下面的语句会弹出 `[object HTMLHtmlElement]`。
```

alert(document.firstChild);
```

### 备注

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

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

### 规范

DOM Level 1 Core: firstChild

DOM Level 2 Core: firstChild
Node.isConnected
================

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
**`isConnected`** 是 `Node` 的一个只读属性接口。无论节点是否与 DOM 树连接，该属性都会返回一个`布尔值` (en-US)。例如：`Document` 对象与一般 DOM 树连接，`ShadowRoot` 与 shadow DOM 连接。

语法
--
```

var isItConnected = nodeObjectInstance.isConnected
```

### 返回值

返回 `布尔值` (en-US) — 如果该节点与 DOM 树连接则返回 `true`, 否则返回 `false`。

样例
--

### 标准 DOM 树


```js
let test = document.createElement("p");
console.log(test.isConnected); // Returns false
document.body.appendChild(test);
console.log(test.isConnected); // Returns true
```

### Shadow DOM 树


```js
// Create a shadow root
var shadow = this.attachShadow({ mode: "open" });

// Create some CSS to apply to the shadow dom
var style = document.createElement("style");
console.log(style.isConnected); // returns false

style.textContent =
  ".wrapper {" +
  "position: relative;" +
  "}" +
  ".info {" +
  "font-size: 0.8rem;" +
  "width: 200px;" +
  "display: inline-block;" +
  "border: 1px solid black;" +
  "padding: 10px;" +
  "background: white;" +
  "border-radius: 10px;" +
  "opacity: 0;" +
  "transition: 0.6s all;" +
  "position: absolute;" +
  "bottom: 20px;" +
  "left: 10px;" +
  "z-index: 3;" +
  "}" +
  // Attach the created style element to the shadow dom

  shadow.appendChild(style);
console.log(style.isConnected); // Returns true
```

规范
--

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

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

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

### 概述

**hasChildNodes**方法返回一个布尔值,表明当前节点是否包含有子节点.

语法
--
```

element.hasChildNodes()
```

例子
--

下面的例子演示了：如果 id 为 foo 的这个元素有子节点，则从 dom 树中删除它的第一个子节点。


```js
var foo = document.getElementById("foo");

if (foo.hasChildNodes()) {
  foo.removeChild(foo.childNodes[0]);
}
```


**备注：** `Node.hasChildNodes`是个方法，而不是普通属性，使用时必须加括号才能调用。

总结
--

有三种方法可以判断当前节点是否有子节点。

* node.firstChild !== null
* node.childNodes.length > 0
* node.hasChildNodes()
规范
--

* WHATWG: hasChildNodes
* hasChildNodes
相关链接
----

* `Node.childNodes`
* `Node.hasAttributes`
Node.appendChild
================

**`Node.appendChild()`** 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 `appendChild()` 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。

这意味着，一个节点不可能同时出现在文档的不同位置。所以，如果某个节点已经拥有父节点，在被传递给此方法后，它首先会被移除，再被插入到新的位置。若要保留已在文档中的节点，可以先使用 `Node.cloneNode()` 方法来为它创建一个副本，再将副本附加到目标父节点下。请注意，用 `cloneNode` 制作的副本不会自动保持同步。

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

**备注：** **有更加新的 API 可供使用！** > `ParentNode.append()` (en-US) 方法支持多个参数，接受字符串作为参数，会将字符串转换为文本节点再附加。

语法
--
```

element.appendChild(aChild)
```

### 参数

`aChild`

要追加给父节点（通常为一个元素）的节点。

### 返回值

返回追加后的子节点（`aChild`），除非 `aChild` 是一个文档片段（`DocumentFragment`），这种情况下将返回空文档片段（`DocumentFragment`）。

附注
--

如果你需要保留这个子节点在原先位置的显示，则你需要先用`Node.cloneNode`方法复制出一个节点的副本，然后在插入到新位置。

这个方法只能将某个子节点插入到同一个文档的其他位置，如果你想跨文档插入，你需要先调用`document.importNode`方法。

备注
--

由于 `appendChild()` 返回的是被附加的子元素，所以链式调用可能无法按照你的预期去执行：


```js
let aBlock = document
  .createElement("block")
  .appendChild(document.createElement("b"));
```


（上述代码）只会将 `aBlock` 设置为 `<b></b>` ，这可能不是你所想要的。

示例
--


```js
// 创建一个新的段落元素 <p>，然后添加到 <body> 的最尾部
var p = document.createElement("p");
document.body.appendChild(p);
```

规范
--

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

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

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

参见
--

* `Node.removeChild`
* `Node.replaceChild`
* `Node.insertBefore`
* `Node.hasChildNodes`
Node.nextSibling
================

**`Node.nextSibling`** 是一个只读属性，返回其父节点的 `childNodes` 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 `null`。

语法
--
```

nextNode = node.nextSibling
```

备注
--

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

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

示例
--


```html
<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<br />
<output><em>Not calculated.</em></output>
```



```js
let el = document.getElementById("div-1").nextSibling;
let i = 1;

let result = "Siblings of div-1:<br/>";

while (el) {
  result += `${i}. ${el.nodeName}<br/>`;
  el = el.nextSibling;
  i++;
}

const output = document.querySelector("output");
output.innerHTML = result;
```

规范
--

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

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

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

相关链接
----

* `Element.nextElementSibling`
* `Node.previousSibling`