Document.querySelector および .querySelectorAll を更新

- Markdown に変換
- 2021/09/15 時点の英語版に同期

2 files changed, 145 insertions, 178 deletions

diff --git a/files/ja/web/api/document/queryselector/index.md b/files/ja/web/api/document/queryselector/index.md
index c0af97a434..7847ab82b7 100644
--- a/files/ja/web/api/document/queryselector/index.md
+++ b/files/ja/web/api/document/queryselector/index.md
@@ -15,57 +15,51 @@ tags:
 translation_of: Web/API/Document/querySelector
 browser-compat: api.Document.querySelector
 ---
-<div>{{ApiRef("DOM")}}</div>
+{{ApiRef("DOM")}}
 
-<p>{{domxref("Document")}} の <code><strong>querySelector()</strong></code> メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の {{domxref("Element")}} を返します。一致するものが見つからない場合は <code>null</code> を返します。</p>
+{{domxref("Document")}} の **`querySelector()`** メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の {{domxref("Element")}} を返します。一致するものが見つからない場合は `null` を返します。
 
-<div class="note">
-<p><strong>メモ</strong>: 比較処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。</p>
-</div>
+> **Note:** 照合処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="syntaxbox"><var>element</var> = document.querySelector(<var>selectors</var>);
-</pre>
+```js
+element = document.querySelector(selectors);
+```
 
-<h3 id="Parameters">引数</h3>
+### 引数
 
-<dl>
-  <dt><var>selectors</var></dt>
-  <dd>1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は <code>SyntaxError</code> が発生します。セレクターとその管理の方法の詳細について、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。</dd>
-</dl>
+- _selectors_
+  - : {{domxref("DOMString")}} で、照合する 1 つ以上のセレクターを設定します。この文字列は妥当な CSS セレクターでなければなりません。そうでない場合は `SyntaxError` が発生します。セレクターとその管理の方法の詳細について、[セレクターを使用した DOM 要素の指定](/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)を参照してください。
 
