ywork2020.com

Title

CSSやjQueryのセレクタと同じ機能を使う

目次 (INDEX)

querySelectorAllメソッドの概要

querySelectorAll は3つの単語を合わせた名前のメソッドです。
Query
読み: クエリ
意味: 問い合わせ
Selector
読み: セレクター
意味: 選択装置
All
読み: オール
意味: 全て

このメソッドはjQueryのセレクタと同じ使い方で該当した要素をNodeList(ノードリスト)として取得することができます。

リストを参照するには、配列をあつかう時と同様に「 リスト[インデックス番号] 」の記法で行います。 また、lengthプロパティでリスト数を取得することができます。

これをfor制御文にあてはめてリスト全てに対して各プロパティの操作とメソッドなどの実行を行うことができます。また、forEach()メソッドでの反復処理も可能です。 これを使えばjQueryのCDNが使えない、またはjsファイルが無い場合でも即席でコードを作ることが可能です。

このメソッドでセレクタに該当するものが無ければ空のNodeListを返します。

目次に戻る

実機サンプル

このサンプルではid属性の先頭文字列がidAnswerに該当する要素のノードリストを取得してみました。 実際はclass属性で参照すれば良い話ですが、検証として行いました。

答え1: id="idAnswer1"
innerHTML

答え2: id="idAnswer2"
innerHTML

答え3: id="idAnswer3"
innerHTML

実行:

目次に戻る

サンプルコード

<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>
目次に戻る

サンプルコードの要点

※これ以降の文ではリストを配列と表現させてください。

  1. 3つのoutput要素にid属性で識別子を設定しました。
    ( idAnswer1,idAnswer2,idAnswer3 )
  2. input要素button型にonclickイベントを設定しました。
    ( 関数名: evtAnswer )
  3. 配列変数(arrAnswer)の宣言をしてquerySelectorAll(セレクタ)で要素配列を取得しました。
    ( id属性の先頭文字が「idAnswer」に該当する要素 )
  4. for制御文で変数( i )の宣言、及び (0スタート; 配列数未満; i++)で繰り返しを制御しています。
  5. 配列:arrAnswer[i]からinnerHTMLプロパティに値の代入を行いました。
    ( 代入値: "インデックス番号="+i )
  6. 配列:arrAnswer[i]からstyleプロパティに値の代入を行いました。
    ( 代入値: background-color: khaki; )
  7. 以上です。

今回のサンプルでは混乱を避けるためにNodeListのままで使用していますが、Array.from()メソッドで配列に変換することができます。 もちろん、NodeListのままで使用しても問題ありません。

目次に戻る

まとめ

実際に検証してみた結果、CSSとjQueryと同じように要素配列を取得することができました。 先にも書いていますがjQueryのCDNが使えないローカル環境で、かつjsファイルも無い状態でも即席コードを書くくらいなら十分に利用価値がありそうです。

目次に戻る