もっと"Try it Yourself"以下の例。
定義と使用法
querySelector()メソッドは、指定されたCSS一致する最初の要素を返しselector(s)文書です。
注： querySelector()メソッドは、指定されたセレクタに一致する最初の要素を返します。 すべての一致を返すには、使用querySelectorAll()の代わりにメソッドを。
セレクタは、複数回使用されている文書内のIDと一致する場合（なお、 "id" 、それが最初に一致した要素を返し、ページ内で一意でなければならず、複数回使用されるべきではありません）。
CSSセレクタの詳細については、私たちの訪問CSSセレクタチュートリアルと私たちのCSSセレクタのリファレンスを 。
ブラウザのサポート
表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。
| 方法 | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
構文
document.querySelector( CSS selectors )パラメータ値
| パラメーター | タイプ | 説明 |
|---|---|---|
| CSS selectors | String | 必須。 要素を照合するための1つのまたは複数のCSSセレクタを指定します。 これらは、など、属性の自分のID、クラス、種類、属性、値に基づいてHTML要素を選択するために使用されています 複数のセレクタのために、カンマで各セレクタを分離します。 返された要素は、最初の文書で発見されているどの要素に依存します(See "More Examples") 。 ヒント：すべてのCSSセレクタのリストについては、私たちを見てCSSセレクタリファレンス 。 |
技術的な詳細
| DOMバージョン： | セレクタレベル1のドキュメントオブジェクト |
|---|---|
| 戻り値： | 指定されたCSS一致する最初の要素を表すNodeListオブジェクト、 selector(s) 。 一致が見つからない場合は、nullが返されます。 指定されている場合SYNTAX_ERR例外をスローselector(s)無効です。 |
その他の例
例
ID =「デモ」を持つ要素のテキストを変更します。
document.querySelector("#demo").innerHTML = "Hello World!";
»それを自分で試してみてください 例
この例では、複数のセレクタがどのように機能するかを示しています。
：あなたは二つの要素があるとし<h2>と<h3>要素を。
次のコードは、最初に背景色を追加する<h2>ドキュメント内の要素。
<h2>A h2 element</h2>
<h3>A h3 element</h3>
document.querySelector("h2,
h3").style.backgroundColor = "red"; »それを自分で試してみてください しかし、場合<h3>要素は、前に置かれた<h2>ドキュメント内の要素。 <h3>要素は、赤の背景色を取得するものです。
<h3>A h3 element</h3>
<h2>A h2 element</h2>
document.querySelector("h2,
h3").style.backgroundColor = "red"; »それを自分で試してみてください 関連ページ
CSSチュートリアル： CSSセレクタ
CSSリファレンス： CSSセレクタリファレンス
JavaScriptのチュートリアル： JavaScriptのHTML DOMノードリスト
JavaScriptのリファレンス： 要素 。 querySelector()
HTML DOMリファレンス： ドキュメント。 querySelectorAll()
JavaScriptのリファレンス： 要素 。 querySelectorAll()