From 38a18236aca758a3c29963a8654ab7c5d84dd9ca Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 27 Feb 2022 15:00:03 +0900 Subject: 2021/11/08 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/node/comparedocumentposition/index.md | 173 ++++++++------------ files/ja/web/api/node/contains/index.md | 88 +++++------ files/ja/web/api/node/isdefaultnamespace/index.md | 96 +++++++---- files/ja/web/api/node/isequalnode/index.md | 116 +++++++------- files/ja/web/api/node/issupported/index.md | 87 +++++----- files/ja/web/api/node/removechild/index.md | 175 +++++++++++---------- files/ja/web/api/node/replacechild/index.md | 113 +++++++------ 7 files changed, 429 insertions(+), 419 deletions(-) (limited to 'files/ja/web/api/node') diff --git a/files/ja/web/api/node/comparedocumentposition/index.md b/files/ja/web/api/node/comparedocumentposition/index.md index 5865081c84..346dc65e73 100644 --- a/files/ja/web/api/node/comparedocumentposition/index.md +++ b/files/ja/web/api/node/comparedocumentposition/index.md @@ -1,118 +1,69 @@ --- -title: Node.compareDocumentPosition +title: Node.compareDocumentPosition() slug: Web/API/Node/compareDocumentPosition tags: - - DOM - - DOM Element Methods - - Gecko - - Gecko DOM Reference + - メソッド + - リファレンス +browser-compat: api.Node.compareDocumentPosition translation_of: Web/API/Node/compareDocumentPosition --- -

- -

概要

- -

そのノードと別のノードの位置を比較し、結果となるビットマスクを返します。

- -

構文

- -

node.compareDocumentPosition( otherNode )
-

- -

パラメーター

- -

node: 比較元ノード
otherNode: node と比較する別ノード

- -

返り値

- -

呼び出し元の node と {{domxref("Document")}} 内の otherNode の関係を表すビットの整数値。複数の条件に適応する場合、1つ以上のビットがセットされることがあります。compareDocumentPosition() を呼び出した node と比較して、otherNode が文書のより前にあり、かつ node を含んでいるならば、DOCUMENT_POSITION_CONTAINS と DOCUMENT_POSITION_PRECEDING のビットがセットされ、結果は0x0Aもしくは10進数の10になります。

- -

注記

- -

戻り値は以下の値を持つビットマスクの何れかとなります。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称	値
`DOCUMENT_POSITION_DISCONNECTED`	1
`DOCUMENT_POSITION_PRECEDING`	2
`DOCUMENT_POSITION_FOLLOWING`	4
`DOCUMENT_POSITION_CONTAINS`	8
`DOCUMENT_POSITION_CONTAINED_BY`	16
`DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC`	32

- -

例

- -

