JavaScriptにおける要素取得のエラー
時々、初心者プログラマーは、DOM要素のグループを取得するために
メソッドquerySelectorAllの代わりにメソッド
querySelectorを使用するという間違いを犯します。
このエラーの特徴的な点を見てみましょう。 以下のような段落があるとします:
<p>1</p>
<p>2</p>
<p>3</p>
あるプログラマーがこれらの段落のテキストを取得して コンソールに出力しようと考えました。 そのために、誤ったメソッドを使用して これらの要素への参照を変数に取得しました:
let elems = document.querySelector('p');
それから、彼はループを使って段落を反復処理し、 各段落のテキストをコンソールに出力しようとしました:
for (let elem of elems) {
console.log(elem.textContent);
}
結果として、コンソールには特徴的なエラー
elems is not iterable が表示されます。
このエラーは、変数elemsがイテラブルではない、
つまり配列やfor-ofループで反復処理できるものではないことを示しています。