recursal/MDN huggingface dataset:
Node: nodeType プロパティ
====================

**`nodeType`** は `Node` インターフェイスの読み取り専用プロパティであり、整数値でこのノードが何であるかを識別します。これは様々なノードの種類、例えば `elements`、`text`、`comments` を見分けます。

値
-

整数値で、このノードの種類を識別します。可能な値は次の通りです。

`Node.ELEMENT_NODE` (`1`)

`<p>` や `<div>` などの `Element` ノードです。

`Node.ATTRIBUTE_NODE` (`2`)

`Element` の `Attribute` ノードです。

`Node.TEXT_NODE` (`3`)

`Element` や `Attr` の中に存在する `Text` です。

`Node.CDATA_SECTION_NODE`(`4`)

`<!CDATA[[ … ]]>` のような `CDATASection` です。

`Node.PROCESSING_INSTRUCTION_NODE` (`7`)

`<?xml-stylesheet … ?>` のような XML 文書の `ProcessingInstruction` です。

`Node.COMMENT_NODE` (`8`)

`<!-- … -->` のような `Comment` ノードです。

`Node.DOCUMENT_NODE` (`9`)

`Document` ノードです。

`Node.DOCUMENT_TYPE_NODE` (`10`)

`<!DOCTYPE html>` のような `DocumentType` ノードです。

`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

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

const p = document.createElement("p");
p.textContent = "昔々…";

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

### コメント

次の例は、ノードの最初の要素がコメントノードであるかをチェックし、そうでない場合にメッセージを表示するものです。


```js
const node = document.documentElement.firstChild;
if (node.nodeType !== Node.COMMENT\_NODE) {
  console.warn("コメントを入れてください。");
}
```

仕様書
---

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

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Node: removeChild() メソッド
========================

**`removeChild()`** は `Node` インターフェイスのメソッドで、子ノードを DOM から取り除き、取り除いたノードを返します。

**メモ:** 取り除かれた子ノードへの参照が保持されている限り、子ノードはメモリー内に残りますが、 DOM の一部ではなくなります。
 これは、後のコードで再利用することができます。


`removeChild()` の返値が保持されず、他の参照もなくなった場合は、まもなくメモリーから自動的に削除されます。

`Node.cloneNode()` とは異なり、返値は関連付けられた `EventListener` オブジェクトを保持します。

構文
--


```js
removeChild(child)
```

### 引数

`child`

`Node` で、 DOM から取り除きたい子ノードを指定します。

### 例外

`NotFoundError` `DOMException`

`child` がこのノードの子ではない場合に発生します。

`TypeError`

`child` が `null` であった場合に発生します。

例
-

### 単純な例

この HTML を使います。


```html
<div id="top">
  <div id="nested"></div>
</div>
```


親ノードが分かる場合に、指定された要素を取り除きます。


```js
let d = document.getElementById("top");
let d_nested = document.getElementById("nested");
let throwawayNode = d.removeChild(d_nested);
```


親ノードが分からないときに指定された要素を取り除きます。


```js
let node = document.getElementById("nested");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}
```


ある要素からすべての子を削除します。


```js
let element = document.getElementById("idOfParent");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}
```

### TypeError が発生する例


```html
<!--HTML コードの例-->
<div id="top"></div>
```



```js
let top = document.getElementById("top");
let nested = document.getElementById("nested");

// TypeError が発生
let garbage = top.removeChild(nested);
```

### NotFoundError が発生する例


```html
<!--HTML コードの例-->
<div id="top">
  <div id="nested"></div>
</div>
```



```js
let top = document.getElementById("top");
let nested = document.getElementById("nested");

// 最初の呼び出しでは正しくノードを取り除く
let garbage = top.removeChild(nested);

