HTML DOM Element querySelector() メソッド
- 前のページ previousElementSibling
- 次のページ querySelectorAll()
- 上一层に戻る HTML DOM Elements オブジェクト
定義と使用法
querySelector() メソッドは指定された CSS 選択子に一致する最初の子要素を返します。
注意：
querySelector() メソッドは指定された選択子に一致する最初の要素のみを返します。すべての一致する要素を返すには、以下を使用してください。 querySelectorAll() メソッド。
以下も参照してください：
リファレンスマニュアル：
チュートリアル：
インスタンス
例 1
変更 <div> 要素内の class="example" の最初の子要素のテキスト：
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";
ページの下部にさらに多くの例があります。
構文
element.querySelector(CSSselectors)
パラメータ
| パラメータ | 説明 |
|---|---|
| CSSselectors |
必須。文字列。要素に一致する 1 つまたは複数の CSS 選択子を指定します。 CSS 選択子は、id、クラス、タイプ、属性、属性値などに基づいて HTML 要素を選択するために使用されます。 複数の選択子を使用する場合、各選択子をカンマで区切ってください。 返される要素は、ドキュメント内で最初に見つかった要素に依存します（以下の「さらに多くの例」を参照）。 ヒント：完全な CSS 選択子リストについては、以下を参照してください。 CSS 选择器参考手册。 |
技術的詳細
| 返り値： |
指定された CSS 選択子に一致する最初の要素を返します。 一致する要素が見つからない場合、null を返します。 指定された選択子が無効な場合、SYNTAX_ERR 例外が投げられます。 |
|---|---|
| DOM バージョン： | 選択子レベル 1 要素オブジェクト |
さらに多くの例
例 2
変更 <div> 要素内の最初の <p> 要素のテキスト：
var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";
例 3
変更 <div> 要素内の class="example" の最初の <p> 要素のテキスト：
var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";
例 4
変更 <div> 要素内の id="demo" の要素のテキスト：
var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";
例 5
<div>内のtarget属性を設定した最初の<a>要素に赤い枠線を追加します：
var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";
例 6
この例では、複数のセレクタがどのように動作するかを示しています。
あなたが2つの要素を持っていると仮定します：<h2>要素と<h3>要素。
以下のコードは<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";
例 7
しかし、<div> 内の<h3>要素が<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";
ブラウザのサポート
この表の数字は、この方法を最初に完全にサポートするブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
関連ページ
CSS 教程：CSS 选择器
CSS 参考マニュアル：CSS 选择器参考手册
JavaScript 教程：JavaScript HTML DOM ノードリスト
JavaScript 参考マニュアル：document.querySelector()
JavaScript 参考マニュアル：element.querySelectorAll()
HTML DOM 参考マニュアル：document.querySelectorAll()
- 前のページ previousElementSibling
- 次のページ querySelectorAll()
- 上一层に戻る HTML DOM Elements オブジェクト