-<div class="note">
-<p><strong>メモ:</strong> 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。JavaScript でもバックスラッシュのエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{anch("Escaping special characters", "特殊文字のエスケープ")}}を参照してください。</p>
-</div>
+> **Note:** 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は[特殊文字のエスケープ](/ja/docs/Web/API/Document/querySelector#特殊文字のエスケープ)を参照してください。
 
-<h3 id="Return_value">返値</h3>
+### 返値
 
-<p>文書内で指定された <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>に最初に一致する要素を示す {{domxref("Element")}} オブジェクト、もしくは、一致する要素がない場合は <code>null</code> を返します。</p>
+{{domxref("Element")}} オブジェクトで、文書内で指定された [CSS セレクター](/ja/docs/Web/CSS/CSS_Selectors)に最初に一致する要素を示すオブジェクト、もしくは、一致する要素がない場合は `null` を返します。
 
-<p>指定されたセレクターに一致するすべての要素のリストが必要な場合は、代わりに {{domxref("Document.querySelectorAll", "querySelectorAll()")}} を使用してください。</p>
+指定されたセレクターに一致するすべての要素のリストが必要な場合は、代わりに {{domxref("Document.querySelectorAll", "querySelectorAll()")}} を使用してください。
 
-<h3 id="Exceptions">例外</h3>
+### 例外
 
-<dl>
-  <dt><code>SyntaxError</code></dt>
-  <dd>指定された <var>selectors</var> の構文が妥当ではない。</dd>
-</dl>
+- `SyntaxError`
+  - : 指定された _selectors_ の構文が妥当ではない。
 
-<h2 id="Usage_notes">使用上のメモ</h2>
+## 使用上のメモ
 
-<p>指定されたセレクターが、誤って文書内で複数回使われている ID に一致する場合は、その ID を持つ最初の要素が返されます。</p>
+指定されたセレクターが、誤って文書内で複数回使われている ID に一致する場合は、その ID を持つ最初の要素が返されます。
 
-<p><a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>は <a href="https://www.w3.org/TR/selectors-api/#grammar">Selectors API</a> で策定されている通り、何も要素を返しません。</p>
+[CSS 擬似要素](/ja/docs/Web/CSS/Pseudo-elements)は [Selectors API](https://www.w3.org/TR/selectors-api/#grammar) で策定されている通り、何も要素を返しません。
 
-<h3 id="Escaping_special_characters">特殊文字のエスケープ</h3>
+### 特殊文字のエスケープ
 
-<p>標準の CSS の構文に従っていない ID やセレクター (例えば、コロンやスペースを不適切に使用しているもの) で一致させるためには、バックスラッシュ ("<code>\</code>") でその文字をエスケープしなければなりません。バックスラッシュは JavaScript のエスケープ文字でもあるので、文字列リテラルを入力する場合、それを <em>2 回</em>エスケープする必要があります (1 回目は JavaScript の文字列のため、2 回目は <code>querySelector()</code> のため)。</p>
+標準の CSS の構文に従っていない ID やセレクター (例えば、コロンや空白を不適切に使用しているもの) に一致させるためには、バックスラッシュ ("`\`") でその文字をエスケープしなければなりません。バックスラッシュは JavaScript のエスケープ文字でもあるので、文字列リテラルを入力する場合、それを *2 回*エスケープする必要があります (1 回目は JavaScript の文字列のため、2 回目は `querySelector()` のため)。
 
-<pre class="brush: html">&lt;div id="foo\bar"&gt;&lt;/div&gt;
-&lt;div id="foo:bar"&gt;&lt;/div&gt;
+```html
+<div id="foo\bar"></div>
+<div id="foo:bar"></div>
 
-&lt;script&gt;
+<script>
   console.log('#foo\bar');               // "#fooar" (\b はバックスペース制御文字)
   document.querySelector('#foo\bar');    // いずれにも一致しない
 
@@ -75,45 +69,48 @@ browser-compat: api.Document.querySelector
 
   document.querySelector('#foo:bar');    // いずれにも一致しない
   document.querySelector('#foo\\:bar');  // 2番目の div に一致する
-&lt;/script&gt;</pre>
+</script>
+```
 
-<h2 id="Example">例</h2>
+## 例
 
-<h3 id="Finding_the_first_element_matching_a_class">あるクラスに一致する最初の要素を探索する</h3>
+### あるクラスに一致する最初の要素を探索する
 
-<p>次の例は、クラス "<code>myclass</code>" を持つ文書内の要素の内、最初のものを返します。</p>
+次の例は、クラス "`myclass`" を持つ文書内の要素の内、最初のものを返します。
 
-<pre class="brush: js">var el = document.querySelector(".myclass");
-</pre>
+```js
+var el = document.querySelector(".myclass");
+```
 
-<h3 id="A_more_complex_selector">より複雑なセレクター</h3>
+### より複雑なセレクター
 
-<p>セレクターは、次の例で示しているように、実に力強いものになり得ます。ここでは、文書内でクラスが "user-panel main" である {{HTMLElement("div")}} (<code>&lt;div class="user-panel main"&gt;</code>) の中にある、"login" という名前を持つ最初の {{HTMLElement("input")}} 要素 (<code>&lt;input name="login"/&gt;</code>) が返されます。</p>
+セレクターは、次の例で示しているように、実に力強いものになり得ます。ここでは、文書内で {{HTMLElement("input")}} に "login" という名前の付いた最初のもの (`<input name="login"/>`) のうち、 {{HTMLElement("div")}} でクラスが "user-panel main" (`<div class="user-panel main">`) の中にあるものが返されます。
 
-<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name='login']");
-</pre>
+```js
+var el = document.querySelector("div.user-panel.main input[name='login']");
+```
 
-<h3 id="Negation">否定</h3>
+### 否定
 
-<p>すべての CSS セレクター文字列が正しい場合、セレクターを否定することもできます。</p>
+すべての CSS セレクター文字列が妥当な場合、セレクターを否定することもできます。
 
-<pre class="brush: js">var el = document.querySelector("div.user-panel:not(.main) input[name='login']");</pre>
+```js
+var el = document.querySelector("div.user-panel:not(.main) input[name='login']");
+```
 
-<p>これで、input 要素のうち親に <code>user-panel</code> クラスのついた div があるものの、<code>main</code> クラスがないものを 1 つ選択します。</p>
+これで、input 要素のうち親に `user-panel` クラスのついた div があるものの、`main` クラスがないものを 1 つ選択します。
 
-<h2 id="Specifications">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<div>{{Compat}}</div>
+{{Compat}}
 
-<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>{{domxref("Element.querySelector()")}}</li>
-  <li>{{domxref("Document.querySelectorAll()")}}</li>
-  <li>{{domxref("Element.querySelectorAll()")}}</li>
-</ul>
+- [セレクターを使用した DOM 要素の指定](/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
+- {{domxref("Element.querySelector()")}}
+- {{domxref("Document.querySelectorAll()")}}
+- {{domxref("Element.querySelectorAll()")}}
diff --git a/files/ja/web/api/document/queryselectorall/index.md b/files/ja/web/api/document/queryselectorall/index.md
index 29d3513ec2..56cab2c7da 100644
--- a/files/ja/web/api/document/queryselectorall/index.md
+++ b/files/ja/web/api/document/queryselectorall/index.md
@@ -3,176 +3,146 @@ title: Document.querySelectorAll()
 slug: Web/API/Document/querySelectorAll
 tags:
   - API
-  - CSS Selectors
+  - CSS セレクター
   - DOM
   - Document
   - Finding Elements
   - Locating Elements
-  - Method
-  - Reference
+  - メソッド
+  - リファレンス
   - Searching Elements
   - Selecting Elements
-  - Selectors
+  - セレクター
   - querySelectorAll
-  - メソッド
+browser-compat: api.Document.querySelectorAll
 translation_of: Web/API/Document/querySelectorAll
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>{{domxref("Document")}} の <code><strong>querySelectorAll()</strong></code> メソッドは、与えられた CSS セレクターに一致する文書中の要素のリストを示す静的な (生きていない) {{domxref("NodeList")}} を返します。</p>
+{{domxref("Document")}} の **`querySelectorAll()`** メソッドは、与えられた CSS セレクターに一致する文書中の要素のリストを示す静的な (ライブではない) {{domxref("NodeList")}} を返します。
 
-<div class="note">
-<p><strong>メモ:</strong> このメソッドは {{domxref("ParentNode")}} ミックスインの {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} メソッドを元に実装されています。</p>
-</div>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+```js
+elementList = parentNode.querySelectorAll(selectors);
+```
 
-<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
-</pre>
+### 引数
 
-<h3 id="Parameters" name="Parameters">引数</h3>
+- `selectors`
+  - : {{domxref("DOMString")}} で、照合対象となる 1 つまたは複数のセレクターを含みます。この文字列は妥当な [CSS セレクター](/ja/docs/Web/CSS/CSS_Selectors)でなければならず、そうでない場合は `SyntaxError` 例外が発生します。セレクターの仕様と要素の識別の詳細は、[セレクターを使用した DOM 要素の指定](/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)を参照してください。複数のセレクターは、カンマで区切って指定することができます。
 
-<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>
+> **Note:** 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は[特殊文字のエスケープ](/ja/docs/Web/API/Document/querySelector#特殊文字のエスケープ)を参照してください。
 
-<div class="note">
-<p><strong>メモ:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は {{anch("Escaping special characters")}} を参照してください。</p>
-</div>
+### 返値
 
-<h3 id="Return_value" name="Return_value">返値</h3>
+ライブではない {{domxref("NodeList")}} で、指定されたセレクターの少なくとも 1 つに一致する要素ごとに {{domxref("Element")}} を一つずつ含みます。または一致するものがなければ空の {{domxref("NodeList")}} です。
 
-<p>指定されたセレクターの少なくとも一つに一致する要素ごとに {{domxref("Element")}} を一つずつ含む、生きていない {{domxref("NodeList")}}、または一致するものがなければ空の {{domxref("NodeList")}} です。</p>
+> **Note:** 指定された `selectors` が [CSS 擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を含む場合、返されるリストは常に空になります。
 
-<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>
+- `SyntaxError`
+  - : 指定された `selectors` の構文が妥当ではない場合です。
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Obtaining_a_list_of_matches" name="Obtaining_a_list_of_matches">一致のリストの入手</h3>
+### 一致するもののリストの入手
 
-<p>文書内のすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を入手します。</p>
+文書内のすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を入手します。
 
-<pre class="brush: js">var matches = document.querySelectorAll("p");</pre>
+```js
+const matches = document.querySelectorAll("p");
+```
 
-<p>次の例では、文書内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p>
+次の例では、文書内にあるすべての {{HTMLElement("div")}} 要素のうち、 `note` または `alert` のいずれかのクラスを持つものリストを返します。
 
-<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
-</pre>
+```js
+const matches = document.querySelectorAll("div.note, div.alert");
+```
 
-<p>次に、 <code>test</code> という ID を持つコンテナ内に位置し、直接の親要素が <code>highlighted</code> クラスを持つ {{HTMLElement("div")}} である、<code>&lt;p&gt;</code> 要素のリストを取得します。</p>
+次に、 `<p>` 要素ののうち直近の親要素が `test` という ID を持つコンテナー内に位置し、直接の親要素が `highlighted` クラスを持つ {{HTMLElement("div")}} であるリストを取得します。
 
-<pre class="brush: js">var container = document.querySelector("#test");
-var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>
+```js
+const container = document.querySelector("#test");
+const matches = container.querySelectorAll("div.highlighted > p");
+```
 
-<p>次の例では<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を使用しており、 <code>data-src</code> という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。</p>
+次の例では[属性セレクター](/ja/docs/Web/CSS/Attribute_selectors)を使用しており、 `data-src` という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。
 
-<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre>
+```js
+const matches = document.querySelectorAll("iframe[data-src]");
+```
 
-<p>次の例では、ID が <code>"userlist"</code> の要素の中にあり、<code>"data-active"</code> 属性を持ち、その値が <code>"1"</code> であるリスト項目のリストを返すため、属性セレクターが使用されています。</p>
+次の例では、ID が `userlist` の要素の中にあり、`data-active` 属性を持ち、その値が `1` であるリスト項目のリストを返すため、属性セレクターが使用されています。
 
-<pre class="brush: js">var container = document.querySelector("#userlist");
-var matches = container.querySelectorAll("li[data-active='1']");</pre>
+```js
+const container = document.querySelector("#userlist");
+const matches = container.querySelectorAll("li[data-active='1']");
+```
 
-<h3 id="Accessing_the_matches" name="Accessing_the_matches">一致したリストへのアクセス</h3>
+### 一致したリストへのアクセス
 
-<p>一旦、一致した要素の {{domxref("NodeList")}} が返されると、それをちょうど配列のように試すことができます。配列が空である (<code>length</code> プロパティが 0 である) 場合は、一致がなかったということです。</p>
+いったん、一致した要素の {{domxref("NodeList")}} が返されると、それをちょうど配列のように見ることができます。配列が空である (`length` プロパティが 0 である) 場合は、一致がなかったということです。
 
-<p>それ以外の場合は、単純に標準の配列表記を使って、リストの内容にアクセスすることができます。次のように、任意の一般的なループ処理を使うことができます。</p>
+それ以外の場合は、単純に標準の配列表記を使って、リストの内容にアクセスすることができます。次のように、任意の一般的なループ処理を使うことができます。
 
-<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted");
+```js
+const highlightedItems = userList.querySelectorAll(".highlighted");
 
 highlightedItems.forEach(function(userItem) {
   deleteUser(userItem);
-});</pre>
+});
+```
 
-<h2 id="User_notes" name="User_notes">ユーザーのメモ</h2>
+## ユーザーのメモ
 
-<p>querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p>
+`querySelectorAll()` は、最も一般的な JavaScript DOM ライブラリーと異なる動作を持ち、意図しない結果をもたらすことがあります。
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<p>次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。</p>
+次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。
 
-<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>
+```html
+<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">var select = document.querySelector('.select');
-var inner = select.querySelectorAll('.outer .inner');
+```js
+const select = document.querySelector('.select');
+const 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>
+この例で、`.outer .inner` を`<div>` に `select` クラスがついたコンテキストで選択する場合、`.outer` が検索が行われる基底要素 (`.select`) の子孫ではないにもかかわらず、`.inner` クラスの要素が見つかります。既定では、`querySelectorAll()` はセレクターの最後の要素のみを、検索スコープ内にあるかどうか検証します。
 
-<p>{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。</p>
+{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。
 
-<pre class="brush: js">var select = document.querySelector('.select');
-var inner = select.querySelectorAll(':scope .outer .inner');
+```js
+const select = document.querySelector('.select');
+const 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.Document.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>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()")}} および {{domxref("Element.querySelectorAll()")}}</li>
- <li>{{domxref("Document.querySelector()")}}</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"><code>querySelector()</code> のコードスニペット</a></li>
-</ul>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [セレクターを使用した DOM 要素の指定](/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
+- CSS ガイドの[[属性セレクター]](/ja/docs/Web/CSS/Attribute_selectors)
+- MDN 学習領域の[[属性セレクター]](/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors)
+- {{domxref("Element.querySelector()")}} および {{domxref("Element.querySelectorAll()")}}
+- {{domxref("Document.querySelector()")}}
+- {{domxref("DocumentFragment.querySelector()")}} および {{domxref("DocumentFragment.querySelectorAll()")}}