// NotFoundError が発生
garbage = top.removeChild(nested);
```

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* `Node.replaceChild()`
* `Node.parentNode`
* `Element.remove()`
* `Node.cloneNode()`
Node: lastChild プロパティ
=====================

**`lastChild`** は `Node` インターフェイスの読み取り専用プロパティで、このノードの最後の子ノードを返します。子ノードがない場合は `null` を返します。

**メモ:** このプロパティは、このノードの最後の子ノードである任意の種類のノードを返す。
 `Text` や `Comment` ノードである可能性があります。
 他の要素の子である最後の `Element` を取得したい場合は、`Element.lastElementChild` の使用を検討してください。


値
-

このノードの最後の子である `Node`、または子ノードがなければ `null` です。

例
-


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

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* `Node.firstChild`
* `Element.lastElementChild`
Node: replaceChild() メソッド
=========================

**`replaceChild()`** は `Node` インターフェイスのメソッドで、この（親）ノードの中の子ノードを置き換えます。

構文
--


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

### 引数

`newChild`

`oldChild` を置き換える新しいノードです。

**警告:** 新しいノードが既に DOM のどこか別なところにある場合は、まずその位置から取り除かれます。

`oldChild`

置き換えられる子ノードです。



**メモ:** 引数の順序で、*新しい*ものの前に*古い*ものが来るのは異例です。
 `Element.replaceWith()` は、要素であるノードのみに適用されるものですが、読んだり使用したりしやすいかもしれません。


### 返値

置き換えられた `Node` です。これは `oldChild` と同じノードです。

### 例外

`HierarchyRequestError` `DOMException`

DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。

* `oldChild` の親が `Document`, `DocumentFragment`, `Element` のいずれにもならない場合。
* `oldChild` を `newChild` で置き換えると循環参照になる場合。すなわち `newChild` がこのノードの祖先である場合。
* `newChild` が `DocumentFragment`, `DocumentType`, `Element`, `CharacterData` のいずれでもない場合。
* 現在のノードが `Text` であり、親ノードが `Document` になる場合。
* 現在のノードが `DocumentType` であり、その親が `Document` にならない場合。 *doctype* は常に *document* の直下になければならないからです。
* このノードの親が `Document` で `newChild` が `DocumentFragment` であり、複数の `Element` の子、または `Text` の子がある場合。
* `oldChild` を `newChild` で置き換えると、 `Document` の子の `Element` が複数になる場合。
* `oldChild` を `newChild` で置き換えると、 `Element` ノードが `DocumentType` の前になる場合。

`NotFoundError` `DOMException`

`oldChild` の親ノードが現在のノードではない場合に発生します。

例
-


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

// ID も属性も内容も持たない空要素を生成
const sp1 = document.createElement("span");

// 生成したノードに id 属性 'newSpan' を付与
sp1.id = "newSpan";

// 新しい要素にいくらかの内容を作成
const sp1_content = document.createTextNode("新しい置換 span 要素");

// その内容を新しい要素に適用
sp1.appendChild(sp1_content);

// 置き換えられる既存のノードの参照を作る
const sp2 = document.getElementById("childSpan");
const parentDiv = sp2.parentNode;

// 既存のノード sp2 を新しい span 要素 sp1 で置換
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: selectstart イベント
======================

**`selectstart`** は選択 API のイベントで、新しい選択範囲をユーザが指定した際に発行されます。

イベントがキャンセルされた場合、選択範囲は変更されません。

構文
--

このイベント名を `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: previousSibling プロパティ
===========================

**`previousSibling`** は `Node` インターフェイスの読み取り専用プロパティで、指定されたノードの親ノードの `childNodes` リスト内で、直前にある ノードを返します。指定されたノードがリストの先頭にあった倍は `null` を返します。

**メモ:** ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書にテキストノードを挿入します。
 そのため、例えば `Node.firstChild` や `Node.previousSibling` を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。


DOM でのホワイトスペースの記事に、この動作に関する詳しい情報があります。

`previousElementSibling` を使用すると、（テキストノードやその他の要素以外のノードを飛ばして）前の要素を取得することができます。

子ノードのリストで反対方向に移動する場合は、 Node.nextSibling を使用してください。

値
-

 現在のノードの直前のノードを表す `Node` です。
 存在しない場合は `null` です。

例
-

次の例では、要素にテキストノードがある場合とない場合の `previousSibling` の動作を示しています。

### 最初の例

この例では、一連の `img` 要素が互いに隣り合っており、その間にホワイトスペースがありません。


```html
<img id="b0" /><img id="b1" /><img id="b2" />
```



```js
document.getElementById("b1").previousSibling; // <img id="b0">
document.getElementById("b2").previousSibling.id; // "b1"
```

### 2 番目の例

