blob: 96734201de70d0d8e7e4893bb8bc92466a71eeac (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
---
title: Document.querySelector()
slug: Web/API/Document/querySelector
tags:
- API
- CSS セレクター
- DOM
- DOM 要素
- Document
- Reference
- querySelector
- セレクター
- メソッド
translation_of: Web/API/Document/querySelector
---
<div>{{ApiRef("DOM")}}</div>
<p>{{domxref("Document")}} の <code><strong>querySelector()</strong></code> メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の {{domxref("Element")}} を返します。一致するものが見つからない場合は <code>null</code> を返します。</p>
<div class="note">
<p><strong>メモ</strong>: 比較処理は、文書マークアップにおける最初の要素を経由して文書ノードの<ruby>深さ優先前順走査<rp> (</rp><rt>depth-first pre-order traversal</rt><rp>) </rp></ruby>を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。</p>
</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate"><var>element</var> = document.querySelector(<var>selectors</var>);
</pre>
<h3 id="Parameters" name="Parameters">引数</h3>
<dl>
<dt><var>selectors</var></dt>
<dd>1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は <code>SYNTAX_ERR</code> が投げられます。セレクターとその管理の方法の詳細について、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。</dd>
</dl>
<div class="note">
<p><strong>メモ:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。JavaScript でもバックスラッシュのエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{anch("Escaping special characters", "特殊文字のエスケープ")}}を参照してください。</p>
</div>
<h3 id="Return_value" name="Return_value">返値</h3>
<p>文書内で指定された <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>に最初に一致する要素を示す {{domxref("HTMLElement")}} オブジェクト、もしくは、一致する要素がない場合は <code>null</code> を返します。</p>
<p>指定されたセレクターに一致するすべての要素のリストが必要な場合は、代わりに {{domxref("Document.querySelectorAll", "querySelectorAll()")}} を使用してください。</p>
<h3 id="Exceptions" name="Exceptions">例外</h3>
<dl>
<dt><code>SYNTAX_ERR</code></dt>
<dd>指定された <var>selectors</var> の構文が妥当ではない。</dd>
</dl>
<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2>
<p>指定されたセレクターが、誤って文書内で複数回使われている ID に一致する場合は、その ID を持つ最初の要素が返されます。</p>
<p><a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>は <a href="http://www.w3.org/TR/selectors-api/#grammar">Selectors API</a> で策定されている通り、何も要素を返しません。</p>
<h3 id="Escaping_special_characters" name="Escaping_special_characters">特殊文字のエスケープ</h3>
<p>標準の CSS の構文に従っていない ID やセレクター (例えば、コロンやスペースを不適切に使用しているもの) で一致させるためには、バックスラッシュ ("<code>\</code>") でその文字をエスケープしなければなりません。バックスラッシュは JavaScript のエスケープ文字でもあるので、文字列リテラルを入力する場合、それを <em>2 回</em>エスケープする必要があります (1 回目は JavaScript の文字列のため、2 回目は <code>querySelector()</code> のため)。</p>
<pre class="brush: html notranslate"><div id="foo\bar"></div>
<div id="foo:bar"></div>
<script>
console.log('#foo\bar'); // "#fooar" (\b はバックスペース制御文字)
document.querySelector('#foo\bar'); // いずれにも一致しない
console.log('#foo\\bar'); // "#foo\bar"
console.log('#foo\\\\bar'); // "#foo\\bar"
document.querySelector('#foo\\\\bar'); // 最初の div に一致する
document.querySelector('#foo:bar'); // いずれにも一致しない
document.querySelector('#foo\\:bar'); // 2番目の div に一致する
</script></pre>
<h2 id="Example" name="Example">例</h2>
<h3 id="Finding_the_first_element_matching_a_class" name="Finding_the_first_element_matching_a_class">あるクラスに一致する最初の要素を探索する</h3>
<p>次の例は、クラス "<code>myclass</code>" を持つ文書内の要素の内、最初のものを返します。</p>
<pre class="brush: js notranslate">var el = document.querySelector(".myclass");
</pre>
<h3 id="A_more_complex_selector" name="A_more_complex_selector">より複雑なセレクター</h3>
<p>セレクターは、次の例で示しているように、実に力強いものになり得ます。ここでは、文書内でクラスが "user-panel main" である {{HTMLElement("div")}} (<code><div class="user-panel main"></code>) の中にある、"login" という名前を持つ最初の {{HTMLElement("input")}} 要素 (<code><input name="login"/></code>) が返されます。</p>
<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel.main input[name='login']");
</pre>
<h3 id="Negation" name="Negation">否定</h3>
<p>すべての CSS セレクター文字列が正しい場合、セレクターを否定することもできます。</p>
<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel:not(.main) input[name='login']");</pre>
<p>これで、input 要素のうち親に <code>user-panel</code> クラスのついた div があるものの、<code>main</code> クラスがないものを 1 つ選択します。</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselector", "document.querySelector()")}}</td>
<td>{{Spec2("DOM WHATWG")}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div>{{Compat("api.Document.querySelector")}}</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li>
<li>{{domxref("Element.querySelector()")}}</li>
<li>{{domxref("Document.querySelectorAll()")}}</li>
<li>{{domxref("Element.querySelectorAll()")}}</li>
<li><a href="/ja/docs/Code_snippets/QuerySelector">querySelector のコードスニペット</a></li>
</ul>
|
