From 45bf098003a11b56bbf28ceb6f9563191d0dd26e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 19 Aug 2021 22:44:39 +0900 Subject: ParentNode ミックスインを廃止 (#2028) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ParentNode ミックスインを廃止 - メンバーは Element クラスへ移動 - 各ドキュメントを 2021/08/11 時点の英語版に同期 --- .../ja/web/api/element/queryselectorall/index.html | 156 ++++++++------------- 1 file changed, 60 insertions(+), 96 deletions(-) (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 index ec2323fa35..08dc56b7c0 100644 --- a/files/ja/web/api/element/queryselectorall/index.html +++ b/files/ja/web/api/element/queryselectorall/index.html @@ -1,5 +1,5 @@ --- -title: element.querySelectorAll +title: Element.querySelectorAll() slug: Web/API/Element/querySelectorAll tags: - API @@ -13,59 +13,57 @@ tags: - Selecting Elements - Selectors - querySelector +browser-compat: api.Element.querySelectorAll translation_of: Web/API/Element/querySelectorAll +original_slug: Web/API/ParentNode/querySelectorAll ---
{{APIRef("DOM")}}
-

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

+

{{domxref("Element")}} の querySelectorAll() メソッドは、静的な (生きていない) {{domxref("NodeList")}} で、メソッド呼び出しの時点でそのオブジェクトの子孫にあたる要素のうち、一連のセレクターに一致するもののリストを返します。

-
-

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

-
- -

構文

+

構文

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

 
-
引数

+
引数

 
 

  
selectors

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

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

 

 
 

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

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

 

 
-
戻り値

+
返値

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

+
生きていない {{domxref("NodeList")}} で、指定されたセレクターの 1 つ以上に一致する子孫ノード 1 つに対して 1 つずつの {{domxref("Element")}} を含みます。

 
 

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

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

 

 
-
例外

+
例外

 
 

  
SyntaxError

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

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

 

 
-
例

+
例

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

+
データセットセレクターと属性セレクター

 
-
<section class="box" id="sect1">
+
<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"]`)];
 
 // 属性セレクター
@@ -75,129 +73,95 @@ const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]`
 // const refs = [...document.querySelectorAll(`[class~="funnel-chart-percent"]`)];
 

 
-
一致のリストを入手する

+
一致するもののリストの入手

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

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

+
{{domxref("NodeList")}} で "myBox" 要素の中にあるすべての {{HTMLElement("p")}} 要素を取得するには、次のようにします。

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

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

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

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

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

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

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

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

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

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

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

 
-
次の例では、属性セレクターを使って、「ID が userlist である要素内の、data-active 属性を持ち、その値が 1 である要素群」のリストを返します。

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

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

 
-
一致したリストへアクセスする

+
一致したものへのアクセス

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

+
一致した要素の {{domxref("NodeList")}} が返されると、配列と同様に調べることができます。配列が空であれば (つまり、 length プロパティが 0 であれば)、一致するものが見つからなかったということです。

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

+
それ以外の場合は、標準的な配列記法でリストの内容にアクセスすることができます。次のような一般的なループ文を使用することができます。

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

 
 

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

+  
メモ: NodeList は、本物の配列ではありません。つまり、slice、some、map などの配列メソッドを持っていません。これを配列に変換するには、 Array.from(nodeList) のようにします。

 

 
-
特殊な例

+
ユーザーのメモ

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

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

 
-
HTML

+
HTML

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

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

 
-
JavaScript

+
JavaScript

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

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

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

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

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

 
-
var select = document.querySelector('.select');
+
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")}}

-

+
仕様書

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

+
+
{{Compat}}

 
-
関連情報

+
関連情報

 
 
-- 
cgit v1.2.3-54-g00ecf