この例では、 `img` 要素の間にホワイトスペースのテキストノード（改行）があります。


```html
<img id="b0" />
<img id="b1" />
<img id="b2" />
```



```js
document.getElementById("b1").previousSibling; // #text
document.getElementById("b1").previousSibling.previousSibling; // <img id="b0">
document.getElementById("b2").previousSibling.previousSibling; // <img id="b1">
document.getElementById("b2").previousSibling; // #text
document.getElementById("b2").previousSibling.id; // undefined
```

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* `Node.nextSibling`
* `Element.previousElementSibling`
Node: nodeName プロパティ
====================

**`nodeName`** は `Node` の読み取り専用プロパティで、現在のノードの名前を文字列で返します。

値
-

文字列です。ノードの種類によって、次のような値になります。

`Attr`

`Attr.name` の値で、この属性の*修飾名*です。

`CDATASection`

`"#cdata-section"` という文字列です。

`Comment`

`"#comment"` という文字列です。

`Document`

`"#document"` という文字列です。

`DocumentFragment`

`"#document-fragment"` という文字列です。

`DocumentType`

`DocumentType.name` の値です。

`Element`

`Element.tagName` の値です。これは HTML 要素であればその要素のタグの*大文字の*名前であり、 XML 要素（SVG や MathML の要素）であればその要素のタグの*小文字の*名前です。

`ProcessingInstruction`

`ProcessingInstruction.target` の値です。

`Text`

`"#text"` という文字列です。

例
-

この例では、様々なノードのノード名を表示します。


```html
こちらは HTML です。
<div id="d1">Hello world</div>
<!-- コメントの例 -->
テキスト<span>テキスト</span> テキスト<br />
<svg height="20" width="20">
  <circle cx="10" cy="10" r="5" stroke="black" stroke-width="1" fill="red" />
</svg>
<hr />
<output id="result">まだ出力されていません。</output>
```


また、スクリプトは以下の通りです。


```js
let node = document.querySelector("body").firstChild;
let result = "ノード名:<br/>";
while (node) {
  result += `${node.nodeName}<br/>`;
  node = node.nextSibling;
}

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

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* `Element.tagName`
* `Attr.name`
* `DocumentType.name`
* `ProcessingInstruction.target`
Node: childNodes プロパティ
======================

**`childNodes`** は `Node` インターフェイスの読み取り専用プロパティであり、`NodeList` で指定された要素の子ノードの生きたリストを返し、最初の子ノードは位置 `0` に割り当てられます。子ノードには要素、テキスト、コメントが含まれます。

**メモ:** `NodeList` が生きたリストであるというのは、新しい子が追加されたり取り除かれたりするたびに、内容が変化するという意味です。

ノードのコレクションの項目はオブジェクトであり、文字列ではありません。ノードオブジェクトからデータを取得するには、そのプロパティを使用してください。例えば、最初の子ノードの名前を取得するには、 `elementNodeReference.childNodes[0].nodeName` を使うことで実現できます。

`document` オブジェクト自体には 2 つの子があります。文書型宣言と、ルート要素、ふつうは `documentElement` として参照されます。 HTML 文書の場合、後者は `<html>` 要素です。

 覚えておくべき重要なこととして、 `childNodes` には*すべての*子ノードが含まれ、テキストやコメントなどの要素以外のノードが含まれることです。
 要素のみが含まれるコレクションを取得するのであれば、 `Element.children` を代わりに使用してください。

値
-

このノードの子を含む生きた `NodeList` です。

**メモ:** `childNodes` を複数回呼び出しても、*同じ* `NodeList` が返されます。

例
-

### 単純な使用方法


```js
// parg は <p> 要素へのオブジェクト参照であることに注意

