ChildNode ミックスインを廃止 (#1907)

ChildNode ミックスインを廃止し、メンバーの記事を Element インターフェイスに移管

7 files changed, 178 insertions, 380 deletions

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 909a5c7b7a..4c7234a383 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -3187,9 +3187,6 @@
 /ja/docs/Web/API/CanvasRenderingContext2D.drawFocusIfNeeded	/ja/docs/Web/API/CanvasRenderingContext2D/drawFocusIfNeeded
 /ja/docs/Web/API/CanvasRenderingContext2D.removeHitRegion	/ja/docs/Web/API/CanvasRenderingContext2D/removeHitRegion
 /ja/docs/Web/API/Canvas_API/Drawing_graphics_with_canvas	/ja/docs/Web/API/Canvas_API/Tutorial
-/ja/docs/Web/API/ChildNode	/ja/docs/orphaned/Web/API/ChildNode
-/ja/docs/Web/API/ChildNode/before	/ja/docs/orphaned/Web/API/ChildNode/before
-/ja/docs/Web/API/ChildNode/replaceWith	/ja/docs/orphaned/Web/API/ChildNode/replaceWith
 /ja/docs/Web/API/Console.error	/ja/docs/Web/API/Console/error
 /ja/docs/Web/API/Coordinates	/ja/docs/Web/API/GeolocationCoordinates
 /ja/docs/Web/API/DOMLocator	/ja/docs/orphaned/Web/API/DOMLocator
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 2f71d0a613..1be588167d 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -13613,6 +13613,13 @@
       "Okome"
     ]
   },
+  "Web/API/Element/before": {
+    "modified": "2020-10-17T03:58:22.731Z",
+    "contributors": [
+      "Potappo",
+      "Shirasu"
+    ]
+  },
   "Web/API/Element/blur_event": {
     "modified": "2020-10-15T21:58:39.988Z",
     "contributors": [
@@ -14142,6 +14149,13 @@
       "Mgjbot"
     ]
   },
+  "Web/API/Element/replaceWith": {
+    "modified": "2020-10-17T04:41:48.425Z",
+    "contributors": [
+      "Potappo",
+      "Shirasu"
+    ]
+  },
   "Web/API/Element/requestFullScreen": {
     "modified": "2019-06-03T03:04:44.040Z",
     "contributors": [
@@ -50796,28 +50810,6 @@
       "shinnn"
     ]
   },
