HTML DOM Document querySelector() メソッド
- 前のページ open()
- 次のページ querySelectorAll()
- 上一层に戻る HTML DOM Documents
定義と使用方法
querySelector() メソッドは、CSS選択子に一致する最初の要素。
返すためにすべてすべての一致する項（最初の一致する項だけでなく）、querySelectorAll()を使用してください。
選択子が無効な場合、 querySelector() および querySelectorAll() すべて SYNTAX_ERR 例外。
例
例 1
最初の <p> 要素を取得します：
document.querySelector("p");
例 2
class="example" の最初の要素を取得します：
document.querySelector(".example");
例 3
class="example" の最初の <p> 要素を取得します：
document.querySelector("p.example");
例 4
id="demo" の要素のテキストを変更します：
document.querySelector("#demo").innerHTML = "Hello World!";
例 5
親要素が <div> 要素である最初の <p> 要素を選択します：
document.querySelector("div > p");
例 6
「target」属性を持つ最初の <a> 要素を選択します：
document.querySelector("a[target]");
例 7
最初の <h3> または最初の <h4> を選択します：
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
例 8
最初の <h3> または最初の <h4> を選択します：
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
文法
document.querySelector(cssSelectors)
パラメータ
| パラメータ | 説明 |
|---|---|
| cssSelectors |
必須。1つまたは複数のCSS選択子。 CSS選択子は、id、クラス、タイプ、属性、属性値などに基づいてHTML要素を選択します。 完全なリストが必要な場合は、当社の CSS セレクタ リファレンス マニュアル。 複数の選択子がある場合、各選択子をカンマで区切ってください（ページ上の例を参照してください）。 |
返り値
| タイプ | 説明 |
|---|---|
| オブジェクト |
CSS選択子に一致する最初の要素を含む NodeList。 一致する項が見つからない場合、null を返します。 |
HTMLCollection と NodeList の違い
NodeList および HTMLcollection 非常に似ています。
両方ともは、ドキュメントから抽出されたノード（要素）の似た数値のセット（リスト）です。ノードはインデックス番号（下標）を通じてアクセスできます。インデックスは0から始まります。
両方とも length 属性は、リスト（セット）内の要素の数を返します。
HTMLCollectionはドキュメント要素のセット。
NodeListはドキュメントノード（要素ノード、属性ノード、テキストノード）のセット。
HTMLCollectionの項目は名前、id、またはインデックス番号を通じてアクセスできます。
NodeListの項目はそのインデックス番号を通じてのみアクセスできます。
HTMLCollectionは常にリアルタイムのセット。
例えば：<li>要素がDOM内のリストに追加された場合、HTMLCollectionのリストも変更されます。
NodeListは通常静的のセット。
例えば：<li>要素がDOM内のリストに追加された場合、NodeListのリストは変更されません。
getElementsByClassName() および getElementsByTagName() メソッドはすべてリアルタイムの HTMLCollection を返します。
querySelectorAll() メソッドは静的な NodeList を返します。
childNodes 属性はリアルタイムの NodeList を返します。
ブラウザのサポート
document.querySelector() DOM Level 1 (1998) 特性です。
すべてのブラウザがサポートしています：
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| サポート | 9-11 | サポート | サポート | サポート | サポート |
- 前のページ open()
- 次のページ querySelectorAll()
- 上一层に戻る HTML DOM Documents