// まず、要素に子ノードがあるかどうかをチェックします
if (parg.hasChildNodes()) {
  let children = parg.childNodes;

  for (const node of children) {
    // それぞれの子を children[i] として処理します
    // 注: リストは生きています。子を追加したり取り除いたりすると、リストの `length` が変わります
  }
}
```

### ノードからすべての子を削除


```js
// これはあるノードからすべての子を取り除くための一つの方法です
// box はある要素へのオブジェクト参照です
while (box.firstChild) {
  // リストは生きているので、呼び出されるたびにインデックスが変わります
  box.removeChild(box.firstChild);
}
```

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* `Node.firstChild`
* `Node.lastChild`
* `Node.nextSibling`
* `Node.previousSibling`
* `Element.children`
Node: isEqualNode() メソッド
========================

**`isEqualNode()`** は `Node` インターフェイスのメソッドで、 2 つのノードが等しいかどうかを検査します。
 2 つのノードは、同じ型、定義特性（要素の場合、 ID や子ノードの数など）、その属性が一致している場合、等しいといえます。データで一致が求められる具体的な点は、ノードの型によって異なります。

構文
--


```js
isEqualNode(otherNode)
```

### 引数

`otherNode`

比較対象となる `Node` です。

**メモ:** この引数は省略可能ではありませんが、 `null` に設定することはできます。

### 返値

 論理値で、 2 つのノードが等しければ `true`、そうでなければ `false` です。
 `otherNode` が `null` であった場合、 `isEqualNode()` は常に false を返します。

例
-

この例では、 3 つの `<div>` ブロックを作成しています。 1 つ目と 3 つ目は内容と属性が同じであり、 2 つ目は異なっています。このとき、`isEqualNode()` を使って JavaScript でノードを比較した結果は以下のようになります。

### HTML


```html
<div>最初の要素です。</div>
<div>2 番目の要素です。</div>
<div>最初の要素です。</div>

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


```
#output {
  width: 440px;
  border: 2px solid black;
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
  display: block;
}
```

### JavaScript


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

output.innerHTML += `div 0 と div 0 は同じか: ${divList[0].isEqualNode(
 divList[0],
)}<br/>`;
output.innerHTML += `div 0 と div 1 は同じか: ${divList[0].isEqualNode(
 divList[1],
)}<br/>`;
output.innerHTML += `div 0 と 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: parentNode プロパティ
======================

**`parentNode`** は `Node` インターフェイスの読み取り専用プロパティで、 DOM ツリー内の特定のノードの親ノードを返します。

`Document` および `DocumentFragment` ノードには親が付くことはないので、 `parentNode` は常に `null` になります。
 ノードが生成されてからツリーに割り当てられていない場合も `null` を返します。

値
-

現在のノードの親に当たる `Node` です。要素の親になるのは `Element` ノード、 `Document` ノード、 `DocumentFragment` ノードの何れかです。

例
-


```js
if (node.parentNode) {
  // ノードがツリーの中にある場合は、ツリーから取り除く
  node.parentNode.removeChild(node);
}
```

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* `Node.firstChild`
* `Node.lastChild`
* `Node.childNodes`
* `Node.nextSibling`
* `Node.parentElement`
* `Node.previousSibling`
* `Node.removeChild`
Node: firstChild プロパティ
======================

**`firstChild`** は `Node` インターフェイスの読み取り専用プロパティで、ツリー内におけるこのノードの最初の子、またはこのノードに子がない場合は `null` を返します。

このノードが `Document` であった場合は、このプロパティは直接のこのリスト内で最初のノードを返します。

**メモ:** このプロパティはこのノードの最初の子であれば、あらゆる種類のノードを返します。
 `Text` または `Comment` ノードになることがあります。
 他の要素の子である最初の `Element` を取得したい場合は、 `Element.firstElementChild` を使用することを検討してください。


値
-

`Node`、または存在しなければ `null`。

例
-

次の例では `firstChild` の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかを示しています。


```html
<p id="para-01">
  <span>最初の span</span>
</p>

<script>
 const p01 = document.getElementById("para-01");
 console.log(p01.firstChild.nodeName);
</script>
```


上記の例ではコンソールに '#text' と表示されます。開始タグ `<p>` の末尾と `<span>` タグとの間にある空白を調整するためにテキストノードが挿入されているためです。**あらゆる**ホワイトスペースは、単一の空白から複数のスペース、改行、タブに至るまで、 1 つの `#text` ノードを生成します。

`#text` ノードはもう 1 つ、閉じタグ `</span>` と `</p>` の間に挿入されます。

ホワイトスペースをソースから取り除くと、 #text ノードは挿入されず、 span 要素がその段落の最初の子になります。


```html
<p id="para-01"><span>最初の span</span></p>

<script>
 const p01 = document.getElementById("para-01");
 console.log(p01.firstChild.nodeName);
</script>
```


