From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../ja/web/api/element/queryselectorall/index.html | 205 +++++++++++++++++++++ 1 file changed, 205 insertions(+) create mode 100644 files/ja/web/api/element/queryselectorall/index.html (limited to 'files/ja/web/api/element/queryselectorall') diff --git a/files/ja/web/api/element/queryselectorall/index.html b/files/ja/web/api/element/queryselectorall/index.html new file mode 100644 index 0000000000..2bc51c0803 --- /dev/null +++ b/files/ja/web/api/element/queryselectorall/index.html @@ -0,0 +1,205 @@ +--- +title: element.querySelectorAll +slug: Web/API/Element/querySelectorAll +tags: + - API + - CSS Selectors + - DOM + - Element + - Finding Elements + - Method + - Reference + - Searching Elements + - Selecting Elements + - Selectors + - querySelector +translation_of: Web/API/Element/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

{{domxref("Element")}} の querySelectorAll() メソッドは対象要素の子孫の内、与えられた CSS セレクターに一致する要素リストを示す静的な（生きていない） {{domxref("NodeList")}} を返します（起点となる要素は、たとえマッチしていても含まれません）。

+ +
+

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

+
+ +

構文

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

引数

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

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

+
+ +

戻り値

+ +

指定されたセレクターのうち1つ以上にマッチする {{domxref("Element")}} オブジェクトを含んだ非ライブな {{domxref("NodeList")}} です。

+ +
+

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

+
+ +

例外

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

例

+ +

dataset セレクターと属性セレクター

+ +
<section class="box" id="sect1">
+  <div class="funnel-chart-percent1">10.900%</div>
+  <div class="funnel-chart-percent2">3700.00%</div>
+  <div class="funnel-chart-percent3">0.00%</div>
+</section>
+
+ +
// dataset セレクター
+const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]`)];
+
+// 属性セレクター
+// const refs = [...document.querySelectorAll(`[class*="funnel-chart-percent"]`)];
+// const refs = [...document.querySelectorAll(`[class^="funnel-chart-percent"]`)];
+// const refs = [...document.querySelectorAll(`[class$="funnel-chart-percent"]`)];
+// const refs = [...document.querySelectorAll(`[class~="funnel-chart-percent"]`)];
+
+ +

一致のリストを入手する

+ +

次の例では、myBox 要素の中に存在するすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を取得しています。

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

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

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

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

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

次の例では、属性セレクターを使って、文書内にある、 data-src 属性を持つ文書内の {{domxref("iframe")}} 要素のリストを返します。

+ +
var matches = domument.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);
+});
+ +
+

注: NodeList は純正な配列ではないので、slice, some, map などのArray メソッドを持っていません。Array.from(nodeList) を使うことで純正の配列に変換することができます。

+
+ +

特殊な例

+ +

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, not 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','#queryselectorall','querySelectorAll')}}{{Spec2('Selectors API Level 1')}}初期定義
+ +

ブラウザー実装状況

+ +
+ + +

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

+
+ +

関連情報

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