-  "orphaned/Web/API/ChildNode": {
-    "modified": "2020-11-23T03:36:42.854Z",
-    "contributors": [
-      "segayuu",
-      "Marsf",
-      "momoi"
-    ]
-  },
-  "orphaned/Web/API/ChildNode/before": {
-    "modified": "2020-10-17T03:58:22.731Z",
-    "contributors": [
-      "Potappo",
-      "Shirasu"
-    ]
-  },
-  "orphaned/Web/API/ChildNode/replaceWith": {
-    "modified": "2020-10-17T04:41:48.425Z",
-    "contributors": [
-      "Potappo",
-      "Shirasu"
-    ]
-  },
   "orphaned/Web/API/DOMLocator": {
     "modified": "2020-08-13T09:34:48.574Z",
     "contributors": [
diff --git a/files/ja/orphaned/web/api/childnode/before/index.html b/files/ja/orphaned/web/api/childnode/before/index.html
deleted file mode 100644
index b0b091392e..0000000000
--- a/files/ja/orphaned/web/api/childnode/before/index.html
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: ChildNode.before()
-slug: orphaned/Web/API/ChildNode/before
-tags:
-  - API
-  - DOM
-  - Method
-  - Node
-  - Reference
-translation_of: Web/API/ChildNode/before
-original_slug: Web/API/ChildNode/before
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><code><strong>ChildNode.before()</strong></code> は <code>ChildNode</code> の親の子リストの、<code>ChildNode</code> の直前に、 {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">[Throws, Unscopable]
-void ChildNode.before((Node or DOMString)... nodes);
-</pre>
-
-<h3 id="Parameters" name="Parameters">パラメーター</h3>
-
-<dl>
- <dt><code>nodes</code></dt>
- <dd>{{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを挿入します。</dd>
-</dl>
-
-<h3 id="Exceptions" name="Exceptions">例外</h3>
-
-<ul>
- <li>{{domxref("HierarchyRequestError")}}: ノードは階層の指定の位置には挿入できません。</li>
-</ul>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Inserting_an_element" name="Inserting_an_element">要素の挿入</h3>
-
-<pre class="brush: js notranslate">var parent = document.createElement("div");
-var child = document.createElement("p");
-parent.appendChild(child);
-var span = document.createElement("span");
-
-child.before(span);
-
-console.log(parent.outerHTML);
-// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"
-</pre>
-
-<h3 id="Inserting_text" name="Inserting_text">テキストの挿入</h3>
-
-<pre class="brush: js notranslate">var parent = document.createElement("div");
-var child = document.createElement("p");
-parent.appendChild(child);
-
-child.before("Text");
-
-console.log(parent.outerHTML);
-// "&lt;div&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
-
-<h3 id="Inserting_an_element_and_text" name="Inserting_an_element_and_text">要素とテキストの挿入</h3>
-
-<pre class="brush: js notranslate">var parent = document.createElement("div");
-var child = document.createElement("p");
-parent.appendChild(child);
-var span = document.createElement("span");
-
-child.before(span, "Text");
-
-console.log(parent.outerHTML);
-// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
-
-<h3 id="ChildNode.before_is_unscopable" name="ChildNode.before_is_unscopable"><code>ChildNode.before()</code> はスコーピングに非対応</h3>
-
-<p><code>before()</code> メソッドは <code>with</code> 文でのスコーピングに対応していません。詳細は {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
-
-<pre class="brush: js notranslate">with(node) {
-  before("foo");
-}
-// ReferenceError: before is not defined </pre>
-
-<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
-
-<p>以下のポリフィルで、 Internet Explorer 9 以降でも <code>before()</code> メソッドが利用できます。</p>
-
-<pre class="brush: js notranslate">// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('before')) {
-      return;
-    }
-    Object.defineProperty(item, 'before', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function before() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.parentNode.insertBefore(docFrag, this);
-      }
-    });
-  });
-})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre>
-
-<h2 id="Specification" name="Specification">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">策定状況</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-
-
-<p>{{Compat("api.ChildNode.before")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("ChildNode")}} と {{domxref("ParentNode")}}</li>
- <li>{{domxref("ChildNode.after()")}}</li>
- <li>{{domxref("ParentNode.append()")}}</li>
- <li>{{domxref("Node.appendChild()")}}</li>
- <li>{{domxref("Node.insertBefore()")}}</li>
- <li>{{domxref("Element.insertAdjacentElement()")}}</li>
- <li>{{domxref("NodeList")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/api/childnode/index.html b/files/ja/orphaned/web/api/childnode/index.html
deleted file mode 100644
index a1208b5aa0..0000000000
--- a/files/ja/orphaned/web/api/childnode/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: ChildNode
-slug: orphaned/Web/API/ChildNode
-tags:
-  - API
-  - DOM
-  - Experimental
-  - Interface
-  - Node
-translation_of: Web/API/ChildNode
-original_slug: Web/API/ChildNode
----
-<p>{{APIRef("DOM")}}</p>
-
-<p><span class="seoSummary"><code><strong>ChildNode</strong></code> ミックスインは親を持つことができる {{domxref("Node")}} オブジェクトに共通のメソッド・プロパティが含まれています。これは、{{domxref("Element")}}、{{domxref("DocumentType")}}、{{domxref("CharacterData")}} オブジェクトによって実装されています。</span></p>
-
-<h2 id="Properties" name="Properties">プロパティ</h2>
-
-<p><em>継承された、または固有のプロパティはありません。</em></p>
-
-<h2 id="Methods" name="Methods">メソッド</h2>
-
-<p><em>継承されたメソッドはありません。</em></p>
-
-<dl>
- <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
- <dd>この <code>ChildNode</code>を、その親の <code>children</code> から削除します。</dd>
- <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt>
- <dd>{{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを、この <code>ChildNode</code> の親の <code>children</code> の、<code>ChildNode</code> の直前に挿入します。{{domxref("DOMString")}} オブジェクトは、{{domxref("Text")}} ノードと等価なノードとして挿入されます。</dd>
- <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt>
- <dd>{{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを、この <code>ChildNode</code> の親の <code>children</code> の、<code>ChildNode</code> の直後に挿入します。{{domxref("DOMString")}} オブジェクトは、{{domxref("Text")}} ノードと等価なノードとして挿入されます。</dd>
- <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt>
- <dd><code>ChildNode</code> の親の <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">children</span></font> 内に含まれるこの <code>ChildNode</code> を {{domxref("Node")}} または {{domxref("DOMString")}} のセットと置き換えます。{{domxref("DOMString")}} オブジェクトは、{{domxref("Text")}} ノードと等価なノードとして挿入されます。</dd>
-</dl>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状況</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td><code>ElementTraversal</code> インターフェースは {{domxref("ParentNode")}} と <code>ChildNode</code> に分割されました。 <code>previousElementSibling</code> と <code>nextElementSibling</code> は後者で定義されています。<br>
-    {{domxref("CharacterData")}} と {{domxref("DocumentType")}} は新しいインターフェースが実装されています。<br>
-    <code>remove()</code>, <code>before()</code>, <code>after()</code> および <code>replaceWith()</code> メソッドが追加されました。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
-   <td>{{Spec2('Element Traversal')}}</td>
-   <td><code>ElementTraversal</code> 基本インターフェースにこのプロパティの初期定義が追加され、{{domxref("Element")}} で使われます。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Polyfill" name="Polyfill">互換コード</h2>
-
-<p>外部サイト (github): <code><a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></code></p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの実装状況</h2>
-
-<p>{{Compat("api.ChildNode")}}</p>
-
-<h2 id="See_also" name="See_also">関連項目</h2>
-
-<ul>
- <li>{{domxref("ParentNode")}} インターフェース</li>
- <li>
-  <div class="syntaxbox">{{domxref("ParentNode")}} インターフェースを実装したオブジェクト型</div>
-
-  <ul>
-   <li>
-    <div class="syntaxbox">{{domxref("CharacterData")}}</div>
-   </li>
-   <li>
-    <div class="syntaxbox">{{domxref("Element")}}</div>
-   </li>
-   <li>
-    <div class="syntaxbox">{{domxref("DocumentType")}}</div>
-   </li>
-  </ul>
- </li>
- <li>
-  <div class="syntaxbox">The {{domxref("NonDocumentTypeChildNode")}} interface</div>
- </li>
-</ul>
diff --git a/files/ja/orphaned/web/api/childnode/replacewith/index.html b/files/ja/orphaned/web/api/childnode/replacewith/index.html
deleted file mode 100644
index 28896c90fd..0000000000
--- a/files/ja/orphaned/web/api/childnode/replacewith/index.html
+++ /dev/null
@@ -1,120 +0,0 @@
----
-title: ChildNode.replaceWith()
-slug: orphaned/Web/API/ChildNode/replaceWith
-tags:
-  - API
-  - DOM
-  - Method
-  - Node
-  - Reference
-translation_of: Web/API/ChildNode/replaceWith
-original_slug: Web/API/ChildNode/replaceWith
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><code><strong>ChildNode.replaceWith()</strong></code> は親の子リストの <code>ChildNode</code> を、 {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットに置換します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">[Throws, Unscopable]
-void ChildNode.replaceWith((Node or DOMString)... nodes);
-</pre>
-
-<h3 id="Parameters" name="Parameters">パラメーター</h3>
-
-<dl>
- <dt><code>nodes</code></dt>
- <dd>{{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットで置換します。</dd>
-</dl>
-
-<h3 id="Exceptions" name="Exceptions">例外</h3>
-
-<ul>
- <li>{{domxref("HierarchyRequestError")}}: ノードは階層の指定の位置には挿入できません。</li>
-</ul>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Using_replaceWith" name="Using_replaceWith"><code>replaceWith()</code> の使用</h3>
-
-<pre class="brush: js notranslate">var parent = document.createElement("div");
-var child = document.createElement("p");
-parent.appendChild(child);
-var span = document.createElement("span");
-
-child.replaceWith(span);
-
-console.log(parent.outerHTML);
-// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
-</pre>
-
-<h3 id="ChildNode.replaceWith_is_unscopable" name="ChildNode.replaceWith_is_unscopable"><code>ChildNode.replaceWith()</code> はスコーピングに非対応</h3>
-
-<p><code>replaceWith()</code> メソッドは <code>with</code> 文でのスコーピングに対応していません。詳細は {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
-
-<pre class="brush: js notranslate">with(node) {
-  replaceWith("foo");
-}
-// ReferenceError: replaceWith is not defined </pre>
-
-<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
-
-<p>以下のポリフィルで、 Internet Explorer 9 以降でも <code>replaceWith()</code> メソッドが利用できます。</p>
-
-<pre class="brush: js notranslate">function ReplaceWithPolyfill() {
-  'use-strict'; // For safari, and IE &gt; 10
-  var parent = this.parentNode, i = arguments.length, currentNode;
-  if (!parent) return;
-  if (!i) // if there are no arguments
-    parent.removeChild(this);
-  while (i--) { // i-- decrements i and returns the value of i before the decrement
-    currentNode = arguments[i];
-    if (typeof currentNode !== 'object'){
-      currentNode = this.ownerDocument.createTextNode(currentNode);
-    } else if (currentNode.parentNode){
-      currentNode.parentNode.removeChild(currentNode);
-    }
-    // the value of "i" below is after the decrement
-    if (!i) // if currentNode is the first argument (currentNode === arguments[0])
-      parent.replaceChild(currentNode, this);
-    else // if currentNode isn't the first
-      parent.insertBefore(currentNode, this.nextSibling);
-  }
-}
-if (!Element.prototype.replaceWith)
-    Element.prototype.replaceWith = ReplaceWithPolyfill;
-if (!CharacterData.prototype.replaceWith)
-    CharacterData.prototype.replaceWith = ReplaceWithPolyfill;
-if (!DocumentType.prototype.replaceWith)
-    DocumentType.prototype.replaceWith = ReplaceWithPolyfill;</pre>
-
-<h2 id="Specification" name="Specification">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">策定状況</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-
-
-<p>{{Compat("api.ChildNode.replaceWith")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("ChildNode")}} と {{domxref("ParentNode")}}</li>
- <li>{{domxref("Node.replaceChild()")}}</li>
- <li>{{domxref("NodeList")}}</li>
-</ul>
diff --git a/files/ja/web/api/element/before/index.html b/files/ja/web/api/element/before/index.html
new file mode 100644
index 0000000000..652f38c95f
--- /dev/null
+++ b/files/ja/web/api/element/before/index.html
@@ -0,0 +1,91 @@
+---
+title: Element.before()
+slug: Web/API/Element/before
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - Reference
+browser-compat: api.Element.before
+translation_of: Web/API/Element/before
+original_slug: Web/API/ChildNode/before
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Element.before()</strong></code> は一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを、この <code>Element</code> の親の子リストの中、この <code>Element</code> の直前に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">before(... nodes)</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<dl>
+	<dt><code>nodes</code></dt>
+	<dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
+</dl>
+
+<h3 id="Exceptions">例外</h3>
+
+<ul>
+	<li>{{domxref("HierarchyRequestError")}}: 階層の指定の位置にノードを挿入できない。</li>
+</ul>
+
+<h2 id="Examples">例</h2>
+
+<h3 id="Inserting_an_element">要素の挿入</h3>
+
+<pre class="brush: js">let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+let span = document.createElement("span");
+
+p.before(span);
+
+console.log(container.outerHTML);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"
+</pre>
+
+<h3 id="Inserting_text">テキストの挿入</h3>
+
+<pre class="brush: js">let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+
+p.before("Text");
+
+console.log(container.outerHTML);
+// "&lt;div&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
+
+<h3 id="Inserting_an_element_and_text">要素とテキストの挿入</h3>
+
+<pre class="brush: js">let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+let span = document.createElement("span");
+
+p.before(span, "Text");
+
+console.log(container.outerHTML);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
+
+
+<h2 id="Specification">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Element.after()")}}</li>
+  <li>{{domxref("Element.append()")}}</li>
+  <li>{{domxref("Node.appendChild()")}}</li>
+  <li>{{domxref("Node.insertBefore()")}}</li>
+  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+  <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/replacewith/index.html b/files/ja/web/api/element/replacewith/index.html
new file mode 100644
index 0000000000..ad9420f041
--- /dev/null
+++ b/files/ja/web/api/element/replacewith/index.html
@@ -0,0 +1,73 @@
+---
+title: Element.replaceWith()
+slug: Web/API/Element/replaceWith
+tags:
+  - API
+  - DOM
+  - Method
+  - Element
+  - Reference
+browser-compat: api.Element.replaceWith
+translation_of: Web/API/Element/replaceWith
+original_slug: Web/API/ChildNode/replaceWith
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Element.replaceWith()</strong></code> メソッドは、この <code>Element</code> を親の子リストの中で一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトに置換します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">replaceWith(...nodes)</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<dl>
+	<dt><code>nodes</code></dt>
+	<dd>一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトで置換します。</dd>
+</dl>
+
+<h3 id="Exceptions">例外</h3>
+
+<ul>
+	<li>{{domxref("HierarchyRequestError")}}: 階層の指定の位置にはノードを挿入できません。</li>
+</ul>
+
+<h2 id="Examples">例</h2>
+
+<h3 id="Using_replaceWith"><code>replaceWith()</code> の使用</h3>
+
+<pre class="brush: js">const div = document.createElement("div");
+const p = document.createElement("p");
+div.appendChild(p);
+const span = document.createElement("span");
+
+p.replaceWith(span);
+
+console.log(div.outerHTML);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
+</pre>
+
+<h3 id="replaceWith_is_unscopable"><code>replaceWith()</code> はスコーピングに非対応</h3>
+
+<p><code>replaceWith()</code> メソッドは <code>with</code> 文でのスコーピングに対応していません。詳細は {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
+
+<pre class="brush: js">with(node) {
+  replaceWith("foo");
+}
+// ReferenceError: replaceWith is not defined </pre>
+
+<h2 id="Specification">仕様書</h2>
+
+<p>{{Specifications}}
+
+</p>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Node.replaceChild()")}}</li>
+  <li>{{domxref("NodeList")}}</li>
+</ul>