コンソールには 'SPAN' と表示されるようになります。

`node.firstChild` が `#text` や `#comment` ノードを返す問題を回避するには、 `Element.firstElementChild` を使用すると最初の要素ノードのみを返すことができます。

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* `Element.firstElementChild`
* `Node.lastChild`
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` インターフェイスの読み出し専用のプロパティで、ノードが `Document` オブジェクトに（直接的または間接的に）接続されているかどうかを示す論理値を返します。

値
-

論理値で、 `true` はこのノードが関連するコンテキストオブジェクトに接続されていることを表し、 `false` は接続していないことを表します。

例
-

### 標準 DOM

標準 DOM の例です。


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

### シャドウ DOM

シャドウ DOM の例です。


```js
// シャドウルートを生成
const shadow = this.attachShadow({ mode: "open" });

// いくらかの CSS を作成してシャドウ DOM に適用
const 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;
 positions: absolute;
 bottom: 20px;
 left: 10px;
 z-index: 3
}
`;

// 生成された style 要素をシャドウ 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.prototype.isConnected polyfill
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
**`getRootNode()`** は `Node` インターフェイスのメソッドで、そのコンテキストのオブジェクトのルート、利用できる場合はオプションでシャドウルートを含んだものを返します。

構文
--


```js
getRootNode()
getRootNode(options)
```

### 引数

`options` 省略可

ルートノードを取得するためのオプションを設定するオブジェクトです。利用可能なオプションは次の通りです。

* `composed`: 論理値で、シャドウルートを返すか (`false`、既定値)、またはシャドウルートを越えたルートノードを返すか (`true`) を示します。

### 返値

`Node` を継承したオブジェクトです。これはどこで `getRootNode()` を呼び出したかによって異なる形になります。例えば、

* 標準のウェブページ内の要素に対して呼び出した場合は、ページ全体を表す `HTMLDocument` オブジェクトを返します。
* シャドウ DOM の中の要素に対して呼び出した場合は、関連する `ShadowRoot` オブジェクトを返します。
例
-

### 例 1

最初に、 HTML/document ノードの参照を返す単純な例です。


```js
const rootNode = node.getRootNode();
```

### 例 2

この例はもっと複雑で、通常のルートを返す場合と、シャドウルートを含むルートの違いを示します。


```html
<div class="parent">
  <div class="child"></div>
</div>
<div class="shadowHost">shadowHost</div>
<pre id="output">Output: </pre>
```



```js
const parent = document.querySelector(".parent");
const child = document.querySelector(".child");
const shadowHost = document.querySelector(".shadowHost");
const output = document.getElementById("output");

output.textContent += `\nparent's root: ${parent.getRootNode().nodeName} \n`; // #document
output.textContent += `child's root: ${child.getRootNode().nodeName} \n\n`; // #document

// ShadowRoot の生成
const shadowRoot = shadowHost.attachShadow({ mode: "open" });
shadowRoot.innerHTML =
  '<style>div{background:#2bb8aa;}</style><div class="shadowChild">shadowChild</div>';
const shadowChild = shadowRoot.querySelector(".shadowChild");

// 合成の既定値は false
output.textContent += `shadowChild.getRootNode() === shadowRoot : ${
 shadowChild.getRootNode() === shadowRoot
} \n`; // true
output.textContent += `shadowChild.getRootNode({composed:false}) === shadowRoot : ${
 shadowChild.getRootNode({ composed: false }) === shadowRoot
} \n`; // true
output.textContent += `shadowChild.getRootNode({composed:true}).nodeName : ${
 shadowChild.getRootNode({ composed: true }).nodeName
} \n`; // #document
```

仕様書
---

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

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Node: nextSibling プロパティ
=======================

**`nextSibling`** は `Node` インターフェイスの読み取り専用プロパティで、指定されたノードの親の `childNodes` の中で、そのすぐ次のノードを返します。または、指定されたノードが親要素の最後の子要素である場合は `null` を返します。

**メモ:** ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書に `Text` ノードを挿入します。
 そのため、例えば `Node.firstChild` や `Node.previousSibling` を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。


DOM でのホワイトスペースの記事に、この動作に関する詳しい情報があります。

`Element.nextElementSibling` を使用すると、ホワイトスペースのノードや要素間のテキスト、コメントなどを飛ばして次の要素を取得することができます。

子ノードのリストで反対方向に移動する場合は、 Node.previousSibling を使用してください。

値
-

現在のノードの次の兄弟ノードを表す `Node`、または存在しない場合は `null` です。

例
-


```html
<div id="div-1">こちらは div-1 です。</div>
<div id="div-2">こちらは div-2 です。</div>
<br />
<output><em>計算結果がありません。</em></output>
```



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

let result = "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`
Node: appendChild() メソッド
========================

