From f0bb8e1fefa8066d2147ced10e4a67642f7ea9b1 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 19 Sep 2021 22:09:17 +0900 Subject: Web/API/Document/querySelectorAll の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/document/queryselectorall/index.html | 178 --------------------- .../ja/web/api/document/queryselectorall/index.md | 178 +++++++++++++++++++++ 2 files changed, 178 insertions(+), 178 deletions(-) delete mode 100644 files/ja/web/api/document/queryselectorall/index.html create mode 100644 files/ja/web/api/document/queryselectorall/index.md (limited to 'files/ja/web/api/document') diff --git a/files/ja/web/api/document/queryselectorall/index.html b/files/ja/web/api/document/queryselectorall/index.html deleted file mode 100644 index 29d3513ec2..0000000000 --- a/files/ja/web/api/document/queryselectorall/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Document.querySelectorAll() -slug: Web/API/Document/querySelectorAll -tags: - - API - - CSS Selectors - - DOM - - Document - - Finding Elements - - Locating Elements - - Method - - Reference - - Searching Elements - - Selecting Elements - - Selectors - - querySelectorAll - - メソッド -translation_of: Web/API/Document/querySelectorAll ---- -
{{APIRef("DOM")}}
- -

{{domxref("Document")}} の querySelectorAll() メソッドは、与えられた CSS セレクターに一致する文書中の要素のリストを示す静的な (生きていない) {{domxref("NodeList")}} を返します。

- -
-

メモ: このメソッドは {{domxref("ParentNode")}} ミックスインの {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} メソッドを元に実装されています。

-
- -

構文

- -
elementList = parentNode.querySelectorAll(selectors);
-
- -

引数

- -
-
selectors
-
マッチのための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は SyntaxError 例外がスローされます。セレクターの仕様と要素の識別の詳細は、セレクターを使用した DOM 要素の指定を参照してください。複数のセレクターを指定する際は、カンマで区切ります。
-
- -
-

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

-
- -

返値

- -

指定されたセレクターの少なくとも一つに一致する要素ごとに {{domxref("Element")}} を一つずつ含む、生きていない {{domxref("NodeList")}}、または一致するものがなければ空の {{domxref("NodeList")}} です。

- -
-

メモ: 指定された selectors が CSS 擬似要素を含む場合、返されるリストは常に空になります。

-
- -

例外

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

例

- -

一致のリストの入手

- -

文書内のすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を入手します。

- -
var matches = document.querySelectorAll("p");
- -

次の例では、文書内にある note または alert のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。

- -
var matches = document.querySelectorAll("div.note, div.alert");
-
- -

次に、 test という ID を持つコンテナ内に位置し、直接の親要素が highlighted クラスを持つ {{HTMLElement("div")}} である、<p> 要素のリストを取得します。

- -
var container = document.querySelector("#test");
-var matches = container.querySelectorAll("div.highlighted > p");
- -

次の例では属性セレクターを使用しており、 data-src という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。

- -
var matches = document.querySelectorAll("iframe[data-src]");
- -

次の例では、ID が "userlist" の要素の中にあり、"data-active" 属性を持ち、その値が "1" であるリスト項目のリストを返すため、属性セレクターが使用されています。

- -
var container = document.querySelector("#userlist");
-var matches = container.querySelectorAll("li[data-active='1']");
- -

一致したリストへのアクセス

- -

一旦、一致した要素の {{domxref("NodeList")}} が返されると、それをちょうど配列のように試すことができます。配列が空である (length プロパティが 0 である) 場合は、一致がなかったということです。

- -

それ以外の場合は、単純に標準の配列表記を使って、リストの内容にアクセスすることができます。次のように、任意の一般的なループ処理を使うことができます。

- -
var highlightedItems = userList.querySelectorAll(".highlighted");
-
-highlightedItems.forEach(function(userItem) {
-  deleteUser(userItem);
-});
- -

ユーザーのメモ

- -

querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。

- -

HTML

- -

次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。

- -
<div class="outer">
-  <div class="select">
-    <div class="inner">
-    </div>
-  </div>
-</div>
- -

