diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-04 23:43:25 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-18 09:23:54 +0900 |
commit | 177052e69595330579f7b0ee80caabb1ec54d2d9 (patch) | |
tree | 6d6c7c0b49211f89337123df4d3898cff4245630 /files/ja/web/api/element/queryselectorall | |
parent | b15d60e3584608583432c5a3ce85aae4d55d317c (diff) | |
download | translated-content-177052e69595330579f7b0ee80caabb1ec54d2d9.tar.gz translated-content-177052e69595330579f7b0ee80caabb1ec54d2d9.tar.bz2 translated-content-177052e69595330579f7b0ee80caabb1ec54d2d9.zip |
2022/01/19 時点の英語版に同期
Diffstat (limited to 'files/ja/web/api/element/queryselectorall')
-rw-r--r-- | files/ja/web/api/element/queryselectorall/index.md | 30 |
1 files changed, 15 insertions, 15 deletions
diff --git a/files/ja/web/api/element/queryselectorall/index.md b/files/ja/web/api/element/queryselectorall/index.md index 0971fcb661..ed6da95ce5 100644 --- a/files/ja/web/api/element/queryselectorall/index.md +++ b/files/ja/web/api/element/queryselectorall/index.md @@ -19,7 +19,7 @@ original_slug: Web/API/ParentNode/querySelectorAll --- {{APIRef("DOM")}} -{{domxref("Element")}} の **`querySelectorAll()`** メソッドは、静的な (生きていない) {{domxref("NodeList")}} で、メソッド呼び出しの時点でそのオブジェクトの子孫にあたる要素のうち、一連のセレクターに一致するもののリストを返します。 +{{domxref("Element")}} の **`querySelectorAll()`** メソッドは、静的な (ライブではない) {{domxref("NodeList")}} で、メソッド呼び出しの時点でそのオブジェクトの子孫にあたる要素のうち、一連のセレクターに一致するもののリストを返します。 ## 構文 @@ -30,13 +30,13 @@ elementList = parentNode.querySelectorAll(selectors); ### 引数 - `selectors` - - : {{domxref("DOMString")}} で、照合対象の 1 つまたは複数のセレクターを指定します。この文字列は妥当な [CSS セレクター](/ja/docs/Web/CSS/CSS_Selectors)でなければならず、そうでない場合は `SyntaxError` の例外が発生します。セレクターの仕様と要素の識別の詳細は、[セレクターを使用した DOM 要素の指定](/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)を参照してください。複数のセレクターを指定する際は、カンマで区切ります。 + - : 照合する 1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な [CSS セレクター](/ja/docs/Web/CSS/CSS_Selectors)でなければならず、そうでない場合は `SyntaxError` 例外が発生します。セレクターの仕様と要素の識別の詳細は、[セレクターを使用した DOM 要素の指定](/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)を参照してください。複数のセレクターを指定する際は、カンマで区切ります。 -> **Note:** 標準の CSS 構文に含まれていない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は {{anch("Escaping special characters")}} を参照してください。 +> **Note:** 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は {{anch("Escaping special characters")}} を参照してください。 ### 返値 -生きていない {{domxref("NodeList")}} で、指定されたセレクターの 1 つ以上に一致する子孫ノード 1 つに対して 1 つずつの {{domxref("Element")}} を含みます。 +ライブではない {{domxref("NodeList")}} で、指定されたセレクターの 1 つ以上に一致する子孫ノード 1 つに対して 1 つずつの {{domxref("Element")}} を含みます。 > **Note:** 指定された `selectors` が [CSS 擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を含む場合、返されるリストは常に空になります。 @@ -76,27 +76,26 @@ const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]` var matches = myBox.querySelectorAll("p"); ``` -次の例では、 `"myBox"` 要素の中にある {{HTMLElement("div")}} 要素のうち、 `note` または `alert` のいずれかのクラスを持つものをすべてリストで返します。 +次の例では、文書内にあるすべての {{HTMLElement("div")}} 要素のうち、 "`note`" または "`alert`" のいずれかのクラスを持つもののリストを返します。 ```js var matches = myBox.querySelectorAll("div.note, div.alert"); ``` -こちらは、文書内の `<p>` 要素のうち、 `"test"` という ID を持つコンテナー内にあり、 - `"highlighted"` クラスを持つ {{HTMLElement("div")}} を直接の親要素とするもののリストを取得します。 +ここでは、文書の `<p>` 要素のうち、直接の親要素が {{HTMLElement("div")}} の `"highlighted"` クラスのものであり、それが ID が `"test"` であるコンテナーの中にあるものの一覧を取得します。 ```js var container = document.querySelector("#test"); var matches = container.querySelectorAll("div.highlighted > p"); ``` -次の例では[属性セレクター](/ja/docs/Web/CSS/Attribute_selectors)を使用しており、 `data-src` という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。 +次の例では[属性セレクター](/ja/docs/Web/CSS/Attribute_selectors)を使用して、文書内の {{HTMLElement("iframe")}} 要素のうち `"data-src"` という名前の属性を持つもののリストを返します。 ```js var matches = document.querySelectorAll("iframe[data-src]"); ``` -次の例では、ID が `"userlist"` の要素の中にあり、`"data-active"` 属性を持ち、その値が `"1"` であるリスト項目のリストを返すため、属性セレクターが使用されています。 +こちらでは、属性セレクターを使用して、ID が `"userlist"` の要素の中にあり、`"data-active"` 属性を持ち、その値が `"1"` であるリスト項目のリストを返しています。 ```js var container = document.querySelector("#userlist"); @@ -105,7 +104,7 @@ var matches = container.querySelectorAll("li[data-active='1']"); ### 照合結果へのアクセス -一致した要素の {{domxref("NodeList")}} が返されると、配列と同様に調べることができます。配列が空であれば (つまり、 `length` プロパティが 0 であれば)、一致するものが見つからなかったということです。 +一致した要素の {{domxref("NodeList")}} が返されると、配列と同様に調べることができます。配列が空であれば(つまり、 `length` プロパティが 0 であれば)、一致するものが見つからなかったということです。 それ以外の場合は、標準的な配列記法でリストの内容にアクセスすることができます。次のような一般的なループ文を使用することができます。 @@ -117,15 +116,15 @@ highlightedItems.forEach(function(userItem) { }); ``` -> **Note:** `NodeList` は、本物の配列ではありません。つまり、`slice`、`some`、`map` などの配列メソッドを持っていません。これを配列に変換するには、 `Array.from(nodeList)` を実行してみてください。 +> **Note:** `NodeList` は、厳密には配列ではありません。つまり、`slice`、`some`、`map` などの配列メソッドを持っていません。これを配列に変換するには、 `Array.from(nodeList)` と実行してください。 ## ユーザーのメモ -`querySelectorAll()` は、最も一般的な JavaScript DOM ライブラリーとは動作が異なっており、意図しない結果をもたらすことがあります。 +`querySelectorAll()` は、多くの JavaScript DOM ライブラリーとは動作が異なり、意図しない結果をもたらすことがあります。 ### HTML -次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について考えてみてください。 +入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML で考えてみましょう。 ```html <div class="outer"> @@ -144,9 +143,9 @@ var inner = select.querySelectorAll('.outer .inner'); inner.length; // 1 です。0 ではありません! ``` -この例では、 `".outer .inner"` を `"select"` クラスの `<div>` のコンテキストで選択した場合、クラス `".inner"` の要素は、 `.outer` が検索対象の基底要素 (`".select"`) の子孫でなくても見つかります。既定では、`querySelectorAll()` はセレクターの最後の要素が検索範囲内にあるかどうかだけを確認します。 +この例では、 `".outer .inner"` を `"select"` クラスのついた `<div>` の中で選択すると、 `".inner"` クラスは `.outer` が検索が行われた基底要素 (`".select"`) の子孫でないにもかかわらず、見つけることができます。既定では、 `querySelectorAll()` はセレクターの最後の要素が検索範囲内にあるかどうかだけを確認します。 -{{cssxref(":scope")}} 擬似クラスを使用すると、基底要素の子孫にあるセレクターにのみ一致するという、期待される動作に戻ります。 +{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。 ```js var select = document.querySelector('.select'); @@ -170,3 +169,4 @@ inner.length; // 0 - {{domxref("Element.querySelector()")}} - {{domxref("Document.querySelector()")}} および {{domxref("Document.querySelectorAll()")}} - {{domxref("DocumentFragment.querySelector()")}} および {{domxref("DocumentFragment.querySelectorAll()")}} +- [`querySelector()` のコードスニペット](/ja/docs/Code_snippets/QuerySelector) |