**`appendChild()`** は `Node` インターフェイスのメソッドで、指定された親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していた場合は、 `appendChild()` はその子ノードを現在の位置から新しい位置へ移動します。

 指定された子ノードが `DocumentFragment` であった場合、その
 `DocumentFragment` の内容全体が指定された親ノードの子ノードリストに移動します。

`appendChild()` は、新しく追加されたノードを返します。また、子が `DocumentFragment` であれば、空になったフラグメントを返します。

**メモ:** このメソッドとは異なり、 `Element.append()` メソッドは複数の引数や文字列の追加に対応しています。ノードが要素であった場合は、こちらを使用することができます。

構文
--


```js
appendChild(aChild)
```

### 引数

`aChild`

指定された親ノードに追加するノード（ふつうは要素）。

### 返値

`Node` で追加された子ノード (`aChild`) を返します。
 ただし、 `aChild` が `DocumentFragment` であった場合は、空の `DocumentFragment` を返します。

### 例外

`HierarchyRequestError` `DOMException`

DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。

* `aChild` の親が `Document`, `DocumentFragment`, `Element` のいずれにもならない場合。
* `aChild` を挿入すると循環参照になる場合。すなわち `aChild` がこのノードの祖先である場合。
* `aChild` が `DocumentFragment`, `DocumentType`, `Element`, `CharacterData` のいずれでもない場合。
* 現在のノードが `Text` であり、親ノードが `Document` になる場合。
* 現在のノードが `DocumentType` であり、その親が `Document` にならない場合。 *doctype* は常に *document* の直下になければならないからです。
* このノードの親が `Document` で `aChild` が `DocumentFragment` であり、複数の `Element` の子、または `Text` の子がある場合。
* `aChild` を挿入すると `Document` の子の `Element` が複数になる場合。

解説
--

指定された子ノードが文書内の既存のノードへの参照である場合、 `appendChild()` はそのノードを現在の位置から新しい位置に移動させます。つまり、あるノードが文書内の2点に同時に存在することはできません。新しい親の下にノードを追加する前に、ノードのコピーを作成するには `Node.cloneNode()` メソッドを使用することができます。`cloneNode` で作成されたコピーは、自動的に同期されるわけではありません。

`appendChild()`は親ノードではなく、新しく追加されたノードを返します。つまり、新しいノードが作成されたらすぐに、そのノードへの参照を失うことなく、追加することができます。


```js
const paragraph = document.body.appendChild(document.createElement("p"));
// 段落に後から要素を追加することも可能です
```


一方で、`appendChild()` は fluent API 流に（JQuery のように）使用することはできません。


```js
// 3 つの段落を追加することはできません。
// 代わりに、3 つの段落は入れ子になります。
document.body
  .appendChild(document.createElement("p"))
  .appendChild(document.createElement("p"))
  .appendChild(document.createElement("p"));
```

例
-

### 本文に段落を追加


```js
// 新しい段落要素を作成し、文書の body の末尾に追加します。
const p = document.createElement("p");
document.body.appendChild(p);
```

### 入れ子構造の DOM の作成

この例では、いくつかある一時変数をできるだけ使用して、入れ子の DOM 構造を作成することを試みています。


```js
const fragment = document.createDocumentFragment();
const li = fragment
  .appendChild(document.createElement("section"))
  .appendChild(document.createElement("ul"))
  .appendChild(document.createElement("li"));
li.textContent = "hello world";

document.body.appendChild(fragment);
```


以下のような DOM ツリーが生成されます。


```html
<section>
  <ul>
    <li>hello world</li>
  </ul>
</section>
```

仕様書
---

| 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()`
* `Element.insertAdjacentElement()`
* `Element.append()`