JavaScript

- -
var select = document.querySelector('.select');
-var inner = select.querySelectorAll('.outer .inner');
-inner.length; // 1 です。0 ではありません!
-
- -

この例では、"select" class を持つ <div> の文脈で ".outer .inner" を選択するとき、.outer が基準となる要素（.select で検索される）の子孫ではないにもかかわらず、".inner" class を持つ要素が見つけられています。querySelectorAll() はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。

- -

{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。

- -
var select = document.querySelector('.select');
-var inner = select.querySelectorAll(':scope .outer .inner');
-inner.length; // 0
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Living standard
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}変更なし
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}初回定義
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}独自の定義
- -

ブラウザーの互換性

- -

{{Compat("api.Document.querySelectorAll")}}

- -

関連情報

- - diff --git a/files/ja/web/api/document/queryselectorall/index.md b/files/ja/web/api/document/queryselectorall/index.md new file mode 100644 index 0000000000..29d3513ec2 --- /dev/null +++ b/files/ja/web/api/document/queryselectorall/index.md @@ -0,0 +1,178 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - CSS Selectors + - DOM + - Document + - Finding Elements + - Locating Elements + - Method + - Reference + - Searching Elements + - Selecting Elements + - Selectors + - querySelectorAll + - メソッド +translation_of: Web/API/Document/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Document")}} の querySelectorAll() メソッドは、与えられた CSS セレクターに一致する文書中の要素のリストを示す静的な (生きていない) {{domxref("NodeList")}} を返します。

+ +
+

メモ: このメソッドは {{domxref("ParentNode")}} ミックスインの {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} メソッドを元に実装されています。

+
+ +

構文

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

引数

+ +
+
selectors
+
マッチのための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は SyntaxError 例外がスローされます。セレクターの仕様と要素の識別の詳細は、セレクターを使用した DOM 要素の指定を参照してください。複数のセレクターを指定する際は、カンマで区切ります。
+
+ +
+

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

+
+ +

返値

+ +

指定されたセレクターの少なくとも一つに一致する要素ごとに {{domxref("Element")}} を一つずつ含む、生きていない {{domxref("NodeList")}}、または一致するものがなければ空の {{domxref("NodeList")}} です。

+ +
+

メモ: 指定された selectors が CSS 擬似要素を含む場合、返されるリストは常に空になります。

+
+ +

例外

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

例

+ +

一致のリストの入手

+ +

文書内のすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を入手します。

+ +
var matches = document.querySelectorAll("p");
+ +

次の例では、文書内にある note または alert のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。

+ +
var matches = document.querySelectorAll("div.note, div.alert");
+
+ +

次に、 test という ID を持つコンテナ内に位置し、直接の親要素が highlighted クラスを持つ {{HTMLElement("div")}} である、<p> 要素のリストを取得します。

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

次の例では属性セレクターを使用しており、 data-src という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

次の例では、ID が "userlist" の要素の中にあり、"data-active" 属性を持ち、その値が "1" であるリスト項目のリストを返すため、属性セレクターが使用されています。

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");
+ +

一致したリストへのアクセス

+ +

一旦、一致した要素の {{domxref("NodeList")}} が返されると、それをちょうど配列のように試すことができます。配列が空である (length プロパティが 0 である) 場合は、一致がなかったということです。

+ +

それ以外の場合は、単純に標準の配列表記を使って、リストの内容にアクセスすることができます。次のように、任意の一般的なループ処理を使うことができます。

+ +
var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +

ユーザーのメモ

+ +

querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。

+ +

HTML

+ +

次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1 です。0 ではありません!
+
+ +

この例では、"select" class を持つ <div> の文脈で ".outer .inner" を選択するとき、.outer が基準となる要素（.select で検索される）の子孫ではないにもかかわらず、".inner" class を持つ要素が見つけられています。querySelectorAll() はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。

+ +

{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Living standard
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}変更なし
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}初回定義
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}独自の定義
+ +

ブラウザーの互換性

+ +

{{Compat("api.Document.querySelectorAll")}}

+ +

関連情報

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