JavaScriptにおける要素のグループ取得

前のレッスンでは、メソッドquerySelectorを使ってページの単一の要素を取得しました。次は、要素のグループを取得し、多くの要素に対して一括して何らかの操作を行う方法を学ぶ時です。

このために用意されているのがquerySelectorAllメソッドで、CSSセレクターに一致するすべてのタグを要素の配列として取得します。見つかった要素に対して何かを行うには、取得した配列を操作する必要があります。例えば、ループで配列を回し、ループ内で各要素に対して個別に何らかの操作を実行します。

例えば、クラスwwwが付いた段落があるとします。

<p class="www">text1</p>
<p class="www">text2</p>
<p class="www">text3</p>

これらの段落の配列を取得し、ループで回して、見つかった段落のテキストをコンソールに出力してみましょう。

let elems = document.querySelectorAll('.www');

for (let elem of elems) {
	console.log(elem.textContent);
}

次に、各段落のテキストの末尾に感嘆符を追加してみましょう。

let elems = document.querySelectorAll('.www');

for (let elem of elems) {
	elem.textContent = elem.textContent + '!';
}

段落とボタンがあります。ボタンをクリックしたとき、すべての段落を見つけ、ループで回して、各段落のテキストを'text'という値に設定してください。

テキストが書かれた段落とボタンがあります。ボタンをクリックしたとき、各段落のテキストの末尾にその段落の順序番号を追加してください。

数値が入力されたinput要素、段落、ボタンがあります。ボタンをクリックしたとき、input要素の数値の合計を見つけ、その合計を段落のテキストとして書き込んでください。