質問: document.getElementById("fileList"); console.log(listObj); ``` とすればログを開いた時にlistObjの中にちゃんと個数分の ${file.status} を見ることができています。 ですが、listObjはiterableなオブジェクトではないらしくループ処理をかけて取得するというようなことはできませんでした。 何か良い方法ご存知ないですか?
回答: ひとつ確認しますが、ページ内に `...` のかたまりがコレクションの数だけ繰り返されるという理解でよいですよね? それとも、上記のHTMLの構造を全く変えずに`` の5個セットだけが複製されるという意図でしょうか。ここでは前者だと仮定してお答えします。 ID はページ内で重複してはいけないので、 `getElementById()` では1つしか要素を得ることができないのです。以下にいくつか考えられる方針を挙げます。 (A) 5つ目の `p` 要素に同じクラス名を割り当てて、 `document.getElementsByClassName()` でクラスが指定されたすべての要素を得る。この関数で返ってくるのは iterable **ではない** `HTMLCollection` 型のDOMオブジェクトです。ループのしかたは下の補足に書いてあります。 (B) 指定したCSSセレクターにマッチした全ての要素を返す `document.querySelectorAll()` を使って、(やや技巧的ですが) `document.querySelectorAll("div.text > p:nth-child(5)")` のようにする。こちらで返ってくるのは `NodeList` 型のDOMオブジェクトで、こちらは `HTMLCollection` と違って iterable なので `for...of` ループを使うことができます。 (C) DOMツリーを自力でたどる。 `document.getElementById("fileList").children` が `HTMLCollection` 型のDOMオブジェクトです。これを下に示すやりかたでループします。 私のおすすめとしては「5個セット」というルールが将来変わっても壊れないように、(A) でクラス名を指定するやり方が優れていると思います。 ### (補足) HTMLCollection のループのしかた `HTMLCollection` は実体としては要素のリストなのですが iterable ではないので、 `for...of` ループで列挙することができません。`.length` プロパティとインデックスアクセス `[i]` は使えるので、インデックスで列挙することもできますが、インデックスを経由したくなければ以下のように `Array` に変換してループするのが簡単です。 ``` let fileList = document.getElementById("fileList"); // fileList.children は HTMLCollection for (let child of Array.from(fileList.children)) { // child は div#fileList の子要素 } ```