.querySelector()
要素上でセレクタ指定することで、その要素の子孫の中からグループをマッチし、その最初の要素を返します。
文法
element = baseElement.querySelector(selectors);
| 引数 | 説明 |
|---|---|
| selectors | マッチさせるセレクタのグループを指定します。 |
| 戻り値 | |
| element | 要素(Element)オブジェクトが返されます。 |
例
この例ではHTMLのdocumentのbody内の、
typeを持たない、またはtext/cssのtypeを持つ、
最初のいずれかのstyle要素が返されます。
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
注意事項
もし条件にマッチするものが見つからなければnullを返し、
そうでなければ最初にマッチした要素を返します。
指定したセレクタのグループが不正なものであれば、SYNTAX_ERR例外がスローされます。
querySelector()は、WebApps APIで導入されました。
querySelector()に渡す引数の文字列は、CSS文法に従ったものでなければいけません。 document.querySelectorで実際の例を確認してください。
ブラウザ互換性
| 機能 | Chrome | Firefox (Gecko) |
IE | Opera | Safari |
|---|---|---|---|---|---|
| 基本 | 1 | 3.5 (1.9.1) | 8 | 10 | 3.2 (525.3) |
| 機能 | Android | Firefox Mobile |
IE Mobile |
Opera Mobile |
Safari Mobile |
|---|---|---|---|---|---|
| 基本 | ? | ? | ? | ? | ? |
CSS 2.1 selectors only (IE8)
仕様
関連項目
© 2017 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。 構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。
- 特定のブラウザに特化しすぎている情報やあまりにも古い情報、 または試験的に導入されているようなAPIや機能については、省略していることがあります。
- 例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、 その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
- MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
- "訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。