Latest web development tutorials
×

JavaScript & HTML DOM リファレンスマニュアル

概要

JavaScript オブジェクト

JavaScript Array オブジェクト JavaScript Boolean オブジェクト JavaScript Date オブジェクト JavaScript Math オブジェクト JavaScript Number オブジェクト JavaScript String オブジェクト JavaScript RegExp オブジェクト JavaScript グローバルプロパティ/関数 JavaScript 演算子

Browser オブジェクト

Window オブジェクト Navigator オブジェクト Screen オブジェクト History オブジェクト Location オブジェクト

DOM オブジェクト

HTML DOM Document オブジェクト HTML DOM Elementオブジェクト HTML DOM 属性オブジェクト HTML DOM イベントオブジェクト

HTML オブジェクト

<a> <area> <audio> <base> <blockquote> <body> <button> <canvas> <col> <colgroup> <datalist> <del> <details> <dialog> <embed> <fieldset> <form> <iframe> <frameset > <img> <ins> <input> - button <input> - checkbox <input> - color <input> - date <input> - datetime <input> - datetime-local <input> - email <input> - file <input> - hidden <input> - image <input> - month <input> - number <input> - range <input> - password <input> - radio <input> - reset <input> - search <input> - submit <input> - text <input> - time <input> - url <input> - week <keygen> <link> <label> <legend> <li> <map> <menu> <menuItem> <meta> <meter> <object> <ol> <optgroup> <option> <param> <progress> <q> <script> <select> <source> <style> <table> <td> <th> <tr> <textarea> <title> <time> <track> <video>

HTML DOM querySelector（）メソッド

ドキュメント・オブジェクト・リファレンス ドキュメントオブジェクト

例

の文書ID = "デモ"の最初の要素を取得します。

document.querySelector（「＃デモ "）;

»をお試しください

定義と使用法

querySelector（）メソッドは、指定したCSSセレクタに一致する文書内の要素を返します。

注：querySelector（）メソッドは、単純に指定したセレクタに一致する最初の要素を返します。 あなたはすべての要素を返すために必要がある場合は、代わりにquerySelectorAll（）メソッドを使用します。

もっとCSSセレクタは、私たちをご覧くださいチュートリアルCSSセレクタを 、私たちのCSSセレクタは、マニュアルを参照します 。

ブラウザのサポート

表中の数字は、メソッドのバージョン番号をサポートする最初のブラウザを表します。

ウェイ
querySelector（） 4.0 8.0 3.5 3.1 10.0

文法

document.querySelector（CSSセレクタ）

パラメータ値

パラメータ タイプ 説明
CSSセレクタ 文字列 必要があります。 CSSセレクタ内の1つまたは複数の整合素子を指定します。 あなたは、要素を選択するなど、属性値を、属性、そのID、クラス、種類を使用することができます。

複数のセレクタのために、一致する要素を返すために、カンマで区切って指定します。

ヒント：複数のCSSセレクタのために 、私たちを参照してくださいCSSセレクタは、マニュアルを参照します 。

技術的詳細

DOMのバージョン： セレクタレベル1のドキュメントオブジェクト
戻り値： 最初に一致した要素は、CSSセレクタを指定しました。 見つからない場合は、nullを返します。 あなたが指定した場合、無効なセレクタSYNTAX_ERR例外がスローされます。

より多くの例

例

<p>要素の最初の文書であります：

document.querySelector（「P」）。

»をお試しください

例

ドキュメントクラス= "例"最初の要素を取得します。

document.querySelector（「例。 "）;

»をお試しください

例

ドキュメントクラス= "例"最初の<p>要素を取得します。

document.querySelector（「p.example "）;

»をお試しください

例

「ターゲット」最初の<a>要素の属性た文書を取得します。

document.querySelector（「[ターゲット] "）;

»をお試しください

例

次の例では、複数のセレクタの使用方法を示しています。

あなたは2つのセレクタを選択すると仮定します。<H2>と<H3>要素。

次のコードの最初の<H2>要素は、文書の背景色を追加します。

<H2> h2の要素</ H2>
<H3> H3要素</ H3>

document.querySelector（「H2、H3」）style.backgroundColor = "赤";

»をお試しください

あなたの文書は<H3>要素の前に<H2>要素である場合には、<H3>要素は、背景色を指定するように設定されます。

<H3> H3要素</ H3>
<H2> h2の要素</ H2>

document.querySelector（「H2、H3」）style.backgroundColor = "赤";

»をお試しください

関連ページ

JavaScriptのリファレンスマニュアル： 要素 .querySelector（）

ドキュメント・オブジェクト・リファレンス ドキュメントオブジェクト