From 8fc07706f22da272fa078118f1f6a72c13d4e7f0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 19 Sep 2021 22:54:41 +0900 Subject: Web/API/Document/querySelector の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/document/queryselector/index.html | 119 --------------------- files/ja/web/api/document/queryselector/index.md | 119 +++++++++++++++++++++ 2 files changed, 119 insertions(+), 119 deletions(-) delete mode 100644 files/ja/web/api/document/queryselector/index.html create mode 100644 files/ja/web/api/document/queryselector/index.md (limited to 'files') diff --git a/files/ja/web/api/document/queryselector/index.html b/files/ja/web/api/document/queryselector/index.html deleted file mode 100644 index c0af97a434..0000000000 --- a/files/ja/web/api/document/queryselector/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Document.querySelector() -slug: Web/API/Document/querySelector -tags: - - API - - CSS セレクター - - DOM - - DOM 要素 - - Document - - メソッド - - リファレンス - - 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) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。

-
- -

構文

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

引数

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

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

-
- -

返値

- -

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

- -

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

- -

例外

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

使用上のメモ

- -

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

- -

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

- -

特殊文字のエスケープ

- -

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

- -
<div id="foo\bar"></div>
-<div id="foo:bar"></div>
-
-<script>
-  console.log('#foo\bar');               // "#fooar" (\b はバックスペース制御文字)
-  document.querySelector('#foo\bar');    // いずれにも一致しない
-
-  console.log('#foo\\bar');              // "#foo\bar"
-  console.log('#foo\\\\bar');            // "#foo\\bar"
-  document.querySelector('#foo\\\\bar'); // 最初の div に一致する
-
-  document.querySelector('#foo:bar');    // いずれにも一致しない
-  document.querySelector('#foo\\:bar');  // 2番目の div に一致する
-</script>
- -

例

- -

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

- -

次の例は、クラス "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']");
-
- -

否定

- -

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

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

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

- -

仕様書

- -{{Specifications}} - -

ブラウザーの互換性

- -
{{Compat}}
- -

関連情報

- - diff --git a/files/ja/web/api/document/queryselector/index.md b/files/ja/web/api/document/queryselector/index.md new file mode 100644 index 0000000000..c0af97a434 --- /dev/null +++ b/files/ja/web/api/document/queryselector/index.md @@ -0,0 +1,119 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - CSS セレクター + - DOM + - DOM 要素 + - Document + - メソッド + - リファレンス + - 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) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。

+
+ +

構文

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

引数

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

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

+
+ +

返値

+ +

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

+ +

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

+ +

例外

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

使用上のメモ

+ +

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

+ +

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

+ +

特殊文字のエスケープ

+ +

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

+ +
<div id="foo\bar"></div>
+<div id="foo:bar"></div>
+
+<script>
+  console.log('#foo\bar');               // "#fooar" (\b はバックスペース制御文字)
+  document.querySelector('#foo\bar');    // いずれにも一致しない
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\\\bar'); // 最初の div に一致する
+
+  document.querySelector('#foo:bar');    // いずれにも一致しない
+  document.querySelector('#foo\\:bar');  // 2番目の div に一致する
+</script>
+ +

例

+ +

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

+ +

次の例は、クラス "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']");
+
+ +

否定

+ +

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

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

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

+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +
{{Compat}}
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf