ParentNode ミックスインを廃止 (#2028)

- ParentNode ミックスインを廃止
- メンバーは Element クラスへ移動
- 各ドキュメントを 2021/08/11 時点の英語版に同期

12 files changed, 355 insertions, 844 deletions

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 7ddf4ab6ef..12133f1be4 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -3228,12 +3228,6 @@
 /ja/docs/Web/API/Node/prefix	/ja/docs/Web/API/Element/prefix
 /ja/docs/Web/API/NodeList.item	/ja/docs/Web/API/NodeList/item
 /ja/docs/Web/API/NonDocumentTypeChildNode	/ja/docs/Web/API/Element
-/ja/docs/Web/API/ParentNode	/ja/docs/orphaned/Web/API/ParentNode
-/ja/docs/Web/API/ParentNode/append	/ja/docs/orphaned/Web/API/ParentNode/append
-/ja/docs/Web/API/ParentNode/childElementCount	/ja/docs/Web/API/Element/childElementCount
-/ja/docs/Web/API/ParentNode/children	/ja/docs/orphaned/Web/API/ParentNode/children
-/ja/docs/Web/API/ParentNode/prepend	/ja/docs/orphaned/Web/API/ParentNode/prepend
-/ja/docs/Web/API/ParentNode/querySelectorAll	/ja/docs/orphaned/Web/API/ParentNode/querySelectorAll
 /ja/docs/Web/API/Position	/ja/docs/Web/API/GeolocationPosition
 /ja/docs/Web/API/PositionError	/ja/docs/Web/API/GeolocationPositionError
 /ja/docs/Web/API/Push_API/Using_the_Push_API	/ja/docs/Web/API/Push_API
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 0f002f99c7..4ff0966dc6 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -13592,6 +13592,14 @@
       "hashedhyphen"
     ]
   },
+  "Web/API/Element/append": {
+    "modified": "2020-10-15T22:19:11.886Z",
+    "contributors": [
+      "mfuji09",
+      "dskymd",
+      "isdh"
+    ]
+  },
   "Web/API/Element/attachShadow": {
     "modified": "2020-10-15T22:09:56.110Z",
     "contributors": [
@@ -13635,6 +13643,13 @@
       "Marsf"
     ]
   },
+  "Web/API/Element/children": {
+    "modified": "2020-11-23T04:45:58.549Z",
+    "contributors": [
+      "segayuu",
+      "sii"
+    ]
+  },
   "Web/API/Element/classList": {
     "modified": "2020-10-15T21:14:13.067Z",
     "contributors": [
@@ -14095,6 +14110,13 @@
       "sii"
     ]
   },
+  "Web/API/Element/prepend": {
+    "modified": "2020-10-15T22:22:02.876Z",
+    "contributors": [
+      "mfuji09",
+      "silverskyvicto"
+    ]
+  },
   "Web/API/Element/querySelector": {
     "modified": "2019-03-23T23:02:48.166Z",
     "contributors": [
@@ -49344,43 +49366,6 @@
       "Wind1808"
     ]
   },
