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

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

1 files changed, 60 insertions, 96 deletions

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>