[JS]ループで子要素を全取得したいけど、エラーがでた話
![[JS]ループで子要素を全取得したいけど、エラーがでた話](https://muttaan.com/muttan_wp/wp-content/uploads/2022/04/children.png)


書き方をちょこっと変えれば取得できるから、やってみよう!
こんにちは、むったん(@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
どのように取得できているか、コンソールからご確認ください。