var head = document.getElementsByTagName('head').item(0);
-
-if ( head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOLLOWING ) {
-  console.log("head 要素は body 要素より前に記述されています。");
+{{APIRef("DOM")}}
+
+**`compareDocumentPosition()`** は {{domxref("Node")}} インターフェイスのメソッドで、引数のノードの位置を、呼び出されたノードからの相対位置で報告します。
+
+## 構文
+
+```js
+compareDocumentPosition(otherNode);
+```
+
+### 引数
+
+- `otherNode`
+  - : {{domxref("Node")}} で、このノードとの相対位置を報告するノードを指定します。
+
+### 返値
+
+整数値で、 `otherNode` の `node` から見た相対位置を、以下の {{domxref("Node")}} の定数プロパティを組み合わせた[ビットマスク]()で表します。
+
+- `Node.DOCUMENT_POSITION_DISCONNECTED` (`1`)
+  - : 両方のノードが、異なる文書、または同じ文書の異なるツリーにあります。
+- `Node.DOCUMENT_POSITION_PRECEDING` (`2`)
+  - : `otherNode` はこのノードより、両者を含むツリーの[前順深さ優先走査](https://ja.wikipedia.org/wiki/木構造_(データ構造)#深さ優先探索)で前にある（祖先ノード、前にある兄弟ノード、前にある兄弟ノードの子孫ノード、祖先ノードの前にある兄弟ノードなど）か、（接続されていないのであれば）任意だが一貫した順序で、そのノードよりも前に位置します。
+- `Node.DOCUMENT_POSITION_FOLLOWING` (`4`)
+  - : `otherNode` はこのノードより、両者を含むツリーの[前順深さ優先走査](https://ja.wikipedia.org/wiki/木構造_(データ構造)#深さ優先探索)で後にある（子孫ノード、後にある兄弟ノード、後にある兄弟ノードの子孫ノード、祖先ノードの後にある兄弟ノードなど）か、（接続されていないのであれば）任意だが一貫した順序で、そのノードよりも後に位置します。
+- `Node.DOCUMENT_POSITION_CONTAINS` (`8`)
+  - : `otherNode` はこのノードの祖先ノードです。
+- `Node.DOCUMENT_POSITION_CONTAINED_BY` (`16`)
+  - : `otherNode` はこのノードの子孫ノードです。
+- `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` (`32`)
+  - : その結果は、任意や実装固有の動作に依存し、移植性は保証されません。
+
+複数の条件に適合する場合、複数のビットが設定されることがあります。例えば、 `otherNode` が文書中でより先にあり、**_かつ_** `compareDocumentPosition()` が呼び出されたノードを含んでいれば、 `DOCUMENT_POSITION_CONTAINS` と `DOCUMENT_POSITION_PRECEDING` の両ビットが設定され、 `10` (`0x0A`) という値になります。
+
+## 例
+
+```js
+const head = document.head;
+const body = document.body;
+
+if (head.compareDocumentPosition(body) & Node.DOCUMENT_POSITION_FOLLOWING) {
+  console.log('正しい形式の文書です');
 } else {
-  console.log("head 要素は body 要素の前に配置しなくてはなりません。");
+  console.error(' が  の前にありません');
 }
-

- -

注記: compareDocumentPosition の戻り値はビットマスクです。よって、有意な結果を得るにはビット演算子の "&" を用いなくてはならない点に注意して下さい。

- -

仕様

- - - - - - - - - - - - - - - - - - - - - -

仕様書	策定状況	コメント
DOM Level 3	Recommendation
DOM Standard	Living standard

- -

構文

+> **Note:** ノードは自分自身に**含まれます**。 -

node.contains( otherNode )
-

+## 構文 -

例

+```js +contains(otherNode); +``` -

この関数は、ある要素がそのページの body 要素に含まれるかどうかをチェックするものです。contains は包括的かつ決定的であるため、body がそれ自身を含むかどうかは isInPage の意図ではないため明示的に false を返します。

+### 引数 -

function isInPage(node) {
+- `otherNode`
+  - : 検査する {{domxref("Node")}} です。
+    > **Note:** `otherNode` は省略できませんが、 `null` に設定することはできます。
+
+### 返値
+
+論理値で、 `true` は `otherNode` がそのノードに含まれていることを表します。
+そうでなければ `false` になります。
+
+`otherNode` 引数が `null` であれば、 `contains()` は常に `false` になります。
+
+## 例
+
+この関数は、ある要素がそのページの body 要素に含まれるかどうかを検査するものです。 `contains` は包括的かつ決定的であるため、 body がそれ自身を含むかどうかは `isInPage` の意図するところではないため、明示的に `false` を返します。
+
+```js
+function isInPage(node) {
   return (node === document.body) ? false : document.body.contains(node);
-}

- -

仕様

- - - - - - - - - - - - - - - - -

仕様	ステータス	コメント
{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}	{{Spec2("DOM WHATWG")}}	Initial definition

- -

ブラウザ実装状況

- -

概要

isDefaultNamespace は、引数としてネームスペース URI を受け取り、ネームスペースが指定されたノードのデフォルトのネームスペースである場合に true を返します。そうでない場合は false を返します。

構文

result = node.isDefaultNamespace(namespaceURI)
-

result : 戻り値は真偽値 (true / false) となる
namespaceURI : 要素に対してチェックする、名前空間を表す文字列

例

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

仕様書

概要

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

Node.isEqualNode()は2つのノードが同値かどうかをテストします。それぞれのノードが同じ型で、同じ特性（要素であればIDや子要素の数など）、属性値などを持つ場合、同値と判定されます。比較される内容はノードの型によって異なります。

+## 構文 -

構文

+```js +isEqualNode(otherNode); +``` -

var isEqualNode = node.isEqualNode(otherNode);
-

+### 引数 -

otherNode : 同値性を比較する対象の {{domxref("Node")}}

+- `otherNode` + - : 比較対象となる {{domxref("Node")}} です。 + > **Note:** この引数は省略可能ではありませんが、 `null` に設定することはできます。 -

例

+### 返値 -

3つの {{HTMLElement("div")}} ブロックを作成する例を示します。1つめと3つめは同じ内容と属性を持ち、2番目は異なっています。このとき、isEqualNode() を使ってJavaScriptでノードを比較した結果は以下のようになります。

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

HTML

+## 例 -

<div>最初の要素です。</div>
-<div>2番目の要素です。</div>
-<div>最初の要素です。</div>
+この例では、 3 つの {{HTMLElement("div")}} ブロックを作成しています。 1 つ目と 3 つ目は内容と属性が同じであり、 2 つ目は異なっています。このとき、`isEqualNode()` を使って JavaScript でノードを比較した結果は以下のようになります。
 
-<p id="output"></p>

+### HTML -

CSS

+```html +

最初の要素です。

2 番目の要素です。

最初の要素です。

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

+``` -

JavaScript

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

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/>";

+### JavaScript -

Results

- -

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

仕様

+output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isEqualNode(divList[0]) + "
"; +output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isEqualNode(divList[1]) + "
"; +output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isEqualNode(divList[2]) + "
"; +``` +### 結果 - - - - - - - - - - - - - - - -

仕様	ステータス	コメント
{{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}}	{{Spec2('DOM WHATWG')}}

+{{ EmbedLiveSample('Example', "100%", "210") }} -

ブラウザー互換性

+## 仕様書 +{{Specifications}} +## ブラウザーの互換性 -

+{{Compat}} -

参考

+## 関連情報 -

{{domxref("Node.isSameNode()")}}

+- {{domxref("Node.isSameNode()")}} diff --git a/files/ja/web/api/node/issupported/index.md b/files/ja/web/api/node/issupported/index.md index 3b25dc254b..db0b3935ee 100644 --- a/files/ja/web/api/node/issupported/index.md +++ b/files/ja/web/api/node/issupported/index.md @@ -1,44 +1,53 @@ --- -title: Node.isSupported +title: Node.isSupported() slug: Web/API/Node/isSupported tags: - - DOM - - DOM Element Methods - - Gecko - - Gecko DOM Reference + - メソッド + - 非推奨 + - リファレンス +browser-compat: api.Node.isSupported translation_of: Web/API/Node/isSupported --- -

- {{ApiRef}}{{obsolete_header("22")}}

概要

指定された機能が DOM 実装に含まれており、このノードでサポートされているかどうかをテストします。

構文

element.isSupported(feature, version)

- feature: - テストする機能の名前。DOMImplementation の hasFeature メソッドに渡される名前と同じです。コア DOM 仕様に定義された使用可能な値は、DOM Level 2 の Conformance セクションにリストがあります。
- version: - テストする機能のバージョン番号。DOM Level 2, version 1 では、この文字列は 2.0 になります。バージョンが指定されていなかったり、対象の機能がどのバージョンでもサポートされている場合は true を返します。

例

<div id="doc">
-</div>
-
-<script>
- // 要素を取得し、その要素が DOM2 HTML モジュールをサポートしているかどうかを確認します
- var main = document.getElementById('doc');
- var output = main.isSupported('HTML', '2.0');
-</script>
-

仕様

DOM Level 2 Core: isSupported

Gecko に関する注記

Gecko 19.0 {{geckoRelease("19.0")}} 以降では、このメソッドは常に true を返します。また、このメソッドは Gecko 22.0 {{geckoRelease("22.0")}} で削除されています。

+{{APIRef("DOM")}}{{deprecated_header}} + +**`isSupported()`** は {{domxref("Node")}} インターフェイスのメソッドで、この DOM の実装が指定された機能を実装しており、このノードがこの機能に対応しているかどうかを検査した結果を論理値で返します。 + +## 構文 + +```js +isSupported(feature, version); +``` + +### 引数 + +- `feature` + - : 文字列で、検査する機能の名前を指定します。 + これは [DOMImplementation](/ja/docs/Web/API/Document/implementation) の `hasFeature` メソッドに渡すものと同じ名前です。有効な値については、 [Conformance の章](https://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance)にあります。 +- `version` + - : 文字列で、検査する機能のバージョン番号を指定します。 + DOM Level 2 第 1 版では、これは `2.0` という文字列です。このバージョンが指定されなかった場合、何れかの版のメソッドが対応していれば、このメソッドは true を返します。 + +## 例 + +```html +

+ + +``` + +## 仕様書 + +この機能は仕様書に含まれていません。標準化路線から外れました。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.isEqualNode()")}} diff --git a/files/ja/web/api/node/removechild/index.md b/files/ja/web/api/node/removechild/index.md index ff64604414..335eea5b85 100644 --- a/files/ja/web/api/node/removechild/index.md +++ b/files/ja/web/api/node/removechild/index.md @@ -1,124 +1,125 @@ --- -title: Node.removeChild +title: Node.removeChild() slug: Web/API/Node/removeChild tags: - - DOM - - Gecko - - Node + - メソッド + - リファレンス +browser-compat: api.Node.removeChild translation_of: Web/API/Node/removeChild --- -

Node.removeChild() メソッドは、 DOM から子ノードを取り除きます。取り除いたノードを返します。

+{{APIRef("DOM")}} -

構文

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

var oldChild = node.removeChild(child);
-または
-node.removeChild(child);
-

+> **Note:** 取り除かれた子ノードへの参照が保持されている限り、子ノードはメモリー内に残りますが、 DOM の一部ではなくなります。 +> 後のコードで再利用することができます。 +> +> `removeChild()` の返値が保持されず、他の参照もなくなった場合は、まもなくメモリーから[自動的に削除](/en-US/docs/Web/JavaScript/Memory_Management)されます。 -

child は DOM から取り除く、子ノードです。
node は child の親ノードです。
oldChild は取り除かれた子ノードへの参照を保持します。 oldChild === child です。

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

取り除かれた子ノードはメモリ内に残りますが、 DOM の一部ではなくなります。最初の構文にある通り、取り除いたノードは、 oldChild オブジェクト参照を通じて、後でコード中で再利用することができます。

+## 構文 -

しかし、第二の構文では oldChild の参照が保持されないので、コードが他の場所でノードへの参照を持っていなければ、直ちに使用できなくなり、無関係になり、ふつうはまもなくメモリから自動的に削除されます。

+```js +removeChild(child); +``` -

child が実際には element ノードの子ではない場合、このメソッドは例外を発生します。これは child が呼び出し時には実際に element の子であったものの、要素を取り除こうと呼び出されたイベントハンドラーによって削除された場合にも発生します。

+### 引数 -

このメソッドでは、2つの異なる方法で例外が発生します。

+- `child` + - : {{domxref("Node")}} で、 DOM から取り除きたい子ノードを指定します。 -

-
child が実際に element の子であり、 DOM 上に存在していたが削除された場合、このメソッドでは次の例外が発生します。
+### 例外 -
Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
-
-
child がページの DOM 上に存在しない場合、このメソッドでは次の例外が発生します。
-
- Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
-

+- `NotFoundError` {{domxref("DOMException")}} + - : `child` がこのノードの子ではない場合に発生します。 +- {{jsxref("TypeError")}} + - : `child` が `null` であった場合に発生します。 -

例

+## 例 -

<!-- 対象とする HTML のコード -->
-<div id="top" > </div>
+### 単純な例
 
-<script type="text/javascript">
-      var top = document.getElementById("top");
-      var nested = document.getElementById("nested");
+この HTML を使います。
 
-      var garbage = top.removeChild(nested);    //Test Case 2: the method throws the exception (2)
+```html
+
+  
+
+```
 
-</script>
+親ノードが分かる場合に、指定された要素を取り除きます。
 
-<!--Sample HTML code-->
-<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);
+```
 
-<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
+```js
+let node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+```
 
-      // ......
-      garbage = top.removeChild(nested);   // Test Case 1: the method in the second call here, throws the exception (1)
+ある要素からすべての子を削除します。
 
-</script>
+```js
+let element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+```
 
-

+### TypeError が発生する例 -

<!--Sample HTML code-->
+```html
+
+ 
+```
 
-<div id="top">
-  <div id="nested"></div>
-</div>
-

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

// 親ノードから指定した子要素を除去
-var d = document.getElementById("top");
-var d_nested = document.getElementById("nested");
-var throwawayNode = d.removeChild(d_nested);
-

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

// 親要素が不明、不定の場合の方法
-var node = document.getElementById("nested");
-if (node.parentNode) {
-  node.parentNode.removeChild(node);
-}
-

+### NotFoundError が発生する例 -

// 要素の全ての子を除去
-var element = document.getElementById("top");
-while (element.firstChild) {
-  element.removeChild(element.firstChild);
-}
-

+```html + +

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

仕様書

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

+## 仕様書 -

ブラウザーの対応

+{{Specifications}} -

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

構文

+**`Node.replaceChild()`** メソッドは指定ノードの子ノードを別のノードに置き換えます。 -

replacedNode = parentNode.replaceChild(newChild, oldChild);
-

+## 構文 -

newChild : oldChild を置き換える新しいノード（既存のノードは先に取り除かれます）
oldChild : 置き換えられる既存ノード
replacedNode : 置き換えられたノード（oldChild と同じノード）

+```js +replaceChild(newChild, oldChild); +``` -

例

+### 引数 -

// <div>
-//  <span id="childSpan">foo bar</span>
-// </div>
+- `newChild`
+  - : `oldChild` を置き換える新しいノードです。
+    > **Warning:** 新しいノードが既に DOM のどこか別なところにある場合は、まずその位置から取り除かれます。
+- `oldChild`
+  - : 置き換えられる子ノードです。
+
+> **Note:** 引数の順序で、*新しい*ものの前に*古い*ものが来るのは異例です。
+[`Element.replaceWith()`](/ja/docs/Web/API/Element/replaceWith) は、要素であるノードのみに適用されるものですが、読んだり使用したりしやすいかもしれません。
+
+### 返値
+
+置き換えられた {{domxref("Node")}} です。これは `oldChild` と同じノードです。
+
+### 例外
+
+- `HierarchyRequestError` {{domxref("DOMException")}}
+  - : DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。
+    - `oldChild` の親が {{domxref("Document")}}, {{domxref("DocumentFragment")}}, {{domxref("Element")}} のいずれにもならない場合。
+    - `oldChild` を `newChild` で置き換えると循環参照になる場合。すなわち `newChild` がこのノードの祖先である場合。
+    - `newChild` が {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} のいずれでもない場合。
+    - 現在のノードが {{domxref("Text")}} であり、親ノードが {{domxref("Document")}} になる場合。
+    - 現在のノードが {{domxref("DocumentType")}} であり、その親が {{domxref("Document")}} にならない場合。 _doctype_ は常に _document_ の直下になければならないからです。
+    - このノードの親が {{domxref("Document")}} で `newChild` が {{domxref("DocumentFragment")}} であり、複数の {{domxref("Element")}} の子、または {{domxref("Text")}} の子がある場合。
+    - `oldChild` を `newChild` で置き換えると、 {{domxref("Document")}} の子の {{domxref("Element")}} が複数になる場合。
+    - `oldChild` を `newChild` で置き換えると、 {{domxref("Element")}} ノードが {{domxref("DocumentType")}} の前になる場合。
+- `NotFoundError` {{domxref("DOMException")}}
+  - : `oldChild` の親ノードが現在のノードではない場合に発生します。
+
+## 例
+
+```js
+// 前提:
+// 
+//  foo bar
+// 
 
 // ID も属性も内容も持たない空要素を生成
-var sp1 = document.createElement("span");
+const sp1 = document.createElement("span");
 
 // 生成したノードに id 属性 'newSpan' を付与
-sp1.setAttribute("id", "newSpan");
+sp1.id = "newSpan";
 
-// テキストノードを生成
-var sp1_content = document.createTextNode("新しい span 要素");
+// 新しい要素にいくらかの内容を作成
+const sp1_content = document.createTextNode("新しい置換 span 要素");
 
-// 生成したテキストノードを先の空要素の子ノードとして配置
+// その内容を新しい要素に適用
 sp1.appendChild(sp1_content);
 
-// 置換に先んじ、参照を代入
-var sp2 = document.getElementById("childSpan"); // 既存の置換対象ノード
-var parentDiv = sp2.parentNode; // 置換対象ノードの親要素
+// 置き換えられる既存のノードの参照を作る
+const sp2 = document.getElementById("childSpan");
+const parentDiv = sp2.parentNode;
 
-// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換
+// 既存のノード sp2 を新しい span 要素 sp1 で置換
 parentDiv.replaceChild(sp1, sp2);
 
+// 結果:
+// 
+//   新しい置換 span 要素
+// 
+```
 
-// 上記コード実行後のノードは以下の様になります:
-// <div>
-//   <span id="newSpan">新しい span 要素</span>
-// </div>
-

- -

仕様書

+## 仕様書 -

+{{Specifications}} -

ブラウザ実装状況

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

+{{Compat}} -