JavaScript HTMLの子要素に対してループ処理をしたい時の注意点
以下のようなHTMLがあり、id="parent"の子要素のdivのtextをすべてつなげた文字列を取得したいとします。
<div id="parent">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>取得したい結果。
aaa,bbb,ccc子要素をすべて取得して、それらをループで回してtextを結合すれば良いのですが、以下のようにやるとエラーになります。
const parent = document.getElementById('parent');
const children = parent.children;
const result = children.map(c => c.innerText).join(); //Uncaught TypeError: children.map is not a function理由は、childrenは普通のArrayではなく、HTMLCollection というインターフェースであるため、map がないからです。
この場合、Array.from を使って配列に変換してあげるとうまくいきます。
const parent = document.getElementById('parent');
const children = Array.from(parent.children);
const result = children.map(c => c.innerText).join();