要素を一括で取得してforeachで取得しようとしたらHTMLコレクションってループできないみたいね
だからHTMLコレクションを配列に変換する方法の備忘録

HTMLコレクションとは

配列っぽいオブジェクトなんだけど配列じゃないからforEachでループが回せない謎オブジェクト

なので、forEachで回せるように配列にする必要性がある

HTMLCollectionを配列にする方法

HTMLCollectionを配列にするには二つ方法がある
・Array.from()メソッド
・...というスプレッド構文

実際に使うとこう(↓h2要素を取得することが目的のソースコード)

<h2>テスト01</h2>
<h2>テスト02</h2>
<h2>テスト03</h2>

<script>
var hc = document.getElementsByTagName('h2');// HTMLCollection
console.log(Array.from(hc));// Array → (3) [h2, h2, h2]
console.log([...hc]);// Array → (3) [h2, h2, h2]
</script>

で、forEachを使おうとするなら

<h2>テスト01</h2>
<h2>テスト02</h2>
<h2>テスト03</h2>

<script>
var hc = document.getElementsByTagName('h2');// HTMLCollection
// ↓どっちか
var hcArray = Array.from(hc);
var hcArray = [...hc];

hcArray.forEach(elm => {
	console.log(elm);// 全部出力
});
</script>

これでHTMLCollectionでもforEachを使うことができる

NodeListはforEach()で取得可能

前回、要素を追加する際の比較で使ったNodeListなんだけど
NodeListは配列に変換しなくてもforEachが使えるみたいね

var nl = document.querySelectorAll("要素");// NodeList
nl.forEach(elm => {
	console.log(elm);// 全部出力
});