JavaScriptにおける要素配列の参照エラー

初心者プログラマーは時に、要素の配列をあたかも単一の要素であるかのように扱おうとすることがあります。このエラーの本質を見てみましょう。

以下の段落があるとします:

<p>1</p>
<p>2</p>
<p>3</p>

あるプログラマーが、すべての段落に同じ値を設定しようと考えたとします。そのために、これらの要素への参照を変数に取得しました:

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

その後、このプログラマーは、変数の中に配列ではなく単一の要素が入っているかのように誤ってアクセスしてしまいました。結果として、段落のテキストは変更されませんが、特徴的なことに、コンソールにはエラーも表示されません:

elems.textContent = '!';

ここでの正しい解決策は、要素の配列をループで回し、それぞれの要素に対して必要な操作を個別に実行することです:

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