querySelectorAllメソッドの概要
querySelectorAll は3つの単語を合わせた名前のメソッドです。- Query
- 読み: クエリ
意味: 問い合わせ - Selector
- 読み: セレクター
意味: 選択装置 - All
- 読み: オール
意味: 全て
このメソッドはjQueryのセレクタと同じ使い方で該当した要素をNodeList(ノードリスト)として取得することができます。
リストを参照するには、配列をあつかう時と同様に「 リスト[インデックス番号] 」の記法で行います。 また、lengthプロパティでリスト数を取得することができます。
これをfor制御文にあてはめてリスト全てに対して各プロパティの操作とメソッドなどの実行を行うことができます。また、forEach()メソッドでの反復処理も可能です。 これを使えばjQueryのCDNが使えない、またはjsファイルが無い場合でも即席でコードを作ることが可能です。
このメソッドでセレクタに該当するものが無ければ空のNodeListを返します。
目次に戻る実機サンプル
このサンプルではid属性の先頭文字列がidAnswerに該当する要素のノードリストを取得してみました。 実際はclass属性で参照すれば良い話ですが、検証として行いました。
答え1: id="idAnswer1"
答え2: id="idAnswer2"
答え3: id="idAnswer3"
実行:
サンプルコード
<body>
<p><output id="idAnswer1">innerHTML</output></p>
<p><output id="idAnswer2">innerHTML</output></p>
<p><output id="idAnswer3">innerHTML</output></p>
<p><input type="button" value="ボタン" onclick="evtAnswer()"></p>
<script>
document.open();
function evtAnswer(){
let arrAnswer = document.querySelectorAll('output[id^="idAnswer"]');
for(let i=0; i<arrAnswer.length; i++){
arrAnswer[i].innerHTML = "インデックス番号="+i;
arrAnswer[i].style = "background-color: khaki;"
}
}
document.close();
</script>
</body>
サンプルコードの要点
※これ以降の文ではリストを配列と表現させてください。
- 3つのoutput要素にid属性で識別子を設定しました。
( idAnswer1,idAnswer2,idAnswer3 ) - input要素button型にonclickイベントを設定しました。
( 関数名: evtAnswer ) - 配列変数(arrAnswer)の宣言をしてquerySelectorAll(セレクタ)で要素配列を取得しました。
( id属性の先頭文字が「idAnswer」に該当する要素 ) - for制御文で変数( i )の宣言、及び (0スタート; 配列数未満; i++)で繰り返しを制御しています。
- 配列:arrAnswer[i]からinnerHTMLプロパティに値の代入を行いました。
( 代入値: "インデックス番号="+i ) - 配列:arrAnswer[i]からstyleプロパティに値の代入を行いました。
( 代入値: background-color: khaki; )
以上です。
今回のサンプルでは混乱を避けるためにNodeListのままで使用していますが、Array.from()メソッドで配列に変換することができます。 もちろん、NodeListのままで使用しても問題ありません。
目次に戻るまとめ
実際に検証してみた結果、CSSとjQueryと同じように要素配列を取得することができました。 先にも書いていますがjQueryのCDNが使えないローカル環境で、かつjsファイルも無い状態でも即席コードを書くくらいなら十分に利用価値がありそうです。
目次に戻る