HTML DOM Document querySelectorAll() メソッド
- 前のページ
- 次のページ
- 上一层に戻る HTML DOM Documents
定義と使用法
querySelectorAll() このメソッドは、CSS選択子に一致するすべての要素を返します。
querySelectorAll() このメソッドは NodeList を返します。
もし選択子が無効な場合、 querySelectorAll() このメソッドは、 SYNTAX_ERR 例外。
インスタンス
例 1
class="example" を持つすべての要素を選択します：
document.querySelectorAll(".example");
例 2
最初の <p> 要素に背景色を追加します：
const nodeList = document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
例 3
最初の class="example" な <p> 要素に背景色を追加します：
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
例 4
class="example" な要素の数：
let numb = document.querySelectorAll(".example").length;
例 5
すべての class="example" な要素の背景色を設定します：
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
例6
すべての <p> 要素の背景色を設定します：
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
例7
ターゲット属性を使用するすべての <a> 要素の枠線を設定します：
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
例8
親要素が <div> 要素である各 <p> 要素の背景色を設定します：
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
例9
すべての <h3>、<div>、および <span> 要素の背景色を設定します：
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
文法
document.querySelectorAll(CSSselectors)
パラメータ
| パラメータ | 説明 |
|---|---|
| CSSselectors |
必須。1つまたは複数のCSS選択子。 CSS選択子は、id、クラス、タイプ、属性、属性値などに基づいてHTML要素を選択します。 完全なリストは、以下のページを訪れてください。 CSS 选择子リファレンスマニュアル。 複数の選択子がある場合は、各選択子をコママで区切ってください（上記の例を参照してください）。 |
返値
| タイプ | 説明 |
|---|---|
| オブジェクト |
CSS選択子に一致する要素を持つ NodeList オブジェクト。 一致する項が見つからない場合、空の NodeList オブジェクトが返されます。 |
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.querySelectorAll() DOM レベル 3 (2004) の機能です。
すべてのブラウザがサポートしています：
| クローム | IE | エッジ | ファイアフォックス | サファリ | オペラ |
|---|---|---|---|---|---|
| クローム | IE | エッジ | ファイアフォックス | サファリ | オペラ |
| サポート | 9-11 | サポート | サポート | サポート | サポート |
関連ページ
チュートリアル：
QuerySelector メソッド：
Element querySelectorAll() メソッド
Document querySelectorAll() メソッド
GetElement メソッド：
Document getElementById() メソッド
- 前のページ
- 次のページ
- 上一层に戻る HTML DOM Documents
