From 7a6fb94a538e77097f05dee70730e8d74cf0992b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 30 Aug 2021 23:57:02 +0900 Subject: Update Web/API/Document/querySelector (#2142) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2021/07/22 時点の英語版に同期 --- files/ja/web/api/document/queryselector/index.html | 88 +++++++++------------- 1 file changed, 37 insertions(+), 51 deletions(-) (limited to 'files/ja') 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 ---
{{ApiRef("DOM")}}

{{domxref("Document")}} の querySelector() メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の {{domxref("Element")}} を返します。一致するものが見つからない場合は null を返します。

-

メモ: 比較処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。

+

メモ: 比較処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。

-

構文

+

構文

-
element = document.querySelector(selectors);
+
element = document.querySelector(selectors);
 

 
-
引数

+
引数

 
 

- 
selectors

- 
1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は SYNTAX_ERR が投げられます。セレクターとその管理の方法の詳細について、セレクターを使用した DOM 要素の指定を参照してください。

+  
selectors

+  
1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は SyntaxError が発生します。セレクターとその管理の方法の詳細について、セレクターを使用した DOM 要素の指定を参照してください。

 

 
 

-
メモ: 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。JavaScript でもバックスラッシュのエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{anch("Escaping special characters", "特殊文字のエスケープ")}}を参照してください。

+
メモ: 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。JavaScript でもバックスラッシュのエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{anch("Escaping special characters", "特殊文字のエスケープ")}}を参照してください。

 

 
-
返値

+
返値

 
-
文書内で指定された CSS セレクターに最初に一致する要素を示す {{domxref("HTMLElement")}} オブジェクト、もしくは、一致する要素がない場合は null を返します。

+
文書内で指定された CSS セレクターに最初に一致する要素を示す {{domxref("Element")}} オブジェクト、もしくは、一致する要素がない場合は null を返します。

 
 
指定されたセレクターに一致するすべての要素のリストが必要な場合は、代わりに {{domxref("Document.querySelectorAll", "querySelectorAll()")}} を使用してください。

 
-
例外

+
例外

 
 

- 
SYNTAX_ERR

- 
指定された selectors の構文が妥当ではない。

+  
SyntaxError

+  
指定された selectors の構文が妥当ではない。

 

 
-
使用上のメモ

+
使用上のメモ

 
 
指定されたセレクターが、誤って文書内で複数回使われている ID に一致する場合は、その ID を持つ最初の要素が返されます。

 
-
CSS 擬似要素は Selectors API で策定されている通り、何も要素を返しません。

+
CSS 擬似要素は Selectors API で策定されている通り、何も要素を返しません。

 
-
特殊文字のエスケープ

+
特殊文字のエスケープ

 
 
標準の CSS の構文に従っていない ID やセレクター (例えば、コロンやスペースを不適切に使用しているもの) で一致させるためには、バックスラッシュ ("\") でその文字をエスケープしなければなりません。バックスラッシュは JavaScript のエスケープ文字でもあるので、文字列リテラルを入力する場合、それを 2 回エスケープする必要があります (1 回目は JavaScript の文字列のため、2 回目は querySelector() のため)。

 
-
<div id="foo\bar"></div>
+
<div id="foo\bar"></div>
 <div id="foo:bar"></div>
 
 <script>
@@ -75,59 +77,43 @@ translation_of: Web/API/Document/querySelector
   document.querySelector('#foo\\:bar');  // 2番目の div に一致する
 </script>

 
-
例

+
例

 
-
あるクラスに一致する最初の要素を探索する

+
あるクラスに一致する最初の要素を探索する

 
 
次の例は、クラス "myclass" を持つ文書内の要素の内、最初のものを返します。

 
-
var el = document.querySelector(".myclass");
+
var el = document.querySelector(".myclass");
 

 
-
より複雑なセレクター

+
より複雑なセレクター

 
 
セレクターは、次の例で示しているように、実に力強いものになり得ます。ここでは、文書内でクラスが "user-panel main" である {{HTMLElement("div")}} (<div class="user-panel main">) の中にある、"login" という名前を持つ最初の {{HTMLElement("input")}} 要素 (<input name="login"/>) が返されます。

 
-
var el = document.querySelector("div.user-panel.main input[name='login']");
+
var el = document.querySelector("div.user-panel.main input[name='login']");
 

 
-
否定

+
否定

 
 
すべての CSS セレクター文字列が正しい場合、セレクターを否定することもできます。

 
-
var el = document.querySelector("div.user-panel:not(.main) input[name='login']");

+
var el = document.querySelector("div.user-panel:not(.main) input[name='login']");

 
 
これで、input 要素のうち親に user-panel クラスのついた div があるものの、main クラスがないものを 1 つ選択します。

 
-
仕様書

+
仕様書

 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselector", "document.querySelector()")}}{{Spec2("DOM WHATWG")}}

+{{Specifications}}
 
-
ブラウザーの互換性

+
ブラウザーの互換性

 
-
{{Compat("api.Document.querySelector")}}

+
{{Compat}}

 
-
関連情報

+
関連情報

 
 
-- 
cgit v1.2.3-54-g00ecf