JavaScriptにおける要素取得エラー

初心者プログラマーは、単一のDOM要素を取得するために、メソッドquerySelectorの代わりにメソッドquerySelectorAllを使ってしまうという間違いを犯すことがあります。

このエラーの特徴的な性質を見てみましょう。以下の段落があるとします：

<p>テキスト</p>

あるプログラマーがこの段落のテキストを取得して変更しようと決めました。そのために、間違ったメソッドを使ってこの要素への参照を変数に取得しました：

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

その後、プログラマーは段落のテキストを変更しようとしました。しかし、テキストは変わりませんでした：

elem.textContent = '!!!'; // 機能しなかった

コンソールにはエラーは表示されませんでした。理由は、有効な操作が実行されたものの、それが単一の要素ではなく、グループに対して実行されたためです。グループ要素のテキストを単純に読み取ったり変更したりすることはできません。各要素を個別にループで処理してアクセスする必要があります。

エラーの検出方法

プログラマーがこのエラーを検出するためにどう行動すべきかを見てみましょう。実際、ある程度の経験があれば、特徴的な兆候から簡単に見つけられます。

しかし、それができなかったと仮定します。その場合、エラーを探す際のプログラマーの最初の行動は、変数の値をコンソールに出力することです。このケースでは変数は1つだけ - elem です。この変数の値を出力し、何が格納されているかを確認する必要があります：

let elem = document.querySelectorAll('p');
console.log(elem); // 単一要素ではなく配列を出力する

コンソールを見れば、変数内には単一の要素ではなく配列が入っていることがすぐにわかります。これは、要素を取得するメソッドで間違いがあったという明確なヒントをすぐに与えてくれます。