HTML DOM querySelector（）メソッド

❮要素オブジェクト

例

<div>要素のclass = "example"で最初の子要素のテキストを変更します。

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

querySelector（）メソッドは、要素の指定された CSSセレクターに一致する最初の子要素を返します。

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

CSSセレクターの詳細については、 CSSセレクターチュートリアルと CSSセレクターリファレンスをご覧ください。

ブラウザのサポート

表の数字は、このメソッドを完全にサポートする最初のブラウザバージョンを示しています。

Method
querySelector()	4.0	8.0	3.5	3.2	10.0

構文

element.querySelector(CSS selectors)

パラメータ値

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. The returned element depends on which element that is first found in the document (See "More Examples"). Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

技術的な詳細

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

その他の例

例

<div>要素の最初の<p>要素のテキストを変更します。

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

例

<div>要素の最初の<p>要素のテキストをclass = "example"で変更します。

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

例

<div>要素のid = "demo"を持つ要素のテキストを変更します。

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

例

<div>要素内にターゲット属性を持つ最初の<a>要素に赤い境界線を追加します。

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

例

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

<h2>要素と<h3>要素の2つの要素があると仮定します。

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

<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>要素が<div>の<h2>要素の前に配置されている場合。<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";

JS Reference

JavaScript

Window

HTML DOM

Web APIs

HTML Objects

Other References