[JS]ループで子要素を全取得したいけど、エラーがでた話

こんにちは、むったん(@6ttan)です。

対象要素内にある子要素をJSで全取得して、加工したい！
ということは、まぁまぁあると思います。

今回はそんな「子要素を全部取得したいのにエラーになった！！」をよくやって、毎度同じページにたどり着く私の備忘録です。
毎度検索するもんだから、Googleさんにも予測単語を出される始末です。。。

よくやるエラーコード

例えば、.js-listの子要素liたち全部を取得したいとしましょう。

<ul class="js-list">
  <li>spring</li>
  <li>summer</li>
  <li>autumn</li>
  <li>winter</li>
</ul>

let parent = document.querySelector('.js-items');
let els = parent.children;

els.forEach(function(el) {
  console.log(el);
  // => Uncaught TypeError: els.forEach is not a function
});

忘れてやらかし、毎度怒られます。

というのもforEachはchildrenプロパティなどのHTMLCollectionオブジェクトに対応していないんです。

配列に変換して全取得する

先ほどのelsを配列に変換して、回してあげればliたちを全取得できるようになります。

Array.from(els).forEach(function(el) {
  console.log(el);
})

もしくは…

for(const el of Array.from(els)) {
  console.log(el);
}

としてあげれば、.js-listの子要素liたち全部を取得できます。

ちなみに以下のコードはGoogle Chrome上では動くが、仕様上では動きません。
Chrome上ではHTMLCollectionもiterable化される

for(const el of els) {
  console.log(el_for);
}

Demo

See the Pen
子要素を取得する by むったん (@6ttan)
on CodePen.0

どのように取得できているか、コンソールからご確認ください。