-  "orphaned/Web/API/ParentNode": {
-    "modified": "2020-11-23T03:46:53.867Z",
-    "contributors": [
-      "segayuu",
-      "yyss",
-      "Marsf",
-      "YuichiNukiyama"
-    ]
-  },
-  "orphaned/Web/API/ParentNode/append": {
-    "modified": "2020-10-15T22:19:11.886Z",
-    "contributors": [
-      "mfuji09",
-      "dskymd",
-      "isdh"
-    ]
-  },
-  "orphaned/Web/API/ParentNode/children": {
-    "modified": "2020-11-23T04:45:58.549Z",
-    "contributors": [
-      "segayuu",
-      "sii"
-    ]
-  },
-  "orphaned/Web/API/ParentNode/prepend": {
-    "modified": "2020-10-15T22:22:02.876Z",
-    "contributors": [
-      "mfuji09",
-      "silverskyvicto"
-    ]
-  },
-  "orphaned/Web/API/ParentNode/querySelectorAll": {
-    "modified": "2020-10-15T22:26:50.502Z",
-    "contributors": [
-      "mfuji09"
-    ]
-  },
   "orphaned/Web/API/RTCIdentityErrorEvent": {
     "modified": "2019-03-23T22:51:24.405Z",
     "contributors": [
diff --git a/files/ja/orphaned/web/api/parentnode/append/index.html b/files/ja/orphaned/web/api/parentnode/append/index.html
deleted file mode 100644
index 1206957c43..0000000000
--- a/files/ja/orphaned/web/api/parentnode/append/index.html
+++ /dev/null
@@ -1,143 +0,0 @@
----
-title: ParentNode.append()
-slug: orphaned/Web/API/ParentNode/append
-tags:
-  - API
-  - DOM
-  - Method
-  - Node
-  - ParentNode
-  - Reference
-translation_of: Web/API/ParentNode/append
-original_slug: Web/API/ParentNode/append
----
-<p>{{APIRef("DOM")}}</p>
-
-<p><strong><code>ParentNode.append()</code></strong> メソッドは、{{domxref("Node")}} オブジェクト、または {{domxref("DOMString")}} オブジェクトのセットを <code>ParentNode</code> の最後に追加します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと同等に挿入されます。</p>
-
-<p>{{domxref("Node.appendChild()")}} との違いは次の通りです。</p>
-
-<ul>
- <li><code>ParentNode.append()</code> は {{domxref("DOMString")}} も追加することができますが、<code>Node.appendChild()</code> は{{domxref("Node")}} オブジェクトのみを受け付けます。</li>
- <li><code>ParentNode.append()</code> は戻り値を持っていませんが、<code>Node.appendChild()</code> は追加された{{domxref("Node")}} オブジェクトを返します。</li>
- <li><code>ParentNode.append()</code> は複数のノードや文字列を追加することができますが、<code>Node.appendChild()</code> 一つのノードだけしか追加することができせん。</li>
-</ul>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">// [Throws, Unscopable]
-ParentNode.append(...<var>nodesOrDOMStrings</var>) // returns undefined
-</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="Appending_an_element" name="Appending_an_element">要素の追加</h3>
-
-<pre class="brush: js notranslate">let parent = document.createElement("div")
-let p = document.createElement("p")
-parent.append(p)
-
-console.log(parent.childNodes) // NodeList [ &lt;p&gt; ]
-</pre>
-
-<h3 id="Appending_text" name="Appending_text">テキストの追加</h3>
-
-<pre class="brush: js notranslate">let parent = document.createElement("div")
-parent.append("Some text")
-
-console.log(parent.textContent) // "Some text"</pre>
-
-<h3 id="Appending_an_element_and_text" name="Appending_an_element_and_text">要素とテキストの追加</h3>
-
-<pre class="brush: js notranslate">let parent = document.createElement("div")
-let p = document.createElement("p")
-parent.append("Some text", p)
-
-console.log(parent.childNodes) // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
-
-<h3 id="ParentNode.append_is_unscopable" name="ParentNode.append_is_unscopable">ParentNode.append() はスコープが効かない</h3>
-
-<p><code>append()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
-
-<pre class="brush: js notranslate">let parent = document.createElement("div")
-
-with(parent) {
-  append("foo")
-}
-// ReferenceError: append is not defined </pre>
-
-<h2 id="Polyfill">Polyfill</h2>
-
-<p><code>append()</code> メソッドはInternet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。</p>
-
-<pre class="brush: js notranslate">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('append')) {
-      return;
-    }
-    Object.defineProperty(item, 'append', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function append() {
-        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.appendChild(docFrag);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.ParentNode.append")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("ParentNode")}} および {{domxref("ChildNode")}}</li>
- <li>{{domxref("ParentNode.prepend()")}}</li>
- <li>{{domxref("Node.appendChild()")}}</li>
- <li>{{domxref("ChildNode.after()")}}</li>
- <li>{{domxref("Element.insertAdjacentElement()")}}</li>
- <li>{{domxref("NodeList")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/api/parentnode/children/index.html b/files/ja/orphaned/web/api/parentnode/children/index.html
deleted file mode 100644
index 537c91d1c6..0000000000
--- a/files/ja/orphaned/web/api/parentnode/children/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: ParentNode.children
-slug: orphaned/Web/API/ParentNode/children
-tags:
-  - API
-  - Child
-  - Child Nodes
-  - DOM
-  - HTMLCollection
-  - Node
-  - ParentNode
-  - Property
-  - children
-translation_of: Web/API/ParentNode/children
-original_slug: Web/API/ParentNode/children
----
-<div>{{ APIRef("DOM") }}</div>
-
-<p>{{domxref("ParentNode")}} の <strong><code>children</code></strong> プロパティは、呼び出された際のノードの子{{domxref("Element", "要素", "", 1)}}ノードをすべて含んだ動的な（生きている） {{domxref("HTMLCollection")}} を返す、読み取り専用プロパティです。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">let <em>children</em> = <var>node</var>.children;</pre>
-
-<h3 id="Value" name="Value">値</h3>
-
-<p><em><code>node</code></em> の子の DOM要素の生きている順序付きコレクションの、 {{ domxref("HTMLCollection") }} です。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。</p>
-
-<p>ノードが子要素を持たない場合、 <code>children</code> は要素を含まず、<code>length</code> は <code>0</code> です。</p>
-
-<h2 id="Example" name="Example">例 </h2>
-
-<pre class="brush: js notranslate">const foo = document.getElementById('foo');
-for (let i = 0; i &lt; foo.children.length; i++) {
-  console.log(foo.children[i].tagName);
-}</pre>
-
-<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
-
-<pre class="brush: js notranslate">// Overwrites native 'children' prototype.
-// Adds Document &amp; DocumentFragment support for IE9 &amp; Safari.
-// Returns array instead of HTMLCollection.
-;(function(constructor) {
-  if (constructor &amp;&amp;
-    constructor.prototype &amp;&amp;
-    constructor.prototype.children == null) {
-    Object.defineProperty(constructor.prototype, 'children', {
-      get: function() {
-        let i = 0, node, nodes = this.childNodes, children = [];
-        while (node = nodes[i++]) {
-          if (node.nodeType === 1) {
-            children.push(node);
-          }
-        }
-        return children;
-      }
-    });
-  }
-})(window.Node || window.Element);
-</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-parentnode-children', 'ParentNode.children')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>初めての定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-<p>{{Compat("api.ParentNode.children")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("ParentNode")}} および {{domxref("ChildNode")}} インターフェイス</li>
- <li>
-  <div class="syntaxbox">このインターフェイスを実装する次のオブジェクトタイプ。{{domxref("Document")}}、{{domxref("Element")}}、 および {{domxref("DocumentFragment")}}</div>
- </li>
- <li>
-  <div class="syntaxbox">{{domxref("Node.childNodes")}}</div>
- </li>
-</ul>
diff --git a/files/ja/orphaned/web/api/parentnode/index.html b/files/ja/orphaned/web/api/parentnode/index.html
deleted file mode 100644
index 5d1ec6c97e..0000000000
--- a/files/ja/orphaned/web/api/parentnode/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: ParentNode
-slug: orphaned/Web/API/ParentNode
-tags:
-  - API
-  - DOM
-  - Finding Elements
-  - Finding Nodes
-  - Interface
-  - Locating Elements
-  - Locating Nodes
-  - Managing Elements
-  - Managing Nodes
-  - Mixin
-  - Node
-  - ParentNode
-  - Reference
-  - Selectors
-translation_of: Web/API/ParentNode
-original_slug: Web/API/ParentNode
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><span class="seoSummary"><code><strong>ParentNode</strong></code> ミックスインは、子を持つことができるすべての型の {{domxref("Node")}} オブジェクトに特有のメソッドやプロパティを含みます。</span>これは、{{domxref("Element")}} と {{domxref("Document")}}、{{domxref("DocumentFragment")}} オブジェクトに実装されています。</p>
-
-<p>対象のノードや要素を見つけるために<a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>を使用する方法について、詳しくは<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクタを使用した DOM 要素の指定</a>をご覧ください。</p>
-
-<h2 id="Properties" name="Properties">プロパティ</h2>
-
-<dl>
- <dt>{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}</dt>
- <dd>オブジェクトが持つ子の数を表す <code>unsigned long</code> 値を返します。</dd>
- <dt>{{domxref("ParentNode.children")}} {{readonlyInline}}</dt>
- <dd>この <code>ParentNode</code> の子であるすべての {{domxref("Element")}} 型のオブジェクトを含む実際の {{domxref("HTMLCollection")}} を返します。要素ではないノードは省きます。</dd>
- <dt>{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}</dt>
- <dd>この <code>ParentNode</code> の最初の子である {{domxref("Element")}} を返します。存在しない場合は <code>null</code> を返す。</dd>
- <dt>{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}</dt>
- <dd>この <code>ParentNode</code> の最後の子である {{domxref("Element")}} を返します。存在しない場合は <code>null</code> を返す。</dd>
-</dl>
-
-<h2 id="Methods" name="Methods">メソッド</h2>
-
-<dl>
- <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt>
- <dd><code>ParentNode</code> の最後の子の後ろに、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを挿入します。{{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</dd>
- <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt>
- <dd><code>ParentNode</code> の最初の子の前に、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを挿入します。{{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</dd>
- <dt>{{domxref("ParentNode.querySelector()")}}</dt>
- <dd>現在の要素をルートとして、指定したセレクターのグループにマッチする最初の {{domxref("Element")}} を返します。</dd>
- <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt>
- <dd>現在の要素をルートとして、指定したセレクターのグループにマッチする要素のリストを表す {{domxref("NodeList")}} を返します。</dd>
- <dt>{{domxref("ParentNode.replaceChildren()")}}</dt>
- <dd>ノードの既存の子ノードを、指定した新しい子ノードのセットに入れ替えます。</dd>
-</dl>
-
-<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', '#parentnode', 'ParentNode')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td><code>ElementTraversal</code> インターフェイスを {{domxref("ChildNode")}} と {{domxref("ParentNode")}} に分割しました。{{domxref("ParentNode.firstElementChild")}} と {{domxref("ParentNode.lastElementChild")}}、{{domxref("ParentNode.childElementCount")}} プロパティは、後者で定義されていません。<br>
-    {{domxref("ParentNode.children")}} プロパティが追加されました。<br>
-    {{domxref("ParentNode.querySelector()")}}、{{domxref("ParentNode.querySelectorAll()")}}、{{domxref("ParentNode.append()")}}、{{domxref("ParentNode.prepend()")}} メソッドが追加されました。</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="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-
-
-<p>{{Compat("api.ParentNode")}}</p>
-
-<h2 id="See_also" name="See_also">関連項目</h2>
-
-<ul>
- <li>{{domxref("ChildNode")}} 基本インターフェース。</li>
- <li>
-  <div class="syntaxbox">このミックスインを実装したオブジェクト型: {{domxref("Document")}} と {{domxref("Element")}}、{{domxref("DocumentFragment")}}。</div>
- </li>
-</ul>
diff --git a/files/ja/orphaned/web/api/parentnode/prepend/index.html b/files/ja/orphaned/web/api/parentnode/prepend/index.html
deleted file mode 100644
index 8c6c87cede..0000000000
--- a/files/ja/orphaned/web/api/parentnode/prepend/index.html
+++ /dev/null
@@ -1,143 +0,0 @@
----
-title: ParentNode.prepend()
-slug: orphaned/Web/API/ParentNode/prepend
-tags:
-  - API
-  - DOM
-  - Method
-  - Node
-  - ParentNode
-  - Reference
-  - prepend
-translation_of: Web/API/ParentNode/prepend
-original_slug: Web/API/ParentNode/prepend
----
-<p>{{APIRef("DOM")}}</p>
-
-<p><strong><code>ParentNode.prepend()</code></strong> メソッドは、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを {{domxref("ParentNode")}} の最初の子の前に挿入します。 {{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate"><em>ParentNode</em>.prepend(<em>...nodesToPrepend</em>);
-</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code>nodesToPrepend</code></dt>
- <dd>現在 <code>ParentNode</code> にある最初の子ノードの前に挿入する1つ以上のノード。各ノードは {{domxref("Node")}} オブジェクトまたは文字列として指定できます。文字列は新しい {{domxref("Text")}} ノードとして挿入されます。</dd>
-</dl>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p><code>undefined</code>.</p>
-
-<h3 id="Exceptions" name="Exceptions">例外</h3>
-
-<ul>
- <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の箇所に追加させることができません。</li>
-</ul>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Prepending_an_element" name="Prepending_an_element">要素の前に追加</h3>
-
-<pre class="brush: js notranslate">var parent = document.createElement("div");
-var p = document.createElement("p");
-var span = document.createElement("span");
-parent.append(p);
-parent.prepend(span);
-
-console.log(parent.childNodes); // NodeList [ &lt;span&gt;, &lt;p&gt; ]
-</pre>
-
-<h3 id="Prepending_text" name="Prepending_text">テキストの前に追加</h3>
-
-<pre class="brush: js notranslate">var parent = document.createElement("div");
-parent.append("Some text");
-parent.prepend("Headline: ");
-
-console.log(parent.textContent); // "Headline: Some text"</pre>
-
-<h3 id="Appending_an_element_and_text" name="Appending_an_element_and_text">要素とテキストの追加</h3>
-
-<pre class="brush: js notranslate">var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.prepend("Some text", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
-
-<h3 id="ParentNode.prepend_is_unscopable" name="ParentNode.prepend_is_unscopable">ParentNode.prepend() はスコープが効かない</h3>
-
-<p><code>prepend()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
-
-<pre class="brush: js notranslate">var parent = document.createElement("div");
-
-with(parent) {
-  prepend("foo");
-}
-// ReferenceError: prepend is not defined </pre>
-
-<h2 id="Polyfill">Polyfill</h2>
-
-<p><code>prepend()</code> メソッドは Internet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。</p>
-
-<pre class="brush: js notranslate">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('prepend')) {
-      return;
-    }
-    Object.defineProperty(item, 'prepend', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function prepend() {
-        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.insertBefore(docFrag, this.firstChild);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.ParentNode.prepend")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("ParentNode")}} および {{domxref("ChildNode")}}</li>
- <li>{{domxref("ParentNode.append()")}}</li>
- <li>{{domxref("Node.appendChild()")}}</li>
- <li>{{domxref("Node.insertBefore()")}}</li>
- <li>{{domxref("ChildNode.before()")}}</li>
- <li>{{domxref("Element.insertAdjacentElement()")}}</li>
- <li>{{domxref("NodeList")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/api/parentnode/queryselectorall/index.html b/files/ja/orphaned/web/api/parentnode/queryselectorall/index.html
deleted file mode 100644
index 01e307ed31..0000000000
--- a/files/ja/orphaned/web/api/parentnode/queryselectorall/index.html
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: ParentNode.querySelectorAll()
-slug: orphaned/Web/API/ParentNode/querySelectorAll
-tags:
-  - API
-  - DOM
-  - Document
-  - Finding Elements
-  - Finding Nodes
-  - Method
-  - ParentNode
-  - Reference
-  - Searching Elements
-  - Searching Nodes
-  - Selectors
-  - querySelectorAll
-translation_of: Web/API/ParentNode/querySelectorAll
-original_slug: Web/API/ParentNode/querySelectorAll
----
-<div>{{ApiRef("DOM")}}</div>
-
-<p>{{domxref("ParentNode")}} ミックスインは <code><strong>querySelectorAll()</strong></code> メソッドを定義しており、メソッド呼び出しの時点でそのオブジェクトの子孫にあたる要素のうち、一連のセレクターに一致するもののリストを示す {{domxref("NodeList")}} を返します。</p>
-
-<p>単一の結果のみが必要な場合は、代わりに {{domxref("ParentNode.querySelector", "querySelector()")}} メソッドを使用することを検討してください。</p>
-
-<div class="note">
-<p><strong>メモ:</strong> このメソッドは {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} として実装されています。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
-</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code>selectors</code></dt>
- <dd>マッチのための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>でなければならず、そうでない場合は <code>SyntaxError</code> 例外がスローされます。セレクターの仕様と要素の識別の詳細は、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。複数のセレクターを指定する際は、カンマで区切ります。</dd>
-</dl>
-
-<div class="note">
-<p><strong>メモ:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は {{anch("Escaping special characters")}} を参照してください。</p>
-</div>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p>生きていない {{domxref("NodeList")}} で、指定されたセレクターの1つ以上に一致する子孫ノード1つに対して1つずつの {{domxref("Element")}} を含みます。</p>
-
-<div class="note">
-<p><strong>メモ:</strong> 指定された <code>selectors</code> が <a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>を含む場合、返されるリストは常に空になります。</p>
-</div>
-
-<h3 id="Exceptions" name="Exceptions">例外</h3>
-
-<dl>
- <dt><code>SyntaxError</code></dt>
- <dd>指定された <code>selectors</code> の構文が妥当ではない。</dd>
-</dl>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p>文書内のすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を入手します。</p>
-
-<pre class="brush: js">var matches = document.querySelectorAll("p");</pre>
-
-<p>次の例では、文書内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p>
-
-<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
-</pre>
-
-<p>次に、 <code>test</code> という ID を持つコンテナ内に位置し、直接の親要素が <code>highlighted</code> クラスを持つ {{HTMLElement("div")}} である、<code>&lt;p&gt;</code> 要素のリストを取得します。</p>
-
-<pre class="brush: js">var container = document.querySelector("#test");
-var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>
-
-<p>次の例では<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を使用しており、 <code>data-src</code> という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。</p>
-
-<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre>
-
-<p>次の例では、ID が <code>userlist</code> の要素の中にあり、<code>data-active</code> 属性を持ち、その値が <code>1</code> であるリスト項目のリストを返すため、属性セレクターが使用されています。</p>
-
-<pre class="brush: js">var container = document.querySelector("#userlist");
-var matches = container.querySelectorAll("li[data-active=1]");</pre>
-
-<h2 id="User_notes" name="User_notes">ユーザーのメモ</h2>
-
-<p>querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p>
-
-<h3 id="HTML">HTML</h3>
-
-<p>次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。</p>
-
-<pre class="brush: html">&lt;div class="outer"&gt;
-  &lt;div class="select"&gt;
-    &lt;div class="inner"&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js">var select = document.querySelector('.select');
-var inner = select.querySelectorAll('.outer .inner');
-inner.length; // 1 です。0 ではありません!
-</pre>
-
-<p>この例では、<code>select</code> class を持つ <code>&lt;div&gt;</code> の文脈で <code>.outer .inner</code> を選択するとき、<code>.outer</code> が基準となる要素（<code>.select</code> で検索される）の子孫ではないにもかかわらず、<code>.inner</code> class を持つ要素が見つけられています。<code>querySelectorAll()</code> はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。</p>
-
-<p>{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。</p>
-
-<pre class="brush: js">var select = document.querySelector('.select');
-var inner = select.querySelectorAll(':scope .outer .inner');
-inner.length; // 0</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td>Living standard</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("Selectors API Level 2")}}</td>
-   <td>変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td>初回定義</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
-   <td>{{Spec2("Selectors API Level 1")}}</td>
-   <td>元の定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.ParentNode.querySelectorAll")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li>
- <li><a href="/ja/docs/Code_snippets/QuerySelector"><code>querySelector()</code> のコードスニペット</a></li>
- <li>CSS ガイドの<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li>
- <li>MDN 学習エリアの<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">属性セレクター</a></li>
- <li>メソッドは {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} で利用可能です</li>
-</ul>
diff --git a/files/ja/web/api/element/append/index.html b/files/ja/web/api/element/append/index.html
new file mode 100644
index 0000000000..82feaa6f91
--- /dev/null
+++ b/files/ja/web/api/element/append/index.html
@@ -0,0 +1,100 @@
+---
+title: Element.append()
+slug: Web/API/Element/append
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - Element
+  - Reference
+browser-compat: api.Element.append
+translation_of: Web/API/Element/append
+original_slug: Web/API/ParentNode/append
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>Element.append()</code></strong> メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを <code>Element</code> のの最後の子の後に挿入します。 {{domxref("DOMString")}} オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。</p>
+
+<p>{{domxref("Node.appendChild()")}} との違いは次の通りです。</p>
+
+<ul>
+  <li><code>Element.append()</code> は {{domxref("DOMString")}} も追加することができますが、<code>Node.appendChild()</code> は{{domxref("Node")}} オブジェクトのみを受け付けます。</li>
+  <li><code>Element.append()</code> には返値がありませんが、<code>Node.appendChild()</code> は追加された{{domxref("Node")}} オブジェクトを返します。</li>
+  <li><code>Element.append()</code> は複数のノードや文字列を追加することができますが、<code>Node.appendChild()</code> はノードを 1 つだけしか追加することができせん。</li>
+</ul>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">
+append(...nodesOrDOMStrings)
+</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<dl>
+  <dt><code>nodesOrDOMStrings</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="Appending_an_element">要素の追加</h3>
+
+<pre class="brush: js">let div = document.createElement("div")
+let p = document.createElement("p")
+div.append(p)
+
+console.log(div.childNodes) // NodeList [ &lt;p&gt; ]
+</pre>
+
+<h3 id="Appending_text">テキストの追加</h3>
+
+<pre class="brush: js">let div = document.createElement("div")
+div.append("Some text")
+
+console.log(div.textContent) // "Some text"</pre>
+
+<h3 id="Appending_an_element_and_text">要素とテキストの追加</h3>
+
+<pre class="brush: js">let div = document.createElement("div")
+let p = document.createElement("p")
+div.append("Some text", p)
+
+console.log(div.childNodes) // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
+
+<h3 id="The_append_method_is_unscopable">append メソッドはスコープが効かない</h3>
+
+<p><code>append()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
+
+<pre class="brush: js">let div = document.createElement("div")
+
+with(div) {
+  append("foo")
+}
+// ReferenceError: append is not defined </pre>
+
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Element.prepend()")}}</li>
+  <li>{{domxref("Node.appendChild()")}}</li>
+  <li>{{domxref("Element.after()")}}</li>
+  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+  <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/childelementcount/index.html b/files/ja/web/api/element/childelementcount/index.html
index a06357d366..57d59747ce 100644
--- a/files/ja/web/api/element/childelementcount/index.html
+++ b/files/ja/web/api/element/childelementcount/index.html
@@ -1,96 +1,42 @@
 ---
-title: ParentNode.childElementCount
+title: Element.childElementCount
 slug: Web/API/Element/childElementCount
 tags:
   - API
   - DOM
-  - ParentNode
   - Property
-translation_of: Web/API/ParentNode/childElementCount
+  - Reference
+browser-compat: api.Element.childElementCount
+translation_of: Web/API/Element/childElementCount
 original_slug: Web/API/ParentNode/childElementCount
 ---
 <div>{{ APIRef("DOM") }}</div>
 
-<p>読み取り専用の <code><strong>ParentNode.childElementCount</strong></code> プロパティは、与えられた要素の子要素の数を表す <code>unsigned long</code> 値を返します。</p>
+<p><code><strong>Element.childElementCount</strong></code> は読み取り専用のプロパティで、この要素の子要素の数を返します。</p>
 
-<div class="note">
-<p>このプロパティは、当初 {{domxref("ElementTraversal")}} 基本インターフェースで定義されていました。このインターフェースには 2 セットの異なるプロパティが含まれており、一つは子要素を持つ {{domxref("Node")}} を対象とし、もう一つはその子要素群を対象としたものでしたが、これらは 2 つの基本インターフェースである {{domxref("ParentNode")}} と {{domxref("ChildNode")}} に移されました。この際、<code>childElementCount</code> は {{domxref("ParentNode")}} へ移されました。これは技術的な変更であり、互換性に影響を与えるものではありません。</p>
-</div>
+<h2 id="Syntax">構文</h2>
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="brush: js">element.childElementCount;</pre>
 
-<pre class="syntaxbox notranslate">var <var>count</var> = <em>node</em>.childElementCount;
-</pre>
-
-<dl>
- <dt><code>count</code></dt>
- <dd><code>unsigned long</code> 型(つまり整数型)の戻り値.</dd>
- <dt><code>node</code></dt>
- <dd>{{domxref("Document")}}、{{domxref("DocumentFragment")}}、 {{domxref("Element")}}を表現するオブジェクト.</dd>
-</dl>
-
-<h2 id="例">例</h2>
+<h2 id="Example">例</h2>
 
-<pre class="brush:js notranslate">var foo = document.getElementById('foo');
-if (foo.childElementCount &gt; 0) {
+<pre class="brush:js">let sidebar = document.getElementById('sidebar');
+if (sidebar.childElementCount &gt; 0) {
   // Do something
 }
 </pre>
 
+<h2 id="Specification">仕様書</h2>
 
+{{Specifications}}
 
-<h2 id="IE8_IE9Safari向けの互換コード">IE8, IE9/Safari向けの互換コード</h2>
-
-<p>このプロパティは IE9 より前のバージョンでサポートされていません。IE9とSafariでは <code>Document</code> と <code>DocumentFragment</code> においてサポートされていません。</p>
-
-<pre class="brush:js notranslate">;(function(constructor) {
-  if (constructor &amp;&amp;
-      constructor.prototype &amp;&amp;
-      constructor.prototype.childElementCount == null) {
-    Object.defineProperty(constructor.prototype, 'childElementCount', {
-      get: function() {
-        var i = 0, count = 0, node, nodes = this.childNodes;
-        while (node = nodes[i++]) {
-          if (node.nodeType === 1) count++;
-        }
-        return count;
-      }
-    });
-  }
-})(window.Node || window.Element);</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-parentnode-childElementCount', 'ParentNode.childElementCount')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td><code>ElementTraversal</code> インターフェースを {{domxref("ChildNode")}} と <code>ParentNode</code> に分割。このメソッドは後者で定義されています。<br>
-    {{domxref("Document")}} と {{domxref("DocumentFragment")}} が新しいインターフェースを実装しました。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}</td>
-   <td>{{Spec2('Element Traversal')}}</td>
-   <td>この初期定義は <code>ElementTraversal</code> 基本インターフェースに追加され、{{domxref("Element")}} で使用します。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの実装状況</h2>
-
-
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("api.ParentNode.childElementCount")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li>基本インターフェースの {{domxref("ParentNode")}} と {{domxref("ChildNode")}}</li>
- <li>この基本インターフェースを実装するオブジェクト型: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}</li>
+  <li>{{domxref("Document.childElementCount")}}</li>
+  <li>{{domxref("DocumentFragment.childElementCount")}}</li>
 </ul>
diff --git a/files/ja/web/api/element/children/index.html b/files/ja/web/api/element/children/index.html
new file mode 100644
index 0000000000..5dd887af4f
--- /dev/null
+++ b/files/ja/web/api/element/children/index.html
@@ -0,0 +1,58 @@
+---
+title: Element.children
+slug: Web/API/Element/children
+tags:
+  - API
+  - DOM
+  - Element
+  - HTMLCollection
+  - Property
+  - children
+browser-compat: api.Element.children
+translation_of: Web/API/Element/children
+original_slug: Web/API/ParentNode/children
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p><strong><code>children</code></strong> は読み取り専用のプロパティで、生きた {{domxref("HTMLCollection")}} で呼び出された要素の子{{domxref("Element", "要素", "", 1)}}をすべて返します。</p>
+
+<p><code>Element.children</code> は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 {{domxref("Node.childNodes")}} を使用してください。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">
+// Getter
+collection = myElement.children;
+
+// No setter; read-only property
+</pre>
+
+<h3 id="Return_value">返値</h3>
+
+<p>生きた {{ domxref("HTMLCollection") }} で、 <code><var>node</var></code> の子の DOM 要素の順序付きコレクションを返します。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。</p>
+
+<p>ノードが子要素を持たない場合、 <code>children</code> は要素を含まず、<code>length</code> は <code>0</code> です。</p>
+
+<h2 id="Example">例 </h2>
+
+<pre class="brush: js">const myElement = document.getElementById('foo');
+for (let i = 0; i &lt; myElement.children.length; i++) {
+  console.log(myElement.children[i].tagName);
+}
+</pre>
+
+<h2 id="Specification">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>
+    {{domxref("Node.childNodes")}}
+  </li>
+</ul>
diff --git a/files/ja/web/api/element/prepend/index.html b/files/ja/web/api/element/prepend/index.html
new file mode 100644
index 0000000000..9a0a993e08
--- /dev/null
+++ b/files/ja/web/api/element/prepend/index.html
@@ -0,0 +1,98 @@
+---
+title: Element.prepend()
+slug: Web/API/Element/prepend
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - Element
+  - Reference
+  - prepend
+translation_of: Web/API/Element/prepend
+original_slug: Web/API/ParentNode/prepend
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>Element.prepend()</code></strong> メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの {{domxref("Element")}} の最初の子の前に挿入します。 {{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">prepend(...nodesOrDOMStrings);
+</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<dl>
+  <dt><code>nodesOrDOMStrings</code></dt>
+  <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
+</dl>
+
+<h3 id="Return_value">返値</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Exceptions">例外</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の箇所に追加することができません。</li>
+</ul>
+
+<h2 id="Examples">例</h2>
+
+<h3 id="Prepending_an_element">要素の前に追加</h3>
+
+<pre class="brush: js">let div = document.createElement("div");
+let p = document.createElement("p");
+let span = document.createElement("span");
+div.append(p);
+div.prepend(span);
+
+console.log(div.childNodes); // NodeList [ &lt;span&gt;, &lt;p&gt; ]
+</pre>
+
+<h3 id="Prepending_text">テキストの前に追加</h3>
+
+<pre class="brush: js">let div = document.createElement("div");
+div.append("Some text");
+div.prepend("Headline: ");
+
+console.log(div.textContent); // "Headline: Some text"</pre>
+
+<h3 id="Appending_an_element_and_text">要素とテキストの追加</h3>
+
+<pre class="brush: js">let div = document.createElement("div");
+let p = document.createElement("p");
+div.prepend("Some text", p);
+
+console.log(div.childNodes); // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
+
+<h3 id="The_prepend_method_is_unscopable">prepend() メソッドはスコープが効かない</h3>
+
+<p><code>prepend()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
+
+<pre class="brush: js">let div = document.createElement("div");
+
+with(div) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined </pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Element.append()")}}</li>
+  <li>{{domxref("Node.appendChild()")}}</li>
+  <li>{{domxref("Node.insertBefore()")}}</li>
+  <li>{{domxref("Element.before()")}}</li>
+  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+  <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/queryselectorall/index.html b/files/ja/web/api/element/queryselectorall/index.html
index ec2323fa35..08dc56b7c0 100644
--- a/files/ja/web/api/element/queryselectorall/index.html
+++ b/files/ja/web/api/element/queryselectorall/index.html
@@ -1,5 +1,5 @@
 ---
-title: element.querySelectorAll
+title: Element.querySelectorAll()
 slug: Web/API/Element/querySelectorAll
 tags:
   - API
@@ -13,59 +13,57 @@ tags:
   - Selecting Elements
   - Selectors
   - querySelector
+browser-compat: api.Element.querySelectorAll
 translation_of: Web/API/Element/querySelectorAll
+original_slug: Web/API/ParentNode/querySelectorAll
 ---
 <div>{{APIRef("DOM")}}</div>
 
-<p>{{domxref("Element")}} の <code><strong>querySelectorAll()</strong></code> メソッドは対象要素の子孫の内、与えられた CSS セレクターに一致する要素リストを示す静的な（生きていない） {{domxref("NodeList")}} を返します（起点となる要素は、たとえマッチしていても含まれません）。</p>
+<p>{{domxref("Element")}} の <code><strong>querySelectorAll()</strong></code> メソッドは、静的な (生きていない) {{domxref("NodeList")}} で、メソッド呼び出しの時点でそのオブジェクトの子孫にあたる要素のうち、一連のセレクターに一致するもののリストを返します。</p>
 
-<div class="note">
-<p><strong>注:</strong> このメソッドは {{domxref("ParentNode")}} ミックスインの {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} メソッドを元に実装されています。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
+<h2 id="Syntax">構文</h2>
 
-<pre class="syntaxbox notranslate"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
+<pre class="brush: js"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
 </pre>
 
-<h3 id="Parameters" name="Parameters">引数</h3>
+<h3 id="Parameters">引数</h3>
 
 <dl>
  <dt><code>selectors</code></dt>
- <dd>マッチのための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}} です。この文字列は妥当な <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>文字列でなければならず、そうでない場合は <code>SyntaxError</code> 例外がスローされます。セレクターの仕様と要素の識別の詳細は、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の特定</a>を参照してください。複数のセレクターを指定する際は、カンマで区切ります。</dd>
+ <dd>一致させるための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>でなければならず、そうでない場合は <code>SyntaxError</code> 例外が発生します。セレクターの仕様と要素の識別の詳細は、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。複数のセレクターを指定する際は、カンマで区切ります。</dd>
 </dl>
 
 <div class="note">
-<p><strong>注:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{domxref("Document.querySelector#Escaping_special_character", "特殊文字のエスケープ", "", 1)}}を参照してください。</p>
+<p><strong>メモ:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は {{anch("Escaping special characters")}} を参照してください。</p>
 </div>
 
-<h3 id="Return_value" name="Return_value">戻り値</h3>
+<h3 id="Return_value">返値</h3>
 
-<p>指定されたセレクターのうち1つ以上にマッチする {{domxref("Element")}} オブジェクトを含んだ非ライブな {{domxref("NodeList")}} です。</p>
+<p>生きていない {{domxref("NodeList")}} で、指定されたセレクターの 1 つ以上に一致する子孫ノード 1 つに対して 1 つずつの {{domxref("Element")}} を含みます。</p>
 
 <div class="note">
-<p><strong>メモ:</strong> 指定した <code>selectors</code> に<a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 疑似要素</a>が含まれている場合、返されるリストは常に空になります。</p>
+<p><strong>メモ:</strong> 指定された <code>selectors</code> が <a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>を含む場合、返されるリストは常に空になります。</p>
 </div>
 
-<h3 id="Exceptions" name="Exceptions">例外</h3>
+<h3 id="Exceptions">例外</h3>
 
 <dl>
  <dt><code>SyntaxError</code></dt>
- <dd>指定した <code>selectors</code> の構文が妥当ではない。</dd>
+ <dd>指定された <code>selectors</code> の構文が妥当ではない。</dd>
 </dl>
 
-<h2 id="Example" name="Example">例</h2>
+<h2 id="Examples">例</h2>
 
-<h3 id="dataset_selector_attribute_selectors" name="dataset_selector_attribute_selectors">dataset セレクターと属性セレクター</h3>
+<h3 id="dataset_selector_attribute_selectors">データセットセレクターと属性セレクター</h3>
 
-<pre class="brush: html notranslate">&lt;section class="box" id="sect1"&gt;
+<pre class="brush: html">&lt;section class="box" id="sect1"&gt;
   &lt;div class="funnel-chart-percent1"&gt;10.900%&lt;/div&gt;
   &lt;div class="funnel-chart-percent2"&gt;3700.00%&lt;/div&gt;
   &lt;div class="funnel-chart-percent3"&gt;0.00%&lt;/div&gt;
 &lt;/section&gt;
 </pre>
 
-<pre class="brush: js notranslate">// dataset セレクター
+<pre class="brush: js">// データセットセレクター
 const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]`)];
 
 // 属性セレクター
@@ -75,129 +73,95 @@ const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]`
 // const refs = [...document.querySelectorAll(`[class~="funnel-chart-percent"]`)];
 </pre>
 
-<h3 id="Obtaining_a_list_of_matches" name="Obtaining_a_list_of_matches">一致のリストを入手する</h3>
+<h3 id="Obtaining_a_list_of_matches">一致するもののリストの入手</h3>
 
-<p>次の例では、<code>myBox</code> 要素の中に存在するすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を取得しています。</p>
 
-<pre class="brush: js notranslate">var matches = myBox.querySelectorAll("p");
-</pre>
+<p>{{domxref("NodeList")}} で <code>"myBox"</code> 要素の中にあるすべての {{HTMLElement("p")}} 要素を取得するには、次のようにします。</p>
+
+<pre class="brush: js">var matches = myBox.querySelectorAll("p");</pre>
 
-<p>次の例では、<code>mybox</code> 内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p>
+<p>次の例では、文書内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p>
 
-<pre class="brush: js notranslate">var matches = myBox.querySelectorAll("div.note, div.alert");
+<pre class="brush: js">var matches = myBox.querySelectorAll("div.note, div.alert");
 </pre>
 
-<p>次の例では、<code>test</code> という ID を持つコンテナー内に位置し、直接の親要素が <code>highlighted</code> のクラスを持つ {{domxref("div")}} である <code>p</code> 要素のリストを取得します。</p>
+<p>次に、 <code>"test"</code> という ID を持つコンテナー内に位置し、直接の親要素が <code>"highlighted"</code> クラスを持つ {{HTMLElement("div")}} である、<code>&lt;p&gt;</code> 要素のリストを取得します。</p>
 
-<pre class="brush: js notranslate">var container = document.querySelector("#test");
+<pre class="brush: js">var container = document.querySelector("#test");
 var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>
 
-<p>次の例では、<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を使って、文書内にある、 <code>data-src</code> 属性を持つ文書内の {{domxref("iframe")}} 要素のリストを返します。</p>
+<p>次の例では<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を使用しており、 <code>data-src</code> という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。</p>
 
-<pre class="brush: js notranslate">var matches = domument.querySelectorAll("iframe[data-src]");
-</pre>
+<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre>
 
-<p>次の例では、属性セレクターを使って、「ID が <code>userlist</code> である要素内の、<code>data-active</code> 属性を持ち、その値が <code>1</code> である要素群」のリストを返します。</p>
+<p>次の例では、ID が <code>userlist</code> の要素の中にあり、<code>data-active</code> 属性を持ち、その値が <code>1</code> であるリスト項目のリストを返すため、属性セレクターが使用されています。</p>
 
-<pre class="brush: js notranslate">var container = document.querySelector("#userlist");
+<pre class="brush: js">var container = document.querySelector("#userlist");
 var matches = container.querySelectorAll("li[data-active='1']");</pre>
 
-<h3 id="Accessing_the_matches" name="Accessing_the_matches">一致したリストへアクセスする</h3>
+<h3 id="Accessing_the_matches">一致したものへのアクセス</h3>
 
-<p>一旦、一致した要素の {{domxref("NodeList")}}} が返されると、それをちょうど配列のように試すことができます。配列が空である (<code>length</code> プロパティが 0 である) 場合は、一致がなかったということです。</p>
+<p>一致した要素の {{domxref("NodeList")}} が返されると、配列と同様に調べることができます。配列が空であれば (つまり、 <code>length</code> プロパティが 0 であれば)、一致するものが見つからなかったということです。</p>
 
-<p>それ以外の場合は、単純に標準の配列表記を使って、リストの内容にアクセスすることができます。次のように、任意の一般的なループ処理を使うことができます。</p>
+<p>それ以外の場合は、標準的な配列記法でリストの内容にアクセスすることができます。次のような一般的なループ文を使用することができます。</p>
 
-<pre class="brush: js notranslate">var highlightedItems = userList.querySelectorAll(".highlighted");
+<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted");
 
 highlightedItems.forEach(function(userItem) {
   deleteUser(userItem);
 });</pre>
 
 <div class="note">
-<p><strong>注: </strong>NodeList は純正な配列ではないので、slice, some, map などのArray メソッドを持っていません。Array.from(nodeList) を使うことで純正の配列に変換することができます。</p>
+  <p><strong>メモ:</strong> NodeList は、本物の配列ではありません。つまり、slice、some、map などの配列メソッドを持っていません。これを配列に変換するには、 Array.from(nodeList) のようにします。</p>
 </div>
 
-<h2 id="User_notes" name="User_notes">特殊な例</h2>
+<h2 id="User_notes">ユーザーのメモ</h2>
 
-<p><code>querySelectorAll()</code> は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p>
+<p>querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p>
 
-<h3 id="HTML" name="HTML">HTML</h3>
+<h3 id="HTML">HTML</h3>
 
 <p>次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。</p>
 
-<pre class="brush: html notranslate">&lt;div class="outer"&gt;
+<pre class="brush: html">&lt;div class="outer"&gt;
   &lt;div class="select"&gt;
     &lt;div class="inner"&gt;
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;</pre>
 
-<h3 id="JavaScript" name="JavaScript">JavaScript</h3>
+<h3 id="JavaScript">JavaScript</h3>
 
-<pre class="brush: js notranslate">var select = document.querySelector('.select');
+<pre class="brush: js">var select = document.querySelector('.select');
 var inner = select.querySelectorAll('.outer .inner');
-inner.length; // 1, not 0!
+inner.length; // 1 です。0 ではありません!
 </pre>
 
-<p>この例では、<code>"select"</code> class を持つ <code>&lt;div&gt;</code> の文脈で <code>".outer .inner"</code> を選択するとき、<code>.outer</code> が基準となる要素（<code>.select</code> で検索される）の子孫ではないにもかかわらず、<code>".inner"</code> class を持つ要素が見つけられています。<code>querySelectorAll()</code> はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。</p>
+<p>この例では、<code>select</code> class を持つ <code>&lt;div&gt;</code> の文脈で <code>.outer .inner</code> を選択するとき、<code>.outer</code> が基準となる要素（<code>.select</code> で検索される）の子孫ではないにもかかわらず、<code>.inner</code> class を持つ要素が見つけられています。<code>querySelectorAll()</code> はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。</p>
 
-<p>{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。</p>
+<p>{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。</p>
 
-<pre class="brush: js notranslate">var select = document.querySelector('.select');
+<pre class="brush: js">var select = document.querySelector('.select');
 var inner = select.querySelectorAll(':scope .outer .inner');
 inner.length; // 0
 </pre>
 
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">策定状況</th>
-   <th scope="col">コメント</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td>Living standard</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("Selectors API Level 2")}}</td>
-   <td>変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td>初期定義</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}</td>
-   <td>{{Spec2('Selectors API Level 1')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-<div>
-<p>{{Compat("api.Element.querySelectorAll")}}</p>
-</div>
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の特定</a></li>
- <li>CSS ガイドの<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li>
- <li>MDN 学習エリアの<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">属性セレクター</a></li>
- <li>{{domxref("Element.querySelector()")}}</li>
- <li>{{domxref("Document.querySelector()")}} および {{domxref("Document.querySelectorAll()")}}</li>
- <li>{{domxref("DocumentFragment.querySelector()")}} および {{domxref("DocumentFragment.querySelectorAll()")}}</li>
- <li>{{domxref("ParentNode.querySelector()")}} および {{domxref("ParentNode.querySelectorAll()")}}</li>
- <li><a href="/ja/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector"><code>querySelector()</code> のコードスニペット</a></li>
+  <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li>
+  <li>CSS ガイドの<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li>
+  <li>MDN 学習エリアの<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクター</a></li>
+  <li>{{domxref("Element.querySelector()")}}</li>
+  <li>{{domxref("Document.querySelector()")}} および {{domxref("Document.querySelectorAll()")}}</li>
+  <li>{{domxref("DocumentFragment.querySelector()")}} および {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+  <li><a href="/ja/docs/Code_snippets/QuerySelector"><code>querySelector()</code> のコードスニペット</a></li>
 </ul>