最新のWeb開発のチュートリアル
 

HTML DOM querySelector() Method

<Elementオブジェクト

例

で、クラス=「例」との最初の子要素のテキスト変更<div>要素を：

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";
»それを自分で試してみてください

もっと"Try it Yourself"以下の例。

定義と使用法

querySelector()メソッドは、指定されたCSS一致する最初の子要素を返しselector(s)元素のを。

注： querySelector()メソッドは、指定されたセレクタに一致する最初の要素を返します。 すべての一致を返すには、使用querySelectorAll()の代わりにメソッドを。

CSSセレクタの詳細については、私たちの訪問CSSセレクタチュートリアルと私たちのCSSセレクタのリファレンスを 。

ブラウザのサポート

表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。

方法
querySelector() 4.0 8.0 3.5 3.2 10.0

構文

element .querySelector( CSS selectors )

パラメータ値

パラメーター タイプ 説明
CSS selectors String 必須。 要素を照合するための1つのまたは複数のCSSセレクタを指定します。 これらは、など、属性の自分のID、クラス、種類、属性、値に基づいてHTML要素を選択するために使用されています

複数のセレクタのために、カンマで各セレクタを分離します。 返された要素は、最初の文書で発見されているどの要素に依存します(See "More Examples") 。

ヒント：すべてのCSSセレクタのリストについては、私たちを見てCSSセレクタリファレンス 。

技術的な詳細

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

その他の例

例

最初のテキストに変更し<p>の要素<div>要素を：

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";
»それを自分で試してみてください

例

最初のテキストに変更し<p>でクラス=「例」を持つ要素<div>要素を：

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";
»それを自分で試してみてください

例

id =「デモ」を持つ要素のテキスト変更<div>要素を：

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";
»それを自分で試してみてください

例

最初に赤い枠を追加<a>内部のターゲット属性を持つ要素<div>要素を：

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";
»それを自分で試してみてください

例

この例では、複数のセレクタがどのように機能するかを示しています。

：あなたは二つの要素があるとし<h2>と<h3>要素を。

次のコードは、最初に背景色を追加します<h2>の要素<div>

<div id="myDIV">
  <h2>A h2 element</h2>
  <h3>A h3 element</h3>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
»それを自分で試してみてください

しかし、場合<h3>要素は、前に置かれた<h2>の要素<div> <h3>要素は、赤の背景色を取得するものです。

<div id="myDIV">
  <h3>A h3 element</h3>
  <h2>A h2 element</h2>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
»それを自分で試してみてください

関連ページ

CSSチュートリアル： CSSセレクタ

CSSリファレンス： CSSセレクタリファレンス

JavaScriptのチュートリアル： JavaScriptのHTML DOMノードリスト

JavaScriptのリファレンス： ドキュメント。 querySelector()

JavaScriptのリファレンス： 要素 。 querySelectorAll()

HTML DOMリファレンス： ドキュメント。 querySelectorAll()

<Elementオブジェクト