Update Web/API/Document/querySelector (#2142)

2021/07/22 時点の英語版に同期

1 files changed, 37 insertions, 51 deletions

diff --git a/files/ja/web/api/document/queryselector/index.html b/files/ja/web/api/document/queryselector/index.html
index 96734201de..c0af97a434 100644
--- a/files/ja/web/api/document/queryselector/index.html
+++ b/files/ja/web/api/document/queryselector/index.html
@@ -7,60 +7,62 @@ tags:
   - DOM
   - DOM 要素
   - Document
-  - Reference
-  - querySelector
-  - セレクター
   - メソッド
+  - リファレンス
+  - Selector API
+  - セレクター
+  - querySelector
 translation_of: Web/API/Document/querySelector
+browser-compat: api.Document.querySelector
 ---
 <div>{{ApiRef("DOM")}}</div>
 
 <p>{{domxref("Document")}} の <code><strong>querySelector()</strong></code> メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の {{domxref("Element")}} を返します。一致するものが見つからない場合は <code>null</code> を返します。</p>
 
 <div class="note">
-<p><strong>メモ</strong>: 比較処理は、文書マークアップにおける最初の要素を経由して文書ノードの<ruby>深さ優先前順走査<rp> (</rp><rt>depth-first pre-order traversal</rt><rp>) </rp></ruby>を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。</p>
+<p><strong>メモ</strong>: 比較処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。</p>
 </div>
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+<h2 id="Syntax">構文</h2>
 
-<pre class="syntaxbox notranslate"><var>element</var> = document.querySelector(<var>selectors</var>);
+<pre class="syntaxbox"><var>element</var> = document.querySelector(<var>selectors</var>);
 </pre>
 
-<h3 id="Parameters" name="Parameters">引数</h3>
+<h3 id="Parameters">引数</h3>
 
 <dl>
- <dt><var>selectors</var></dt>
- <dd>1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は <code>SYNTAX_ERR</code> が投げられます。セレクターとその管理の方法の詳細について、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。</dd>
+  <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>
 
 <div class="note">
-<p><strong>メモ:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。JavaScript でもバックスラッシュのエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{anch("Escaping special characters", "特殊文字のエスケープ")}}を参照してください。</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>文書内で指定された <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>に最初に一致する要素を示す {{domxref("HTMLElement")}} オブジェクト、もしくは、一致する要素がない場合は <code>null</code> を返します。</p>
+<p>文書内で指定された <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>に最初に一致する要素を示す {{domxref("Element")}} オブジェクト、もしくは、一致する要素がない場合は <code>null</code> を返します。</p>
 
 <p>指定されたセレクターに一致するすべての要素のリストが必要な場合は、代わりに {{domxref("Document.querySelectorAll", "querySelectorAll()")}} を使用してください。</p>
 
-<h3 id="Exceptions" name="Exceptions">例外</h3>
+<h3 id="Exceptions">例外</h3>
 
 <dl>
- <dt><code>SYNTAX_ERR</code></dt>
- <dd>指定された <var>selectors</var> の構文が妥当ではない。</dd>
+  <dt><code>SyntaxError</code></dt>
+  <dd>指定された <var>selectors</var> の構文が妥当ではない。</dd>
 </dl>
 
-<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2>
+<h2 id="Usage_notes">使用上のメモ</h2>
 
 <p>指定されたセレクターが、誤って文書内で複数回使われている ID に一致する場合は、その ID を持つ最初の要素が返されます。</p>
 
-<p><a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>は <a href="http://www.w3.org/TR/selectors-api/#grammar">Selectors API</a> で策定されている通り、何も要素を返しません。</p>
+<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>
 
-<h3 id="Escaping_special_characters" name="Escaping_special_characters">特殊文字のエスケープ</h3>
+<h3 id="Escaping_special_characters">特殊文字のエスケープ</h3>
 
 <p>標準の CSS の構文に従っていない ID やセレクター (例えば、コロンやスペースを不適切に使用しているもの) で一致させるためには、バックスラッシュ ("<code>\</code>") でその文字をエスケープしなければなりません。バックスラッシュは JavaScript のエスケープ文字でもあるので、文字列リテラルを入力する場合、それを <em>2 回</em>エスケープする必要があります (1 回目は JavaScript の文字列のため、2 回目は <code>querySelector()</code> のため)。</p>
 
-<pre class="brush: html notranslate">&lt;div id="foo\bar"&gt;&lt;/div&gt;
+<pre class="brush: html">&lt;div id="foo\bar"&gt;&lt;/div&gt;
 &lt;div id="foo:bar"&gt;&lt;/div&gt;
 
 &lt;script&gt;
@@ -75,59 +77,43 @@ translation_of: Web/API/Document/querySelector
   document.querySelector('#foo\\:bar');  // 2番目の div に一致する
 &lt;/script&gt;</pre>
 
-<h2 id="Example" name="Example">例</h2>
+<h2 id="Example">例</h2>
 
-<h3 id="Finding_the_first_element_matching_a_class" name="Finding_the_first_element_matching_a_class">あるクラスに一致する最初の要素を探索する</h3>
+<h3 id="Finding_the_first_element_matching_a_class">あるクラスに一致する最初の要素を探索する</h3>
 
 <p>次の例は、クラス "<code>myclass</code>" を持つ文書内の要素の内、最初のものを返します。</p>
 
-<pre class="brush: js notranslate">var el = document.querySelector(".myclass");
+<pre class="brush: js">var el = document.querySelector(".myclass");
 </pre>
 
-<h3 id="A_more_complex_selector" name="A_more_complex_selector">より複雑なセレクター</h3>
+<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>
 
-<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel.main input[name='login']");
+<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name='login']");
 </pre>
 
-<h3 id="Negation" name="Negation">否定</h3>
+<h3 id="Negation">否定</h3>
 
 <p>すべての CSS セレクター文字列が正しい場合、セレクターを否定することもできます。</p>
 
-<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel:not(.main) input[name='login']");</pre>
+<pre class="brush: js">var el = document.querySelector("div.user-panel:not(.main) input[name='login']");</pre>
 
 <p>これで、input 要素のうち親に <code>user-panel</code> クラスのついた div があるものの、<code>main</code> クラスがないものを 1 つ選択します。</p>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<h2 id="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-queryselector", "document.querySelector()")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<div>{{Compat("api.Document.querySelector")}}</div>
+<div>{{Compat}}</div>
 
-<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>{{domxref("Element.querySelector()")}}</li>
- <li>{{domxref("Document.querySelectorAll()")}}</li>
- <li>{{domxref("Element.querySelectorAll()")}}</li>
- <li><a href="/ja/docs/Code_snippets/QuerySelector">querySelector のコードスニペット</a></li>
+  <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>