From 42b9b23c17200b2eea8b3b2b4e3b8bf2b6eae458 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 19 Sep 2021 23:30:21 +0900 Subject: Document.querySelector および .querySelectorAll を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Markdown に変換 - 2021/09/15 時点の英語版に同期 --- files/ja/web/api/document/queryselector/index.md | 109 +++++++++++------------ 1 file changed, 53 insertions(+), 56 deletions(-) (limited to 'files/ja/web/api/document/queryselector/index.md') diff --git a/files/ja/web/api/document/queryselector/index.md b/files/ja/web/api/document/queryselector/index.md index c0af97a434..7847ab82b7 100644 --- a/files/ja/web/api/document/queryselector/index.md +++ b/files/ja/web/api/document/queryselector/index.md @@ -15,57 +15,51 @@ tags: translation_of: Web/API/Document/querySelector browser-compat: api.Document.querySelector --- -
{{ApiRef("DOM")}}
+{{ApiRef("DOM")}} -

{{domxref("Document")}} の querySelector() メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の {{domxref("Element")}} を返します。一致するものが見つからない場合は null を返します。

+{{domxref("Document")}} の **`querySelector()`** メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の {{domxref("Element")}} を返します。一致するものが見つからない場合は `null` を返します。 -
-

メモ: 比較処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。

-
+> **Note:** 照合処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。 -

構文

+## 構文 -
element = document.querySelector(selectors);
-
+```js +element = document.querySelector(selectors); +``` -

引数

+### 引数 -
-
selectors
-
1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は SyntaxError が発生します。セレクターとその管理の方法の詳細について、セレクターを使用した DOM 要素の指定を参照してください。
-
+- _selectors_ + - : {{domxref("DOMString")}} で、照合する 1 つ以上のセレクターを設定します。この文字列は妥当な CSS セレクターでなければなりません。そうでない場合は `SyntaxError` が発生します。セレクターとその管理の方法の詳細について、[セレクターを使用した DOM 要素の指定](/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)を参照してください。 -
-

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

-
+> **Note:** 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は[特殊文字のエスケープ](/ja/docs/Web/API/Document/querySelector#特殊文字のエスケープ)を参照してください。 -

返値

+### 返値 -

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

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

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

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

例外

+### 例外 -
-
SyntaxError
-
指定された selectors の構文が妥当ではない。
-
+- `SyntaxError` + - : 指定された _selectors_ の構文が妥当ではない。 -

使用上のメモ

+## 使用上のメモ -

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

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

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

+[CSS 擬似要素](/ja/docs/Web/CSS/Pseudo-elements)は [Selectors API](https://www.w3.org/TR/selectors-api/#grammar) で策定されている通り、何も要素を返しません。 -

特殊文字のエスケープ

+### 特殊文字のエスケープ -

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

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

+

 
-<script>
+
+```
 
-
例

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

+### あるクラスに一致する最初の要素を探索する
 
-
次の例は、クラス "myclass" を持つ文書内の要素の内、最初のものを返します。

+次の例は、クラス "`myclass`" を持つ文書内の要素の内、最初のものを返します。
 
-
var el = document.querySelector(".myclass");
-

+```js
+var el = document.querySelector(".myclass");
+```
 
-
より複雑なセレクター

+### より複雑なセレクター
 
-
セレクターは、次の例で示しているように、実に力強いものになり得ます。ここでは、文書内でクラスが "user-panel main" である {{HTMLElement("div")}} (<div class="user-panel main">) の中にある、"login" という名前を持つ最初の {{HTMLElement("input")}} 要素 (<input name="login"/>) が返されます。

+セレクターは、次の例で示しているように、実に力強いものになり得ます。ここでは、文書内で {{HTMLElement("input")}} に "login" という名前の付いた最初のもの (``) のうち、 {{HTMLElement("div")}} でクラスが "user-panel main" (`
`) の中にあるものが返されます。
 
-
var el = document.querySelector("div.user-panel.main input[name='login']");
-

+```js
+var el = document.querySelector("div.user-panel.main input[name='login']");
+```
 
-
否定

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

+すべての CSS セレクター文字列が妥当な場合、セレクターを否定することもできます。
 
-
var el = document.querySelector("div.user-panel:not(.main) input[name='login']");

+```js
+var el = document.querySelector("div.user-panel:not(.main) input[name='login']");
+```
 
-
これで、input 要素のうち親に user-panel クラスのついた div があるものの、main クラスがないものを 1 つ選択します。

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

+## 仕様書
 
 {{Specifications}}
 
-
ブラウザーの互換性

+## ブラウザーの互換性
 
-
{{Compat}}

+{{Compat}}
 
-
関連情報

+## 関連情報
 
-
+- [セレクターを使用した DOM 要素の指定](/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
+- {{domxref("Element.querySelector()")}}
+- {{domxref("Document.querySelectorAll()")}}
+- {{domxref("Element.querySelectorAll()")}}
-- 
cgit v1.2.3-54-g00ecf